/* Cornerstone Global - public website styles. Local Build Package 1 (Owner GO 4 Nov 2026).
   Specification: Ground Rules Register v1.2 (M4 colour, M5 type, M6 Request a Quote, M9 fixed areas), Responsive
   Specification Addendum v1.2 and Logo Proofs v1-v1.3 (measured header sizes). One stylesheet for all 11 pages.
   Colour pairs used for text are checked automatically (website/tests.py, test_p1.py). No animation. */

/* ---------------------------------------------------------------------------------------------------------------
   1. Colours and sizes. Approved palette (reference 01): Soft Navy #2C4E73, Light Graphite #6B889A, Industrial
   Orange #F47721, Soft Orange Tint #FDE6D6, Soft White #F5F8FA, White. Owner decisions 3 Nov 2026: buttons
   #C2410C (hover #9A3412), WhatsApp #1F7A3F. #F47721 is an accent only (lines, slashes), never behind or as text;
   #6B889A only for lines and large text. Secondary text #4F6878 (5.86:1 on white).
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --navy: #2C4E73;
  --navy-dark: #213B57;      /* hover on navy buttons */
  --muted: #4F6878;          /* secondary text */
  --graphite-light: #6B889A; /* lines, large text only */
  --accent: #F47721;         /* Industrial Orange: lines and slashes only */
  --action: #C2410C;         /* buttons, links, icons */
  --action-dark: #9A3412;    /* hover; orange text on the tint */
  --tint: #FDE6D6;
  --soft: #F5F8FA;
  --white: #FFFFFF;
  --whatsapp: #1F7A3F;
  --whatsapp-dark: #17602F;
  --line: #E3E8EC;
  --navy-tint: #E8EEF4;
  --hero-ink: #0A1F5C;       /* Home hero text only: deep navy from the Owner's frozen reference (7 Nov 2026) */
  --hero-orange: #E8480A;    /* Home hero icon tiles only (graphics, not text), from the same reference */
  --banner-navy: #16456A;    /* Home Products & Solutions banner panel, from the Owner's frozen reference (7 Nov 2026) */
  --banner-orange: #F7890A;  /* the banner's cog icon only (graphic on navy), from the same reference */
  --shadow: 0 6px 22px rgba(44, 78, 115, 0.09);
  --radius: 8px;
  --max: 1240px;
  --gutter: 16px;
  /* Names used by the other pages' rules, mapped onto the approved palette */
  --graphite: var(--navy);
  --text: var(--navy);
  --orange: var(--accent);
  --orange-dark: var(--action);
  --orange-darker: var(--action-dark);
  --steel: var(--muted);
  --steel-light: var(--line);
  --light: var(--soft);
}

/* ---------------------------------------------------------------------------------------------------------------
   2. Base and type (M5: body 16 px, weight 400, line height 1.6; nothing under 14 px except legal fine print)
   --------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto,
       Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--navy); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
h3 { font-weight: 600; }
p { margin: 0 0 1em; }
img { max-width: 100%; }
a { color: var(--action); text-underline-offset: 2px; }
/* Links inside sentences and contact lines: invisible padding above and below makes each tap area at least 44 px tall
   (M9, every interactive element) without changing the text or the line spacing. */
main :is(p, li, dd, td) > a:not(.btn, .card-link, .category-list a), main :is(p, li, dd, td) > strong > a { padding-block: 12px; }
a:hover { color: var(--action-dark); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.container { max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left));
             padding-right: max(var(--gutter), env(safe-area-inset-right)); }
@media (min-width: 768px) { :root { --gutter: 24px; } }
.icon { width: 20px; height: 20px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 50; background: var(--white); padding: 8px 12px; }
[hidden] { display: none !important; }

/* WhatsApp icon (Simple Icons, CC0; used only to label WhatsApp chat links). Takes the colour of the text.
   R4 (Owner, 10 Nov 2026): the icon is embedded here (same artwork as img/icons/whatsapp.svg) because the separate file did
   not appear on the password-protected Azure preview. The content policy already allows data: images. */
.wa-mark { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
           -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%22/%3E%3C/svg%3E") center / contain no-repeat;
                   mask: url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%22/%3E%3C/svg%3E") center / contain no-repeat; }

/* Orange slash before a title (approved references) - decoration only */
.slash-title { position: relative; padding-left: 0.85em; }
.slash-title::before { content: ""; position: absolute; left: 0.12em; top: 0.08em; bottom: 0.08em; width: 0.16em;
                       background: var(--accent); border-radius: 2px; transform: skewX(-18deg); }

/* ---------------------------------------------------------------------------------------------------------------
   3. Buttons: one style per role on every page (Addendum v1.2 §6). Height 48 px (M6: at least 44, 48 recommended).
   --------------------------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
       border: 1.5px solid transparent; border-radius: var(--radius); font-size: 1rem; font-weight: 600; line-height: 1.2;
       text-align: center; text-decoration: none; cursor: pointer; padding-top: 6px; padding-bottom: 6px; }
/* Request a Quote in the header and menu, and the hero actions, never wrap (M6); longer labels elsewhere may. */
.header-quote, .menu-quote, .hero .btn { white-space: nowrap; }
.btn .icon { width: 18px; height: 18px; }
.btn-quote, .btn-primary { background: var(--action); color: var(--white); }
.btn-quote:hover, .btn-primary:hover { background: var(--action-dark); color: var(--white); }
.btn-whatsapp { background: var(--whatsapp); color: var(--white); }
.btn-whatsapp:hover { background: var(--whatsapp-dark); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-dark); color: var(--white); }
.btn-outline { background: var(--white); color: var(--action); border-color: var(--action); }
.btn-outline:hover { background: var(--tint); color: var(--action-dark); border-color: var(--action-dark); }
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--soft); color: var(--navy); }
.btn-large { min-height: 52px; font-size: 1.0625rem; padding: 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }

/* ---------------------------------------------------------------------------------------------------------------
   4. Header (P-a on phones and tablets, full menu from 1200 px; measured in Logo Proofs v1.1)
   --------------------------------------------------------------------------------------------------------------- */
.info-strip { display: none; background: var(--soft); border-bottom: 1px solid var(--line); color: var(--navy);
              font-size: 0.875rem; }
.info-inner { display: flex; align-items: center; gap: 24px; min-height: 44px; max-width: 1440px; }
.info-item { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.info-item .icon { width: 18px; height: 18px; color: var(--navy); }
.info-markets { gap: 10px; }
.info-contact { margin-left: auto; gap: 14px; }
.info-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--navy); text-decoration: none; }
.info-contact a:hover { color: var(--action); text-decoration: underline; }
.info-whatsapp .wa-mark { color: var(--whatsapp); width: 18px; height: 18px; }
.sep { color: var(--graphite-light); }

/* Dividing lines are drawn as shadows so they add no height: header exactly 64 px on phones (M9). */
.site-header { position: relative; z-index: 30; background: var(--white);
               box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(44, 78, 115, 0.06); }
/* Sticky on every screen size, except screens under 500 px tall (landscape phones, high zoom): Addendum v1.2 §1. */
@media (min-height: 500px) {
  .site-header { position: sticky; top: 0; }
  html { scroll-padding-top: 72px; }
}
.header-bar { --logo-h: 27px; --bar-gap: 10px; display: flex; align-items: center; gap: var(--bar-gap); height: 64px;
              max-width: 1440px; position: relative; }
.brand { display: flex; align-items: center; gap: calc(var(--logo-h) * 0.25); flex: none; min-width: 44px; min-height: 44px; line-height: 0; }
/* Widths follow each piece's own proportions (master regions 456 x 434, 1152 x 248, 1152 x 312), so the layout never
   depends on which file the browser has loaded yet. */
.logo-symbol { display: block; height: var(--logo-h); width: calc(var(--logo-h) * 456 / 434); }
.logo-word img { display: block; height: var(--logo-h); width: calc(var(--logo-h) * 1152 / 248); }
@media (min-width: 1200px) { .logo-word img { width: calc(var(--logo-h) * 1152 / 312); } }
@media (max-width: 374px) { .header-bar { --logo-h: 22px; --bar-gap: 8px; } }
/* Under 360 px: symbol only, 36 px tall (Owner decision 3 Nov 2026, Option 1). */
@media (max-width: 359px) { .header-bar { --logo-h: 36px; } .logo-word { display: none; } }

.header-quote { margin-left: auto; min-height: 48px; padding: 0 14px; font-size: 0.875rem; flex: none; }
.header-quote .icon { display: none; }
.header-quote[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--action-dark); }

/* Phone and tablet menu: a plain <details> element, so it also works without JavaScript */
.nav-menu { flex: none; }
.menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; margin-right: -6px;
               list-style: none; cursor: pointer; color: var(--navy); border-radius: var(--radius); }
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle .icon { width: 28px; height: 28px; }
.menu-toggle .icon-close, .nav-menu[open] .icon-menu { display: none; }
.nav-menu[open] .icon-close { display: block; }
.menu-panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto;
              background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 16px 28px rgba(44, 78, 115, 0.16);
              padding: 8px var(--gutter) 20px; }
.menu-panel .nav-list { list-style: none; margin: 0; padding: 0; }
.menu-panel .nav-list > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.menu-panel .nav-list > li > a { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 8px;
                                 color: var(--navy); font-weight: 500; font-size: 1.0625rem; text-decoration: none; }
.menu-panel .nav-list a .icon { width: 22px; height: 22px; color: var(--navy); }
.menu-panel .nav-list > li > a[aria-current="page"] { background: var(--tint); color: var(--action-dark); font-weight: 600; }
.menu-panel .nav-list > li > a[aria-current="page"] .icon { color: var(--action-dark); }
.menu-panel .sub-menu { display: contents; }
.menu-panel .sub-menu > summary { display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 52px;
                                  list-style: none; cursor: pointer; color: var(--navy); }
.menu-panel .sub-menu > summary::-webkit-details-marker { display: none; }
.menu-panel .sub-menu[open] > summary .icon { transform: rotate(180deg); }
.menu-panel .sub-list { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 8px 44px; }
.menu-panel .sub-list a { display: flex; align-items: center; min-height: 44px; color: var(--navy); text-decoration: none; }
.menu-panel .sub-list a:hover { color: var(--action); }
.menu-quote { width: 100%; margin-top: 20px; }

/* PC menu bar (1200 px and wider). Gap between links 14 px up to 1439 px, 22 px from 1440 px (measured fit). */
.nav-main { display: none; }
@media (min-width: 1200px) {
  .info-strip { display: block; }
  .header-bar { --logo-h: 72px; height: 88px; gap: 16px; }
  html { scroll-padding-top: 96px; }
  .nav-main { display: block; margin-left: auto; }
  .nav-main .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
  .nav-main .nav-list > li { position: relative; display: flex; align-items: center; }
  /* Every menu target at least 44 x 44 px (M9): short words are centred in a 44 px wide target. */
  .nav-main .nav-list > li > a, .nav-main .sub-menu > summary {
    display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 3px 0 0;
    border-bottom: 3px solid transparent; color: var(--navy); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
    text-decoration: none; list-style: none; cursor: pointer; }
  .nav-main .nav-list > li > a:hover, .nav-main .sub-menu > summary:hover { color: var(--action); }
  .nav-main .nav-list > li > a[aria-current="page"], .nav-main .sub-menu > summary.is-current { color: var(--action); border-bottom-color: var(--accent); }
  .nav-main .sub-menu > summary::-webkit-details-marker { display: none; }
  .nav-main .sub-menu > summary .icon { width: 16px; height: 16px; }
  .nav-main .sub-menu[open] > summary .icon { transform: rotate(180deg); }
  .nav-main .sub-list { position: absolute; top: calc(100% + 6px); left: -12px; min-width: 300px; list-style: none; margin: 0;
                        padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px;
                        box-shadow: var(--shadow); }
  .nav-main .sub-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px;
                          color: var(--navy); font-size: 0.9375rem; text-decoration: none; }
  .nav-main .sub-list a:hover { background: var(--soft); color: var(--action); }
  .header-quote { padding: 0 18px; font-size: 0.9375rem; }
  .nav-menu { display: none; }
  .header-bar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
/* Measured in the build (4 Nov 2026), with a Windows scrollbar (15 px) and the Products & Solutions chevron, which the
   proofs did not include. 1200-1279 px: 14 px link text and 8 px gaps (no spare width at 1200). 1280-1439 px: the proof's
   14 px gap, with about 12 px to spare (correction round, 4 Nov 2026). The button's icons are added from 1440 px.
   Logo size unchanged (72 px). Recorded in the review pack. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .header-bar { gap: 10px; }
  .nav-main .nav-list { gap: 8px; }
  .nav-main .nav-list > li > a, .nav-main .sub-menu > summary { font-size: 0.875rem; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .nav-main .nav-list { gap: 14px; } }
@media (min-width: 1440px) {
  .nav-main .nav-list { gap: 22px; }
  .header-quote { padding: 0 20px; }
  .header-quote .icon { display: block; }
}

/* ---------------------------------------------------------------------------------------------------------------
   5. Footer: full corporate logo on all 11 pages; service line also as text below 1024 px (M2, D3). The master's white
   background blends into the soft white with the browser's multiply mode (T1); the file itself is unchanged.
   --------------------------------------------------------------------------------------------------------------- */
/* Owner-approved footer direction (5 Nov 2026): light world-map band (FOOTER-MAP-001 derivative, pending approval), restrained
   official logo, Explore / Contact / Legal columns with orange-underlined headings and shared icons. */
.site-footer { background: #F4F8FC; border-top: 1px solid var(--line); color: var(--navy); padding: 0 0 36px; }
.footer-map { height: clamp(96px, 15vw, 210px); margin-bottom: 8px;
              background: url("/static/img/photos/web/footer-map-001-1448.webp") center top / cover no-repeat;
              -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
@media (max-width: 720px) { .footer-map { background-image: url("/static/img/photos/web/footer-map-001-720.webp"); } }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.footer-logo { display: block; width: 100%; max-width: 320px; height: auto; mix-blend-mode: multiply; }
.footer-heading::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--accent); }
.footer-links .icon, .footer-domain .icon { flex: none; width: 20px; height: 20px; margin-right: 10px; color: var(--action); }
.footer-links .wa-mark { width: 20px; height: 20px; margin-right: 10px; color: var(--action); }
.footer-domain { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.footer-address { display: flex; align-items: flex-start; margin-top: 8px; font-size: 0.875rem; line-height: 1.6; }
.footer-address .icon { flex: none; width: 20px; height: 20px; margin: 2px 10px 0 0; color: var(--action); }
.footer-address address { font-style: normal; }
.footer-address-label { display: block; font-weight: 600; }
.footer-services { margin: 12px 0 16px; font-size: 0.875rem; font-weight: 600; line-height: 1.7; }
.footer-services span { color: var(--action); padding: 0 6px; }
.footer-services .svc { color: inherit; padding: 0; white-space: nowrap; }  /* Owner, 10 Nov 2026: no break inside a service name */
.footer-identity { margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.footer-descriptor { margin: 0; font-size: 0.875rem; color: var(--muted); }
.footer-heading { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 700; color: var(--navy); }
.site-footer a { color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--action); text-decoration: underline; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { margin-bottom: 0; }
.plain-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }   /* M9: 44 px targets */
.legal-particulars { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 12px 0 0; font-size: 0.875rem; }
.legal-particulars dd { margin: 0; }
.locations h3 { font-size: 0.9375rem; margin: 0 0 4px; }
.location p { margin: 0 0 4px; }
.locations-compact .location-country { margin-bottom: 8px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1200px) {
  .footer-grid { grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 32px; }
  .footer-col .footer-links a, .footer-domain { overflow-wrap: normal; }
  .footer-brand { grid-column: auto; }
  .footer-logo { max-width: 340px; }
  .footer-col { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------------------------------------------
   6. Phone contact bar (under 768 px): WhatsApp · Email · Call, 48 px plus the phone's safe area (M9). It stays at the
   bottom of the screen only on screens at least 560 px tall, so header (64) + bar (48) stay within 20% of the height;
   on shorter screens it sits at the end of the page. It never covers the footer.
   --------------------------------------------------------------------------------------------------------------- */
.contact-bar { display: none; }
@media (max-width: 767px) {
  .contact-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); z-index: 25; background: var(--white);
                 box-shadow: 0 -1px 0 var(--line), 0 -4px 14px rgba(44, 78, 115, 0.08);
                 padding-bottom: env(safe-area-inset-bottom); }
  .contact-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-size: 0.9375rem;
                   font-weight: 600; text-decoration: none; }
  .contact-bar a + a { box-shadow: inset 1px 0 0 var(--line); }
  .contact-whatsapp { color: var(--whatsapp); }
  .contact-email { color: var(--action); }
  .contact-call { color: var(--navy); }
  .contact-bar a:hover { background: var(--soft); }
}
@media (max-width: 767px) and (min-height: 560px) { .contact-bar { position: sticky; bottom: 0; } }

/* ---------------------------------------------------------------------------------------------------------------
   7. Home page, Sections 1-7 (approved references; Package 1)
   --------------------------------------------------------------------------------------------------------------- */
.section { padding: 48px 0; }
@media (min-width: 900px) { .section { padding: 64px 0; } }
.section h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin: 0 0 12px; }

/* Single-destination cards: the title link covers the whole card (M7) */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card-link:focus-visible { outline: none; }
:is(.quick-card, .solution-card, .send-card):has(.card-link:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
:is(.quick-card, .solution-card, .send-card):hover { box-shadow: 0 10px 28px rgba(44, 78, 115, 0.16); }
:is(.quick-card, .solution-card, .send-card):hover h3 { color: var(--action); }

/* Section 1: hero */
.hero { position: relative; display: flex; flex-direction: column; background: var(--soft); overflow: hidden; }
.hero-media { order: 2; display: block; }
.hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 50%; }
.hero-inner { order: 1; position: relative; z-index: 1; width: 100%; }
.hero-copy { padding: 28px 0 24px; max-width: 640px; }
.hero-descriptor { margin: 0 0 12px; color: var(--navy); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em;
                   text-transform: uppercase; }
.hero h1 { margin: 0 0 14px; font-size: clamp(1.875rem, 7.4vw, 3.125rem); font-weight: 700; line-height: 1.12; }
@media (min-width: 600px) { .hero-line { display: block; } }   /* break after "Heavy Equipment," as in the reference */
.hero-sub { margin: 0; font-size: clamp(1.0625rem, 2.6vw, 1.375rem); color: var(--navy); }
.hero-sub span { color: var(--action); padding: 0 8px; }
.hero .actions { margin-top: 24px; }
@media (min-width: 900px) {
  .hero { display: block; min-height: 460px; }
  .hero-media { position: absolute; inset: 0; }
  .hero-media img { height: 100%; aspect-ratio: auto; object-position: 75% 55%; }
  /* Owner's frozen reference (7 Nov 2026, CSG_Home_Hero_Owner_Frozen_Reference_2026-11-07.webp): no fade and no panel; the
     heading and four points sit directly on the photo in deep navy. Phones keep the picture below the text. */
  .hero-copy { padding: 36px 0 44px; max-width: 60%; }
  .hero h1 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); line-height: 1.04; }
}
@media (min-width: 1200px) {
  .hero { min-height: 480px; } .hero-descriptor { display: none; }
  .hero-inner.container { max-width: none; padding-left: 52px; }
  .hero-points { margin-left: 20px; }
}

/* Hero points (Owner's frozen reference, 7 Nov 2026): deep navy text, orange outlined icon tiles. */
.hero h1 { color: var(--hero-ink); font-weight: 800; }
.hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hero-points li { display: flex; align-items: center; gap: 18px; color: var(--hero-ink); font-weight: 800;
                  font-size: clamp(1.1875rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -0.01em; }
.hero-points .icon { flex: none; box-sizing: border-box; width: 56px; height: 56px; padding: 9px; border: 2px solid var(--hero-orange);
                     border-radius: 12px; background: rgba(255, 255, 255, 0.55); color: var(--hero-orange); stroke-width: 2.2; }
@media (min-width: 900px) { .hero-points .icon { width: 70px; height: 60px; padding: 8px 13px; } .hero-points { gap: 12px; } }
/* Category strip on Home, as in the same reference: deep navy labels. The width cap below was for the former two-line label;
   since decision A-28 (C-11) the label is "Critical Spare Parts", which fits on one line, so the cap has no visible effect. */
.category-strip .category-list a:not(:hover) { color: var(--hero-ink); }
.category-list li:nth-child(2) span { max-width: 10em; }

/* Section 1: four main categories under the hero */
.category-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.category-list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.category-list li { border-bottom: 1px solid var(--line); }
.category-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.category-list a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 128px;
                   padding: 18px 10px; color: var(--navy); text-align: center; text-decoration: none; font-weight: 600;
                   font-size: 1.0625rem; line-height: 1.25; }
.category-list a::after { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--accent); }
.category-list .icon { width: 40px; height: 40px; color: var(--action); stroke-width: 1.6; }
.category-list a:hover { color: var(--action); background: var(--soft); }
@media (min-width: 600px) {
  .category-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-list li { border-bottom: 0; border-right: 1px solid var(--line); }
  .category-list li:last-child { border-right: 0; }
  .category-list a { font-size: 1.125rem; min-height: 150px; }
}
@media (min-width: 1200px) { .category-list a { font-size: 1.25rem; } .category-list .icon { width: 48px; height: 48px; } }
/* Owner, 10 Nov 2026: on PC screens the hero and the category strip fit on the first screen (checked at 1536 x 727, a
   1920 x 1080 display at 125% scaling). Spacing only: text, picture, icons and the phone layout are unchanged. */
@media (min-width: 900px) {
  .hero-copy { padding: 24px 0 28px; }
  .hero-points { margin-top: 16px; gap: 8px; }
  .category-list a { min-height: 120px; }
}
@media (min-width: 1200px) { .hero { min-height: 440px; } }

/* Section 2: Quick Enquiry. Owner decision (Package 1 corrections): ONE column on all phones, up to 767 px, including
   414 px; supersedes the provisional two-column phone concept (register 21A). Tablets two columns, PC four. */
.quick { background: var(--white); }
.quick-grid { display: grid; gap: 24px; }
.quick-intro h2 { margin-bottom: 8px; }
.quick-intro p { margin: 0; color: var(--muted); font-size: 1.0625rem; max-width: 30rem; }
.quick-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.quick-card { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) 40px; grid-template-rows: auto auto;
              column-gap: 16px; align-items: center; min-height: 96px; padding: 16px 16px 16px 14px; background: var(--white); border: 1px solid var(--line);
              border-radius: 14px; box-shadow: var(--shadow); }
.quick-card img { grid-row: 1 / 3; width: 80px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.quick-card .quick-icon { display: none; }
.quick-card h3 { grid-column: 2; margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.quick-card p { grid-column: 2; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.chevron-dot { grid-column: 3; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
               border-radius: 50%; background: var(--action); color: var(--white); }
.chevron-dot .icon { width: 18px; height: 18px; stroke-width: 2.4; }
@media (min-width: 768px) {
  .quick-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-card { display: flex; flex-direction: column; align-items: flex-start; padding: 0 16px 56px; overflow: hidden; }
  .quick-card img { align-self: stretch; width: auto; height: 96px; margin: 0 -16px 8px; padding: 10px 10px 0; object-fit: contain; }
  .quick-card .quick-icon { display: flex; color: var(--navy); margin-bottom: 6px; }
  .quick-card .quick-icon .icon { width: 28px; height: 28px; }
  .chevron-dot { position: absolute; right: 14px; bottom: 14px; }
}
@media (min-width: 1024px) { .quick-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .quick-grid { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 32px; padding: 28px 28px 28px 36px;
                background: var(--soft); border-radius: 20px; }
  .quick-intro { padding-right: 28px; border-right: 1px solid var(--line); }
  .quick-card h3 { font-size: 1.125rem; }
}

/* Section 3: Products & Solutions */
.solutions-home { background: var(--soft); }
.banner { display: grid; overflow: hidden; border-radius: 18px; background: var(--navy); color: var(--white); margin-bottom: 24px; }
.banner-copy { padding: 28px 24px; }
.banner h2 { color: var(--white); }
.banner p { margin: 0; color: var(--white); font-size: 1.0625rem; max-width: 36rem; }
.banner-photo { display: block; width: 100%; height: 160px; object-fit: cover; object-position: 50% 60%; }
/* Products & Solutions banner to the Owner's frozen references (7 Nov 2026): deeper navy panel, orange cog with a thin divider
   in place of the slash, wider description. */
.solutions-home .banner { background: var(--banner-navy); }
.section .banner-title { display: flex; align-items: center; margin: 0 0 10px; font-size: clamp(1.5rem, 7.2vw, 2.75rem); }
.banner-title .icon { flex: none; box-sizing: content-box; width: 1.12em; height: 1.12em; padding-right: 0.28em; margin-right: 0.28em;
                      border-right: 1.5px solid rgba(255, 255, 255, 0.35); color: var(--banner-orange); stroke-width: 1.9; }
.solutions-home .banner p { max-width: none; font-size: clamp(1rem, 4.4vw, 1.0625rem); line-height: 1.5; }
.solutions-home .banner-copy { padding: 16px 14px 20px; }
.banner-br { display: none; }
@media (min-width: 900px) { .solutions-home .banner p { font-size: clamp(0.875rem, 1.42vw, 1.3125rem); } }
@media (min-width: 1200px) { .banner-br { display: inline; } .solutions-home .banner-copy { padding-right: 18px; } }
@media (min-width: 900px) {
  .banner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  .banner-copy { padding: 40px 44px; align-self: center; }
  .solutions-home .banner-copy { padding: 26px 32px 30px; }
  .banner-photo { height: 240px; }
}
.solution-cards, .send-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.solution-card, .send-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 36px; align-items: center;
                             column-gap: 14px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line);
                             border-radius: 14px; box-shadow: var(--shadow); }
.solution-card > img { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; }
.solution-card .badge, .solution-card p, .send-card p { display: none; }
.solution-card h3, .send-card h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.btn-card { justify-self: end; }
/* Phones: the card's button shrinks to a round chevron (the card itself is the link) */
@media (max-width: 599px) {
  .btn-card { width: 36px; min-height: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 0; gap: 0;
              background: var(--action); color: var(--white); border: 0; }
  .btn-card .icon { width: 18px; height: 18px; stroke-width: 2.4; }
}
.phone-actions { margin-top: 20px; }
@media (min-width: 600px) {
  .phone-actions { display: none; }
  .solution-cards, .send-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .solution-card, .send-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px 22px;
                               overflow: hidden; border-radius: 18px; }
  .solution-card > img { width: calc(100% + 40px); height: 170px; margin: 0 -20px; border-radius: 0; object-position: 50% 50%; }  .solution-card .badge, .send-card .badge { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
                                             border-radius: 50%; background: var(--white); color: var(--action);
                                             box-shadow: 0 4px 14px rgba(44, 78, 115, 0.18); }
  .solution-card .badge { margin-top: -30px; position: relative; z-index: 0; }
  .solution-card .badge .icon, .send-card .badge .icon { width: 30px; height: 30px; }
  .solution-card h3, .send-card h3 { margin: 12px 0 6px; font-size: 1.1875rem; }
  .solution-card p, .send-card p { display: block; margin: 0 0 18px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
  .btn-card { justify-self: auto; margin-top: auto; white-space: normal; padding: 10px 18px; min-height: 44px; }
}
@media (min-width: 900px) { .solution-cards, .send-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* Section 4: Send an Enquiry */
.send-head { max-width: 760px; margin-bottom: 24px; }
.send-question { margin: 0 0 8px; color: var(--navy); font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 700; }
.send-head p:last-child { color: var(--muted); margin: 0; }
.send-card .badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px;
                    background: var(--tint); color: var(--action); }
.send-card .badge .icon { width: 26px; height: 26px; }
@media (max-width: 599px) { .send-card { grid-template-columns: 52px minmax(0, 1fr) 36px; } }
@media (min-width: 600px) {
  .send-card { padding-top: 26px; border-top: 4px solid var(--accent); }
  .send-card .badge { border-radius: 50%; background: var(--tint); box-shadow: none; }
}

/* Section 5: hard-to-find parts */
.relax-grid { display: grid; gap: 28px; align-items: center; }
.relax-question { margin: 0 0 6px; color: var(--whatsapp); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; }
.relax-title { margin: 0 0 16px; font-size: clamp(2.5rem, 6vw, 3.75rem) !important; font-weight: 800; line-height: 1; }
.relax-title em { color: var(--action); font-style: italic; }
.relax-lead { font-size: 1.125rem; font-weight: 600; color: var(--navy); max-width: 32rem; }
.relax-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--accent); }
.relax-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.relax-list li:last-child { border-bottom: 0; }
.relax-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
              background: var(--tint); color: var(--action); }
.relax-icon .icon { width: 24px; height: 24px; }
.relax-list strong { color: var(--navy); }
/* SMART-SOURCING-001: the whole 2:1 picture is shown (no cropping), so both halves of the before-and-after story stay visible. */
/* Owner, 5 Nov 2026: on phones and tablets the picture comes first, then the text (order -1); on PC the text stays on the left. */
.relax-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 18px; order: -1; }
@media (min-width: 900px) {
  /* Owner, 5 Nov 2026 (Owner's reference): two layers.
     Top band: question, heading and line on the left; the whole 2:1 picture on the right.
     Below, across the full width: the five points in a row, then the buttons. */
  .relax-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 40px; }
  .relax-copy { grid-column: 1; grid-row: 1; }
  .relax-photo { grid-column: 2; grid-row: 1; order: 0; }
  .relax-more { grid-column: 1 / -1; grid-row: 2; }
  .relax-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
                padding: 24px 0 0; border-left: 0; border-top: 3px solid var(--accent); }
  .relax-list li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; border-bottom: 0; }
  .relax-more .actions { margin-top: 28px; }
}
@media (min-width: 1200px) {
  .relax-question { font-size: 2rem; }
  .relax-title { font-size: 4.5rem !important; }
  .relax-lead { font-size: 1.3125rem; max-width: none; }
  .relax-list li { font-size: 1.0625rem; }
  .relax .actions .btn { font-size: 1.0625rem; }
}

/* Section 6: How We Work */
.how { background: var(--soft); }
.how-title { font-size: clamp(2rem, 4.4vw, 3rem) !important; font-weight: 800; margin-bottom: 10px; }
.how-lead { max-width: 46rem; color: var(--muted); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.how-lead::after { content: ""; display: block; width: 96px; height: 4px; margin-top: 16px; border-radius: 2px; background: var(--accent); }
.how-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
.how-steps li { position: relative; display: grid; grid-template-columns: 40px 48px minmax(0, 1fr); grid-template-rows: auto auto;
                column-gap: 14px; align-items: center; padding: 16px 18px; background: var(--white); border: 1px solid var(--line);
                border-radius: 14px; box-shadow: var(--shadow); }
.how-num { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
           background: var(--action); color: var(--white); font-weight: 700; font-size: 0.9375rem; }
.how-icon { grid-row: 1 / 3; color: var(--navy); }
.how-icon .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.how-steps h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.how-steps p { grid-column: 3; margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
/* Arrows between steps: down on phones, right on wide screens (decoration) */
.how-steps li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 20px; height: 20px;
  transform: translateX(-50%); background: no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) {
  .how-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
  .how-steps li { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 18px 24px; }
  .how-icon { align-self: center; margin: 10px 0 14px; }
  .how-icon .icon { width: 64px; height: 64px; }
  .how-steps h3 { font-size: 1.1875rem; }
  .how-steps li:not(:last-child)::after { left: auto; right: -28px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-90deg); }
}
.how-note { display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding: 16px 20px; background: var(--tint);
            border-radius: 12px; color: var(--navy); }
.how-note .icon { width: 24px; height: 24px; margin-top: 1px; }
.how-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.how-tagline { margin: 16px 0 0; color: var(--muted); }

/* Section 7: Trading & Supply Opportunities (Approved_Light) */
.trade { background: linear-gradient(180deg, var(--white) 0%, var(--soft) 100%); text-align: center; }
.trade-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 8px; color: var(--navy);
                 font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.trade-eyebrow::before, .trade-eyebrow::after { content: ""; width: 40px; height: 3px; border-radius: 2px; background: var(--accent); }
.trade-title { font-size: clamp(1.75rem, 4vw, 2.75rem) !important; font-weight: 800; }
.trade-title span { color: var(--action); }
.trade-lead { color: var(--muted); font-size: 1.0625rem; max-width: 40rem; margin: 0 auto 28px; }
.trade-cards { display: grid; gap: 24px; text-align: left; }
.trade-card { overflow: hidden; background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border-bottom: 4px solid var(--accent); }
.trade-navy { border-bottom-color: var(--navy); }
.trade-card > img { display: block; width: 100%; height: 200px; object-fit: cover; }
.trade-body { padding: 22px 22px 24px; text-align: center; }
.trade-head { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; margin-bottom: 14px; }
.trade-icon { display: flex; flex: none; color: var(--action); }
.trade-navy .trade-icon { color: var(--navy); }
.trade-icon .icon { width: 48px; height: 48px; stroke-width: 1.6; }
.trade-head h3 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 800; }
.trade-head p { margin: 0; color: var(--muted); }
.trade-pill { display: inline-block; margin: 0 0 14px; padding: 6px 18px; border-radius: 999px; background: var(--tint); color: var(--action-dark);
              font-weight: 700; letter-spacing: 0.06em; }
.trade-navy .trade-pill { background: var(--navy-tint); color: var(--navy); }
.trade-body > p:not(.trade-pill) { color: var(--muted); max-width: 30rem; margin: 0 auto 4px; }
.trade-body .actions { justify-content: center; margin-bottom: 0; }
.trade-strip { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.trade-strip li { display: flex; align-items: center; gap: 12px; text-align: left; color: var(--navy); font-weight: 600; line-height: 1.3; }
.trade-strip .icon { width: 36px; height: 36px; color: var(--navy); stroke-width: 1.6; }
@media (min-width: 900px) {
  .trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .trade-card > img { height: 240px; }
  .trade-body { padding: 26px 30px 30px; }
  .trade-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trade-strip li + li { border-left: 1px solid var(--line); padding-left: 18px; }
}

/* Section 8 market focus: the photographic band is removed (Owner, 5 Nov 2026); the message stays as a live-text navy pill. */
.section-tight { padding-top: 0; }
.market-plain { display: flex; justify-content: center; padding-top: 40px; }
.market-text { margin: 0; color: var(--white); background: var(--navy); padding: 12px 28px; border-radius: 999px;
               font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 600; letter-spacing: 0.04em; text-align: center; }
/* TRADING-SUPPLY-001 on phones and tablets: view shifted to 25% so both men and the handshake show (Owner, 5 Nov 2026). */
@media (max-width: 899px) { .trade-orange > img { object-position: 25% 50%; } }

/* ---------------------------------------------------------------------------------------------------------------
   8. Other pages (content unchanged in Package 1; colours follow the approved palette through the names above)
   --------------------------------------------------------------------------------------------------------------- */
.lead { font-size: 1.125rem; max-width: 46rem; }
.narrow { max-width: 48rem; }
.eyebrow { margin: 0 0 12px; color: var(--action); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow-dark { color: var(--action); }
.page-header { background: var(--soft); padding: 44px 0 36px; border-bottom: 4px solid var(--accent); }
.page-header h1 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); margin: 0 0 14px; max-width: 30ch; }
.page-header .lead { margin-bottom: 0.6em; }
.page-header-light { border-bottom: 0; padding: 40px 0 32px; }
.page-header-light h1 { margin-bottom: 10px; }
.section-light { background: var(--soft); }
.solution + .solution { border-top: 1px solid var(--line); }
.solution:nth-of-type(even) { background: var(--soft); }
.solution { scroll-margin-top: 100px; }
/* Short orange rule under section titles on the other pages (the Home sections use the slash instead) */
.section h2:not(.slash-title, .relax-title, .how-title, .trade-title, .banner-title)::after { content: ""; display: block; width: 36px; height: 3px;
  margin-top: 10px; background: var(--accent); border-radius: 2px; }
.route-card h2::after, .legal h2::after, .process h2::after { display: none !important; }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius);
        padding: 22px; box-shadow: var(--shadow); }
.card h3 { font-size: 1.125rem; margin: 0 0 8px; }
.card p { margin: 0; color: var(--muted); }
.item-list { padding-left: 22px; }
.item-list li { margin-bottom: 6px; }
.item-list li::marker { color: var(--action); }
.item-list-inline { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; counter-reset: step;
         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.steps li { counter-increment: step; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
            font-weight: 600; font-size: 0.9375rem; box-shadow: var(--shadow); }
.steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                    margin-bottom: 10px; border-radius: 50%; background: var(--action); color: var(--white); }
.process { list-style: none; padding-left: 0; counter-reset: proc; }
.process > li { counter-increment: proc; position: relative; padding: 4px 0 18px 64px; border-left: 2px solid var(--line); margin-left: 20px; }
.process > li:last-child { border-left-color: transparent; }
.process > li::before { content: counter(proc); position: absolute; left: -21px; top: 0; width: 40px; height: 40px; display: flex;
                        align-items: center; justify-content: center; border-radius: 50%; background: var(--action); color: var(--white);
                        font-weight: 700; }
.process h2 { font-size: 1.1875rem; margin: 6px 0 4px; }
.note { color: var(--muted); font-size: 0.9375rem; }
.notice { border-left: 4px solid var(--accent); background: var(--soft); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.placeholder-box { border: 1px dashed var(--muted); padding: 12px 16px; border-radius: var(--radius); }
.draft-banner { background: #FFF4E5; border: 2px solid var(--action); color: var(--navy); font-weight: 700; padding: 10px 14px;
                border-radius: var(--radius); }
.legal h2 { font-size: 1.1875rem; margin: 28px 0 6px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 8px; background: var(--white); border: 1px solid var(--line);
                border-radius: var(--radius); box-shadow: var(--shadow); }
.contact-list li { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-label { display: inline-block; min-width: 11.5rem; font-weight: 700; }
.contact-locations { margin-top: 32px; }
@media (max-width: 599px) { .contact-label { display: block; min-width: 0; } .item-list-inline { display: block; } }

/* L1 enquiry routes (Request a Quote page) */
.route-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 8px 0 40px; }
@media (min-width: 760px) { .route-grid { grid-template-columns: 1fr 1fr; } }
.route-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius);
              padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; }
.route-card h3 { font-size: 1.25rem; margin-top: 0; }
.route-card p { color: var(--muted); }
.route-card .btn { margin-top: auto; }
.route-whatsapp { border-top-color: var(--whatsapp); }
.route-detail { margin: 14px 0 0; font-weight: 600; }
.route-card .route-detail { color: var(--navy); }
.route-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
              background: var(--tint); color: var(--action-dark); font-weight: 700; font-size: 1.2rem; }
.start-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 8px 0; }
@media (min-width: 860px) { .start-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.start-card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--white); box-shadow: var(--shadow);
              scroll-margin-top: 110px; }
.start-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.25); }
.start-card h3 { font-size: 1.125rem; margin: 14px 0 8px; }
/* R2 (A-33): each path card ends with its own email and WhatsApp buttons */
.start-card { display: flex; flex-direction: column; }
.start-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
.start-actions .btn { flex: 1 1 auto; justify-content: center; }
.files-note { margin: 24px 0 0; }
.files-note p { margin: 0 0 6px; }
.files-note p:last-child { margin-bottom: 0; }
.send-heading { margin-top: 48px; }
.check-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); }
.check-list li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 14px; height: 8px; border-left: 3px solid var(--action);
                         border-bottom: 3px solid var(--action); transform: rotate(-45deg); }
.check-list.compact { margin: 0; }
.check-list.compact li { padding: 8px 0 8px 30px; font-size: 0.9375rem; }
.check-list.compact li::before { top: 13px; }
.check-list.compact li:last-child { border-bottom: 0; }

/* Request a Quote form (later stage; not shown in L1 mode) */
.rfq-form { margin-top: 16px; }
.rfq-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rfq-section { margin-bottom: 28px !important; }
.rfq-section > legend { font-size: 1.25rem; font-weight: 700; padding: 12px 0 0; margin-bottom: 12px; width: 100%; border-top: 4px solid var(--accent); }
.step { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%;
        background: var(--navy); color: var(--white); font-size: 0.9375rem; margin-right: 6px; }
.field { margin-bottom: 14px; min-width: 0; }
.field label, .files .label { display: block; font-weight: 600; margin-bottom: 4px; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: 2fr 2fr 1fr; } }
.rfq-form input[type="text"], .rfq-form input[type="email"], .rfq-form input[type="tel"], .rfq-form input[type="date"],
.rfq-form select, .rfq-form textarea { width: 100%; font: inherit; padding: 10px; min-height: 44px; color: var(--navy);
  border: 1px solid var(--muted); border-radius: var(--radius); background: var(--white); }
.rfq-form input[type="date"] { width: auto; }
.req { font-weight: 400; color: var(--muted); font-size: 0.9375rem; }
.hint { color: var(--muted); font-size: 0.9375rem; }
.label .hint, label .hint { font-weight: 400; }
.choice { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; margin: 6px 0; }
.choice input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.choice-group { margin-bottom: 14px !important; }
.choice-group > legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.date-field { display: block; margin: 0 0 6px 28px; }
.rfq-item { border: 1px solid var(--line) !important; border-left: 4px solid var(--muted) !important; border-radius: var(--radius);
            padding: 12px 14px 4px !important; margin-bottom: 16px !important; position: relative; }
.rfq-item > legend { font-weight: 700; padding: 0 6px; }
.remove-item { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--action); text-decoration: underline;
               font: inherit; cursor: pointer; padding: 4px; }
.js-only { display: none; }
.js .js-only { display: inline-block; }
.js .js-only[hidden] { display: none; }
.tech-details, .more-files { margin: 8px 0 12px; }
.tech-details summary, .more-files summary { cursor: pointer; color: var(--action); font-weight: 600; padding: 6px 0; }
.item-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.file-slot { margin: 8px 0 14px; }
.file-slot label { display: block; font-weight: 600; }
.file-slot .inline-label { font-weight: 400; margin-top: 6px; }
.file-slot select { max-width: 20rem; }
.consents { margin: 8px 0 16px; }
.has-error input, .has-error select, .has-error textarea { border: 2px solid #B3261E !important; }
.field-error { color: #B3261E; font-weight: 600; margin: 2px 0 6px; }
.error-summary { border: 3px solid #B3261E; padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; }
.error-summary h2 { font-size: 1.125rem; margin: 0 0 8px; }
.error-summary a { color: #B3261E; font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reference-box { font-size: 1.125rem; border-left: 4px solid var(--accent); background: var(--soft); padding: 16px; }
.reference-box strong { font-size: 1.6rem; letter-spacing: 0.03em; }
.rfq-form input[type="file"] { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 8px; border: 1px dashed var(--muted);
                              border-radius: var(--radius); font: inherit; }
@media (max-width: 639px) {
  .field-row.three { grid-template-columns: 1fr 1fr; }
  .field-row.maker > :first-child, .field-row.qty > :last-child { grid-column: 1 / -1; }
}

/* About Us: one-page layout to the Owner-approved direction (5 Nov 2026, CSG_About_Us_*_Icons_FullPage.png). */
/* ABOUT-MAP-001 (Owner's logo-centred direction, 6 Nov 2026): the whole clean map is always shown (2:1, no cropping); the official
   logo file sits unchanged on a white plate with a soft light glow, as in the Owner's reference; the market line is live text. */
.about-map { padding: 24px 0 0; background: var(--white); }
.about-map-frame { position: relative; overflow: hidden; border-radius: 16px; background: #0b2a55; }
.about-map-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.about-map-centre { position: absolute; left: 48%; top: 47%; display: flex; flex-direction: column; align-items: center; gap: 14px;
                    width: 36%; transform: translate(-50%, -50%); }
.about-map-plate { display: block; width: 100%; padding: 6% 7%; border-radius: 18px; background: #fff;
                   box-shadow: 0 0 36px 12px rgba(255, 255, 255, .45), 0 0 90px 30px rgba(120, 190, 255, .35); }
.about-map-plate img { display: block; width: 100%; height: auto; }
.about-map-pill { margin: 0; padding: 7px 22px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(7, 27, 58, .82);
                  color: #fff; font-size: clamp(.875rem, 1.5vw, 1.125rem); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
@media (min-width: 700px) { .about-map-centre { width: 26%; gap: 18px; } }
@media (min-width: 1240px) { .about-map-centre { width: 300px; } }
@media (max-width: 699px) {
  .about-map { padding-top: 16px; }
  .about-map-frame { border-radius: 12px; }
  .about-map-centre { top: 50%; gap: 8px; }
  .about-map-plate { border-radius: 10px; box-shadow: 0 0 18px 6px rgba(255, 255, 255, .4), 0 0 40px 14px rgba(120, 190, 255, .3); }
  .about-map-pill { padding: 4px 14px; font-size: .875rem; }
}
.about-intro { padding: 56px 0 40px; text-align: center; background: var(--white); }
.about-eyebrow { margin: 0 0 14px; color: var(--action); font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.about-title { margin: 0 0 18px; color: var(--navy); font-size: clamp(2.125rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.1; }
.about-lead { max-width: 44rem; margin: 0 auto; color: var(--muted); font-size: clamp(1.0625rem, 2vw, 1.1875rem); line-height: 1.6; }
.about-lead strong { color: var(--navy); }
.about-rule { display: block; width: 96px; height: 3px; margin: 28px auto 0; border-radius: 2px; background: var(--accent); }
.about-values { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.about-values-list { display: grid; gap: 12px; margin: 0 auto; padding-top: 18px; padding-bottom: 18px; list-style: none; }
.about-values-list li { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.about-values-list .icon, .about-label .icon { flex: none; width: 18px; height: 18px; color: var(--action); }
.about-soft { background: var(--soft); }
.about-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--action); font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-label-center { justify-content: center; }
main:has(.about-intro) .section h2 { color: var(--navy); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; }
main:has(.about-intro) .section h2::after { display: none; }
.about-two { display: grid; gap: 40px; }
.about-two p:not(.about-label) { color: var(--muted); line-height: 1.7; }
.about-cards { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.about-cards li { padding: 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.about-cards h3 { margin: 14px 0 6px; color: var(--navy); font-size: 1.0625rem; }
.about-cards p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.about-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--navy-tint); color: var(--navy); }
.about-cards-4 .about-card-icon { background: var(--tint); color: var(--action); }
.about-card-icon .icon { width: 22px; height: 22px; }
.about-philosophy { margin: 0; padding: 40px 28px; border-radius: 14px; background: var(--navy); color: var(--white); text-align: center; }
.about-philosophy blockquote { margin: 0; }
.about-philosophy blockquote p { max-width: 46rem; margin: 0 auto; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.4; }
.about-philosophy figcaption { margin-top: 14px; color: #D7E1EB; font-size: .9375rem; }
.about-promise { text-align: center; }
.about-promise-main { max-width: 44rem; margin: 0 auto 16px; color: var(--navy); font-size: clamp(1.25rem, 2.6vw, 1.625rem); font-weight: 700; line-height: 1.4; }
.about-promise-sub { max-width: 40rem; margin: 0 auto 26px; color: var(--muted); }
@media (min-width: 720px) {
  .about-values-list { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .about-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .about-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .about-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------------------------------------------
   R5 refinements (Owner, 11 Nov 2026, preview review of R4). Calmer, more proportional type; nothing added or claimed.
   --------------------------------------------------------------------------------------------------------------- */
/* Item 6: the hero. Lighter heading, calmer points with slim round icons, "Multi-Brand Requirements" on one line and
   last, Global Sourcing Options moved up (Owner, 11 Nov 2026), and the text centred in the height of the picture. */
.hero h1 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; }
.hero-points { gap: 10px; }
.hero-points li { gap: 14px; font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.3; letter-spacing: 0; }
.hero-points li span { max-width: none !important; }
.hero-points .icon { width: 38px; height: 38px; padding: 8px; border-width: 1.5px; border-radius: 50%;
                     background: rgba(255, 255, 255, 0.8); stroke-width: 1.8; }
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; }
  .hero h1 { font-size: clamp(2.25rem, 3.3vw, 3.125rem); margin-bottom: 0; }
  .hero-points { margin-top: 26px; gap: 14px; }
  .hero-points li { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); }
  .hero-points .icon { width: 44px; height: 44px; padding: 9px; }
}

/* Item 1: "Leave the Search to Us" in proportion with the rest of the page. */
.relax-question { font-size: 1.125rem !important; font-weight: 600; margin-bottom: 10px; }
.relax-title { font-size: clamp(1.875rem, 3.2vw, 2.625rem) !important; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.relax-title em { font-style: normal; }
@media (min-width: 1200px) { .relax-question { font-size: 1.25rem !important; } .relax-lead { font-size: 1.1875rem; } }

/* Item 4: the closing line of How We Work as a visible statement beside the buttons. */
.how-actions { margin-top: 28px; align-items: center; }
.how-actions .actions { margin-top: 0; }
.how-tagline { margin: 0; color: var(--navy); font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.how-tagline span { color: var(--action); }

/* Items 2 and 3: footer (Owner, 11 Nov 2026: "take the logo in the centre top ... maintain symmetry on all four sides;
   Explore, Contact and Legal at the centre below the logo"). One centred axis on every screen: the logo and its text on top,
   a thin rule, then the three columns of equal width, each centred, with link labels kept on one line. */
.footer-grid { grid-template-columns: minmax(0, 1fr); justify-items: stretch; text-align: center; }
.footer-brand { grid-column: 1 / -1; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-logo { max-width: 300px; margin: 0 auto; }
.footer-services { margin: 14px 0 12px; }
.footer-services .svc-pair { color: inherit; padding: 0; white-space: nowrap; }
.footer-identity, .footer-descriptor { text-wrap: balance; }
.footer-heading::after { margin-left: auto; margin-right: auto; }
.footer-links a { justify-content: center; white-space: nowrap; overflow-wrap: normal; }
.footer-domain { justify-content: center; overflow-wrap: normal; }
.footer-address { justify-content: center; text-align: center; }
.footer-address .icon { display: none; }      /* the label "Registered office" carries the meaning; keeps the block centred */
@media (max-width: 559px) {
  .footer-services .svc-pair { display: block; }
  .footer-services .sep-mid, .footer-services wbr { display: none; }
}
/* Owner, 11 Nov 2026: Explore, Contact and Legal side by side under the logo wherever they fit (from 640 px); only phones
   stack them. Between 640 and 899 px the footer text is a little smaller and the link icons are left out so each label
   stays on one line. */
@media (max-width: 639px) { .footer-grid { grid-template-columns: minmax(0, 1fr) !important; } .footer-col { border-left: 0 !important; } }
@media (min-width: 640px) and (max-width: 899px) {
  .footer-col { font-size: 0.875rem; }
  .footer-links .icon, .footer-links .wa-mark, .footer-domain .icon { display: none; }
  .footer-col { padding: 0 8px !important; }
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .footer-col { padding: 0 16px; }
  .footer-col + .footer-col { border-left: 1px solid var(--line); }
}
@media (min-width: 1200px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; column-gap: 0; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-logo { max-width: 300px; }
  .footer-col { padding: 0 24px; border-left: 0; }
  .footer-col + .footer-col { border-left: 1px solid var(--line); }
}

/* Item 5: Products & Solutions sections. A short headline, the description as a lead, the items as a tidy checklist
   and the category's approved picture beside the text on PC (above it on phones). */
.solution-grid { display: grid; gap: 24px; align-items: center; }
.solution-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px;
                  box-shadow: var(--shadow); }
.solution-kicker { margin: 0 0 6px; color: var(--action); font-size: 1rem; font-weight: 600; }
.solution .solution-lead { margin: 0 0 18px; font-size: 1.125rem; line-height: 1.6; max-width: 40rem; }
.solution-items { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px 28px; grid-template-columns: minmax(0, 1fr); }
.solution-items li { position: relative; margin: 0; padding-left: 30px; line-height: 1.45; }
.solution-items li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@media (min-width: 600px) { .solution-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .solution-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
  .solution:nth-of-type(even) .solution-grid > .solution-photo { order: -1; }
  .solution:nth-of-type(even) .solution-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* A section without a picture (Part Condition) uses the full width, its three conditions side by side. */
@media (min-width: 900px) {
  .solution .solution-grid:not(:has(.solution-photo)) { grid-template-columns: minmax(0, 1fr); }
  #part-condition .solution-lead { max-width: 52rem; }
  #part-condition .solution-items { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 64rem; }
}
/* Phones and tablets: the picture first, then the text (as on Home, Owner 5 Nov 2026); PC alternates sides. */
.solution-grid > .solution-photo { order: -1; }
@media (min-width: 900px) { .solution:nth-of-type(odd) .solution-grid > .solution-photo { order: 0; } }
/* Hero on mid-size screens (900-1199 px): the lighter text sits over the busy part of the picture, so a soft light shade
   behind the text keeps it readable. Larger screens keep the picture unshaded (the text sits on sky and sea there). */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-media::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(245, 248, 250, 0.92) 0%, rgba(245, 248, 250, 0.78) 38%, rgba(245, 248, 250, 0) 62%); }
}
/* Owner, 11 Nov 2026: more breathing space between icons and text (buttons and footer links), and between the closing line
   and the buttons when they sit one above the other. */
.btn { gap: 12px; }
.btn .icon:last-child { margin-left: 2px; }
.footer-links .icon, .footer-domain .icon, .footer-links .wa-mark { margin-right: 12px; }
.how-actions { row-gap: 20px; }
/* Owner, 11 Nov 2026: keep each topic's column, but left-align the text inside it. Each column's block stays centred in its
   own space (so the footer remains symmetric), with one straight left edge for heading, links and address. */
.footer-col { display: grid; justify-content: center; align-content: start; text-align: left; }
.footer-col .footer-heading::after { margin-left: 0; }
.footer-col .footer-links a, .footer-col .footer-domain, .footer-col .footer-address { justify-content: flex-start; text-align: left; }
.footer-col .footer-address .icon { display: block; }
@media (min-width: 640px) and (max-width: 899px) { .footer-col .footer-address .icon { display: none; } }
@media (max-width: 639px) { .footer-col { width: min(100%, 290px); justify-self: center; justify-content: start; } }
/* Owner, 11 Nov 2026: the three text rows under the logo evenly spaced (same gap between rows 1-2 and 2-3). */
.footer-brand .footer-services, .footer-brand .footer-identity, .footer-brand .footer-descriptor { line-height: 1.6; }
.footer-brand .footer-services { margin: 14px 0 12px; }
.footer-brand .footer-identity { margin: 0 0 12px; }
.footer-brand .footer-descriptor { margin: 0; }
/* Owner, 11 Nov 2026: the icons stay on every screen size. Between 640 and 899 px they are a little smaller (16 px) so each
   label still fits on one line beside its icon. */
@media (min-width: 640px) and (max-width: 899px) {
  .footer-col .footer-links .icon, .footer-col .footer-links .wa-mark, .footer-col .footer-domain .icon,
  .footer-col .footer-address .icon { display: block; width: 16px; height: 16px; margin-right: 8px; }
  .footer-col .footer-links .wa-mark { display: inline-block; }
  .footer-col .footer-address .icon { margin-top: 3px; }
}
/* Owner, 11 Nov 2026: the four hero points larger and set like the hero heading (same typeface, weight and tight spacing). */
.hero-points li { font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 600; letter-spacing: -0.01em; }
.hero-points .icon { width: 42px; height: 42px; padding: 9px; }
@media (min-width: 900px) {
  .hero-points li { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
  .hero-points .icon { width: 46px; height: 46px; padding: 10px; }
}
/* Owner, 11 Nov 2026: "increase the logo as much as you can in the given space". Below 1200 px the header logo grows with the
   screen, up to 44 px tall (it was 27 px), always leaving room for Request a Quote and the menu button. Tablets (600-1199 px)
   get a 76 px header; phones keep the 64 px header (M9). PC (72 px logo) is unchanged. */
@media (min-width: 375px) and (max-width: 1199px) {
  .header-bar { --logo-h: clamp(27px, calc((100vw - 222px) / 5.95), 44px); }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .header-bar { height: 76px; }
  html { scroll-padding-top: 84px; }
  .menu-panel { max-height: calc(100vh - 76px); }
}
/* Owner, 11 Nov 2026 ("still a little bigger"): tablets and mid-size screens (600-1199 px) logo up to 56 px in an 80 px header. */
@media (min-width: 600px) and (max-width: 1199px) {
  .header-bar { --logo-h: clamp(27px, calc((100vw - 222px) / 5.95), 56px); height: 80px; }
  html { scroll-padding-top: 88px; }
  .menu-panel { max-height: calc(100vh - 80px); }
}
/* Owner, 11 Nov 2026: the "Leave the Search to Us" picture lower, in proportion with the text. A slightly wider frame (5:2)
   trims only a strip of background at the top and of desk at the bottom; both halves of the before-and-after stay whole. */
.relax-photo { aspect-ratio: 5 / 2; object-position: 50% 35%; }
@media (max-width: 899px) { .relax-photo { max-height: 260px; } }
/* Owner, 11 Nov 2026: the Products & Solutions banner text justified (both edges straight). The forced line breaks of the
   7 Nov reference are switched off, since a forced break leaves its line unjustified; the wording is unchanged. */
.solutions-home .banner p { text-align: justify; text-align-last: left; }
.banner-br { display: none !important; }
@media (max-width: 599px) { .solutions-home .banner p { text-align: left; } }   /* narrow phones: justified lines open wide gaps */
/* Owner, 11 Nov 2026: each Solutions headline centred directly under its picture, as a caption. */
.solution-figure { margin: 0; order: -1; }
.solution-figure .solution-kicker { margin: 14px 0 0; text-align: center; font-size: 1.0625rem; }
@media (min-width: 900px) {
  .solution:nth-of-type(odd) .solution-grid > .solution-figure { order: 0; }
  .solution:nth-of-type(even) .solution-grid > .solution-figure { order: -1; }
}
.solution-figure .solution-kicker { margin-top: 16px; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.3;
                                    letter-spacing: -0.005em; }   /* Owner, 11 Nov 2026: larger */
.solution-copy .solution-kicker { font-size: 1.25rem; }               /* Part Condition (no picture) to match */
/* Owner, 11 Nov 2026: a relevant icon before each Products & Solutions heading (same icon set as the Home category strip),
   in a soft round badge sized to the heading. */
.solution-title .title-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.55em; height: 1.55em;
  margin-right: 0.45em; vertical-align: -0.38em; border-radius: 50%; background: var(--tint); color: var(--action); }
.solution-title .title-badge .icon { width: 0.95em; height: 0.95em; stroke-width: 1.8; }
/* Owner, 11 Nov 2026: icon and heading text on one horizontal centre line. */
.solution-title .title-row { display: flex; align-items: center; }
.solution-title .title-badge { flex: none; vertical-align: 0; }
/* Owner, 11 Nov 2026: Products & Solutions descriptions justified (left-aligned on narrow phones, as on the Home banner). */
@media (min-width: 600px) { .solution .solution-lead { text-align: justify; text-align-last: left; } }
/* Owner, 11 Nov 2026 ("not very happy and encouraging"): Part Condition as three positive choices. Each panel has a coloured
   header with a large white icon and the condition name, then a short "suits you when" line (PROPOSED wording) and the
   approved description. Equal heights; stacked on phones. */
.condition-choices { list-style: none; margin: 28px 0 8px; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.condition-choices li { display: flex; flex-direction: column; margin: 0; overflow: hidden; background: var(--white);
  border-radius: 18px; box-shadow: 0 10px 30px rgba(44, 78, 115, 0.12); }
.choice-head { display: flex; align-items: center; gap: 16px; padding: 22px 24px; color: var(--white); }
.condition-choices li:nth-child(1) .choice-head { background: linear-gradient(135deg, #16456A, #2C6E9E); }
.condition-choices li:nth-child(2) .choice-head { background: linear-gradient(135deg, #1F7A3F, #2FA05A); }
.condition-choices li:nth-child(3) .choice-head { background: linear-gradient(135deg, #C2410C, #F47721); }
.choice-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.choice-icon .icon { width: 28px; height: 28px; color: var(--white); stroke-width: 1.9; }
.condition-choices h3 { margin: 0; color: var(--white); font-size: 1.375rem; font-weight: 700; }
.choice-body { padding: 20px 24px 24px; }
.choice-fit { margin: 0 0 8px; color: var(--navy); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
.choice-body p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.choice-body p:last-child::first-letter { text-transform: uppercase; }
@media (min-width: 900px) {
  .condition-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .choice-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 26px 22px; }
  .choice-icon { width: 64px; height: 64px; }
  .choice-icon .icon { width: 32px; height: 32px; }
  .choice-body { padding: 22px 26px 28px; }
}
/* Owner, 11 Nov 2026: condition panels with a compact light-coloured header (just the icon and name) and dark text. */
.choice-head, .choice-head h3 { color: var(--navy); }
.condition-choices h3 { color: var(--navy); font-size: 1.25rem; }
.condition-choices li:nth-child(1) .choice-head { background: #E6EEF6; }
.condition-choices li:nth-child(2) .choice-head { background: #E3F2E8; }
.condition-choices li:nth-child(3) .choice-head { background: #FDE9DC; }
.choice-head { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 12px 20px !important; }
.choice-icon { width: 44px !important; height: 44px !important; background: var(--white); box-shadow: none; }
.choice-icon .icon { width: 22px !important; height: 22px !important; }
.condition-choices li:nth-child(1) .choice-icon .icon { color: #16456A; }
.condition-choices li:nth-child(2) .choice-icon .icon { color: var(--whatsapp); }
.condition-choices li:nth-child(3) .choice-icon .icon { color: var(--action); }
.condition-choices li { border: 1px solid var(--line); box-shadow: var(--shadow); }
.choice-body { padding: 18px 20px 22px !important; }
/* Owner, 11 Nov 2026 ("attain symmetry"): the Solutions checklists on a regular grid - every row the same height, the last item
   of an odd-numbered list across both columns - and more room before the Enquire button. */
@media (min-width: 600px) {
  .solution-items { grid-auto-rows: 1fr; row-gap: 14px; }
  .solution-items li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.solution-copy > .btn { margin-top: 12px; }
.solution .solution-lead { margin-bottom: 28px; }   /* Owner, 11 Nov 2026: more space between the description and the checklist */
.solution-items li { font-size: 1.0625rem; }   /* Owner, 11 Nov 2026: checklist text slightly larger (17 px) */
@media (min-width: 1200px) { .solution-items li { font-size: 1.125rem; } }
.solution-items li::before { top: 0.18em; }
/* Owner, 11 Nov 2026: Products & Solutions hero to the Owner's reference - orange bar and hook line, bold heading, one-line
   subtitle; the lead and note beside seven link tiles (3 above, 4 below) with large orange icons and orange underlines. */
.sol-hero { background: var(--white); border-bottom: 0; padding: 44px 0 48px; }
.sol-hook { position: relative; margin: 0 0 6px; padding-top: 22px; color: var(--action); font-size: clamp(1.5rem, 3.4vw, 2.75rem);
            font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.sol-hook::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 6px; border-radius: 3px; background: var(--accent); }
.sol-hero h1 { margin: 0 0 10px; max-width: none; color: var(--hero-ink); font-size: clamp(2.25rem, 5.4vw, 4.25rem); font-weight: 800;
               line-height: 1.05; letter-spacing: -0.02em; }
.sol-subtitle { margin: 0 0 32px; color: var(--navy); font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.4; }
.sol-hero-grid { display: grid; gap: 32px; }
.sol-lead { margin: 0 0 28px; padding-left: 18px; border-left: 4px solid var(--accent); color: var(--navy); font-size: 1.125rem;
            font-weight: 500; line-height: 1.6; }
.sol-note { display: flex; align-items: center; gap: 16px; }
.sol-note > .icon { flex: none; width: 64px; height: 64px; color: var(--hero-ink); stroke-width: 1.5; }
.sol-note p { margin: 0; padding-left: 16px; border-left: 3px solid var(--accent); color: var(--navy); font-size: 1rem; line-height: 1.55; }
.sol-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sol-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px;
            padding: 20px 12px 18px; background: var(--white); border: 1px solid var(--line); border-bottom: 4px solid var(--accent);
            border-radius: 18px; box-shadow: 0 8px 24px rgba(44, 78, 115, 0.10); color: var(--hero-ink); text-align: center;
            text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sol-tile:hover, .sol-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(44, 78, 115, 0.16); }
.sol-tile-icon { color: var(--action); line-height: 0; }
.sol-tile-icon .icon { width: 56px; height: 56px; stroke-width: 2.1; }
.sol-tile-label { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.sol-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 14px) / 2); }
@media (min-width: 600px) {
  .sol-tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .sol-tile-top { grid-column: span 4; }
  .sol-tile-bottom { grid-column: span 3; }
  .sol-tile:last-child:nth-child(odd) { grid-column: span 3; width: auto; justify-self: stretch; }
  .sol-tile { min-height: 160px; }
}
@media (min-width: 1100px) {
  .sol-hero { padding: 56px 0 64px; }
  .sol-hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 40px; align-items: center; }
  .sol-tile-top { min-height: 200px; }
  .sol-tile-top .icon { width: 76px; height: 76px; }
  .sol-tile-top .sol-tile-label { font-size: 1.25rem; }
  .sol-tile-bottom { min-height: 170px; }
  .sol-tile-bottom .icon { width: 60px; height: 60px; }
  .sol-tile-bottom .sol-tile-label { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { .sol-tile { transition: none; } .sol-tile:hover { transform: none; } }
/* Owner, 11 Nov 2026: the reference's solid orange tile icons (vector redraws, includes/sol_icon.html). */
.sol-tile-icon { color: var(--accent); }
.sol-tile-icon .sol-icon { display: block; width: 60px; height: 60px; }
@media (min-width: 1100px) {
  .sol-tile-top .sol-icon { width: 84px; height: 84px; }
  .sol-tile-bottom .sol-icon { width: 66px; height: 66px; }
}
/* Owner, 11 Nov 2026 ("do it exactly like the image that I have provided, no changes"): proportions, weights and colours of the
   reference - heavier hook line in the reference orange, larger subtitle, bold lead, big solid icons, two-line heavy labels. */
.sol-hook { color: var(--hero-orange); font-weight: 800; font-size: clamp(1.625rem, 3.6vw, 3rem); letter-spacing: -0.015em; }
.sol-hero h1 { font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.75rem); }
.sol-subtitle { color: #1A2340; font-size: clamp(1.1875rem, 2.1vw, 1.75rem); font-weight: 500; margin-bottom: 36px; }
.sol-lead { color: #1A2340; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 500; border-left-width: 5px; }
.sol-note p { color: #1A2340; font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); }
.sol-note > .icon { width: 72px; height: 72px; stroke-width: 1.6; }
.sol-tile { border-bottom-width: 6px; border-radius: 20px; gap: 14px; }
.sol-tile-icon { color: #F57A1F; }
.sol-tile-label { font-weight: 800; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.15; }
.sol-tile-icon .sol-icon { width: 76px; height: 76px; }
@media (min-width: 1100px) {
  .sol-hero-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); gap: 44px; }
  .sol-tile-top { min-height: 230px; }
  .sol-tile-top .sol-icon { width: 118px; height: 118px; }
  .sol-tile-top .sol-tile-label { font-size: 1.5rem; }
  .sol-tile-bottom { min-height: 200px; }
  .sol-tile-bottom .sol-icon { width: 92px; height: 92px; }
  .sol-tile-bottom .sol-tile-label { font-size: 1.3125rem; }
}
#part-condition .solution-copy .solution-kicker { margin-bottom: 24px; }   /* Owner, 11 Nov 2026: more space above the heading */
/* Owner, 11 Nov 2026: "Products & Solutions" in the same font and style as the Home hero heading. */
.sol-hero h1 { color: var(--hero-ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12;
               font-size: clamp(1.875rem, 7.4vw, 3.125rem); }
@media (min-width: 900px) { .sol-hero h1 { font-size: clamp(2.25rem, 3.3vw, 3.125rem); } }
.sol-hero .sol-hook { font-weight: 400; letter-spacing: 0; }   /* Owner, 11 Nov 2026: normal, not bold */
/* Owner, 11 Nov 2026: Products hero paragraph and note justified (left-aligned on narrow phones, as elsewhere). */
@media (min-width: 600px) { .sol-lead, .sol-note p { text-align: justify; text-align-last: left; } }
.sol-tile .sol-tile-label { font-weight: 400; }   /* Owner, 11 Nov 2026: tile labels normal, not bold */
/* Owner, 11 Nov 2026: phones show the same card descriptions as PC (Products & Solutions and Send an Enquiry cards on Home). */
@media (max-width: 599px) {
  .solution-card, .send-card { grid-template-rows: auto auto; align-items: center; row-gap: 2px; padding: 12px; }
  .solution-card > img, .send-card > .badge { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .solution-card h3, .send-card h3 { grid-column: 2; grid-row: 1; align-self: end; }
  .solution-card p, .send-card p { display: block; grid-column: 2; grid-row: 2; align-self: start; margin: 0;
                                   color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
  .solution-card .btn-card, .send-card .btn-card { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}