/* AragoCor Minerals — shared site chrome (header + footer) * * Loaded by every site page. The tokens here are deliberately namespaced * `--ac-*` rather than reusing `--ink` / `--sand` / `--font-sans`: the older * hand-written pages load `styles.css`, which defines `--sand`, `--font-sans` * and `--font-mono` as *different* things (HSL triplets consumed via * `hsl(var(--sand))`, and the Inter/IBM Plex families). Sharing those names * would break one group or the other depending on stylesheet order. These * names collide with nothing, so the identical chrome markup renders the same * on every page regardless of which page stylesheet is present. */ :root { --ac-ink: #0E3540; --ac-bone: #F7F4ED; --ac-sand: #D7C59C; --ac-bar: #0d141c; --ac-ease: cubic-bezier(0.22, 1, 0.36, 1); --ac-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ac-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Source Serif 4", Georgia, serif; --font-serif: "Source Serif 4", Georgia, serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* ---------- Editorial hero headline ---------- * * One scale for the `h1` on every editorial hero — about, products, * industries, sustainability, resources, contact, locations. Each of those * pages used to carry its own `clamp()` inline, and they had drifted into * three: 30/60, 32/64 and 34/68, with mobile floors so low that a phone got a * headline barely larger than a subhead. The September 2026 design audit * asked for shared responsive type rather than page-specific exceptions; * these two tokens are that shared rule, and the pages now reference them * instead of restating a size. * * The size interpolates linearly from 42px at 390px to 60px at 1440px rather * than using a bare `vw` term, which is what let the old floors bottom out: * a `5vw` middle term is only 19.5px on a phone, so every small screen sat * pinned to the minimum. Both ends are clamped, so a 320px phone and a 2560px * display both stay in range. * * The measure is in `ch`, so it tracks the font size and holds the same line * length at every width instead of the fixed 820-900px each page picked. */ --ac-display-1: clamp(36px, calc(35.3px + 1.71vw), 60px); --ac-display-1-measure: 20ch; } /* ---------- Long-word safety net ---------- * * The pre-rendered pages carry their display type as inline `font-size`, and a * heading long enough to beat its column will otherwise push the whole document * sideways rather than wrap: `/about`'s h1 overflowed the viewport by 27px at * 320px because "Application-focused." is wider than a 280px column at 64px and * `overflow-wrap: normal` refuses to break it. The sizes are responsive now, so * this is belt and braces — but it costs nothing and it means no future copy * change can reintroduce a horizontally scrolling page. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ---------- Display headline leading floor ---------- * * The same pre-rendered pages also carry their leading inline, and every * editorial headline on them sits between 1.02 and 1.08. Source Serif 4's glyph * box is taller than that, so below about 1.1 the line box no longer contains * the type it is setting: measured on `/contact` at 390px, the h1's * `scrollHeight` ran 1px past its `clientHeight`, the descenders of one line * closed on the caps of the next, and the tail of the last line sat outside the * element. On a phone, where a 30-64px headline wraps to three or four lines, * that reads as a clipped heading — which is what the September 2026 design * audit reported against `/contact`. * * The floor is 1.1: tight enough to keep the editorial voice these headlines * were set for, loose enough that the ink stays inside the box. Only the * too-tight values are selected — `line-height: 1.1` and looser do not contain * the substring — so a heading that is already safe is left exactly as it is, * and a heading set below the floor is raised to it wherever it appears. * * `!important` because the declaration being corrected is inline, which is the * same reason the responsive `font-size` overrides further down this file carry * it. It is a floor, not a redesign: nothing here changes a size or a measure. */ h1[style*="line-height: 1.0"], h2[style*="line-height: 1.0"], h3[style*="line-height: 1.0"] { line-height: 1.1 !important; } /* ---------- Component link underlines ---------- * * The global `a { text-decoration: none }` reset lives in `styles.css`, which * only the older hand-written pages load (see the header comment above). The * pre-rendered pages load this file instead, so every link on them falls back * to the browser's default underline — including links that are not prose: * buttons and whole-box card links, whose inner heading AND body copy both got * ruled through, so the card read as if its text were struck out at the bottom * edge. * * The fix is scoped to those component classes rather than a blanket `a` reset, * because the underline is correct and load-bearing on the site's actual prose * links (`.tide-link` and the legal links) — it is what distinguishes them from * surrounding text without relying on colour alone. * * The cards used to carry an inline `border-bottom: none` that looks like it * was meant to do this job — the previous design system drew link underlines * with a bottom border rather than `text-decoration`. It never suppressed the * underline here, and on a card that also sets `border: 1px solid` it deleted * the box's own bottom edge, leaving the card open along the bottom. Those * declarations are gone; do not reintroduce them to style a link. */ .btn-ar, .pg-btn, .rt-card, .ind-card, .doc-row, .doc-card, .loc-teaser, .ac-skip { text-decoration: none; } /* ---------- Header ---------- */ .ac-nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 244, 237, 0.97); border-bottom: 1px solid rgba(14, 53, 64, 0.14); box-shadow: 0 8px 30px rgba(8, 20, 28, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--ac-font-sans); } .ac-nav__inner { max-width: 1440px; margin: 0 auto; height: 74px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ac-nav__left { display: flex; align-items: center; gap: 36px; min-width: 0; } .ac-nav__logo { display: flex; align-items: center; border-bottom: none; flex-shrink: 0; } /* width: auto keeps the wordmark at its intrinsic 398:94 ratio even if the width attribute and this height ever disagree again — the attribute once said 150 and squeezed the mark 16% narrower on every page. */ .ac-nav__logo img { height: 42px; width: auto; display: block; } .ac-nav__links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; } .ac-nav__item { position: relative; } .ac-nav__link { color: rgba(14, 53, 64, 0.82); font-size: 14.5px; font-weight: 500; min-height: 44px; padding: 8px 0; border-bottom: none; display: inline-flex; align-items: center; text-decoration: none; transition: color 220ms var(--ac-ease); } .ac-nav__link:hover, .ac-nav__link:focus-visible { color: var(--ac-ink); } .ac-nav__item[aria-current="page"] .ac-nav__link { color: var(--ac-ink); } .ac-nav__item[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--ac-ink); } .ac-nav__cta { background: transparent; color: var(--ac-ink); min-height: 44px; padding: 8px 0 8px 24px; border-radius: 0; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; border-left: 1px solid rgba(14, 53, 64, 0.18); border-bottom: none; white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: background 220ms var(--ac-ease); } /* This used to restate the resting values — transparent background, ink text — so the header's primary call to action had no hover response at all. A tint in the same key as .btn-outline elsewhere on the site gives it one without changing the flat, borderless treatment. */ .ac-nav__cta:hover, .ac-nav__cta:focus-visible { background: rgba(14, 53, 64, 0.06); color: var(--ac-ink); } /* Mobile toggle — hidden on desktop. The previous design-system nav had no mobile affordance at all and simply overflowed below ~900px. */ .ac-nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(14, 53, 64, 0.24); border-radius: 4px; color: var(--ac-ink); cursor: pointer; flex-shrink: 0; } .ac-nav__toggle svg { width: 20px; height: 20px; display: block; } .ac-nav__mobile { display: none; } .ac-nav__mobile[hidden] { display: none !important; } @media (max-width: 1080px) { .ac-nav__inner { padding: 0 20px; } .ac-nav__links, .ac-nav__cta { display: none; } .ac-nav__toggle { display: inline-flex; } .ac-nav__mobile { display: block; max-height: 0; overflow: hidden; background: rgba(247, 244, 237, 0.99); border-top: 1px solid rgba(14, 53, 64, 0.14); transition: max-height 260ms var(--ac-ease); } .ac-nav__mobile.is-open { max-height: 80vh; overflow-y: auto; } .ac-nav__mobile ul, .ac-nav__mobile li { list-style: none; } .ac-nav__mobile ul { margin: 0; padding: 8px 20px 20px; } .ac-nav__mobile a { display: block; padding: 14px 0; color: rgba(14, 53, 64, 0.82); font-size: 16px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(14, 53, 64, 0.12); min-height: 48px; } .ac-nav__mobile a:hover, .ac-nav__mobile a:focus-visible { color: var(--ac-ink); } .ac-nav__mobile a[aria-current="page"] { color: var(--ac-ink); font-weight: 700; border-bottom-color: var(--ac-sand); } .ac-nav__mobile .ac-nav__mobile-cta { margin-top: 16px; background: var(--ac-ink); color: var(--ac-bone); border-radius: 4px; text-align: center; font-weight: 600; border-bottom: none; } } /* ---------- Footer ---------- */ .ac-foot { background: var(--ac-ink); color: rgba(247, 244, 237, 0.75); font-family: var(--ac-font-sans); font-size: 13.5px; line-height: 1.65; } .ac-foot__inner { max-width: 1440px; margin: 0 auto; padding: 64px 40px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; } .ac-foot a { color: rgba(247, 244, 237, 0.78); text-decoration: none; border-bottom: none; } .ac-foot a:hover, .ac-foot a:focus-visible { color: var(--ac-bone); } .ac-foot img { display: block; } /* The wordmark links home. As a bare inline its hit box is the line box, 36px tall — under the touch floor, and it is the only control in the footer's brand block. inline-block sizes the link to the mark itself. */ .ac-foot a:has(> img) { display: inline-block; padding: 4px 0; } .ac-foot p { margin: 0; } .ac-foot__label { font-family: var(--ac-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ac-bone); margin-bottom: 18px; } .ac-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ac-foot__list a, .ac-foot__row a, .ac-foot__bottom a { display: inline-flex; align-items: center; min-height: 44px; } .ac-foot__row { display: flex; gap: 10px; align-items: center; min-height: 44px; margin-bottom: 6px; } .ac-foot__row svg { flex-shrink: 0; margin-top: 2px; } .ac-foot__row a[href^="tel:"] { white-space: nowrap; } /* Social link. The mark is a filled 24px glyph rather than a stroked outline, * so it is left-shifted by half the difference between the glyph and its 44px * touch target — the visible logo then aligns flush with the column label * above it while the tap area stays full size. The --inline modifier drops * that offset for the bottom bar, where the link is a flex child with its own * gap and the negative margin would collapse it into the neighbouring item. */ .ac-foot__label--social { margin-top: 26px; margin-bottom: 4px; } .ac-foot__social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; } .ac-foot__social--inline { margin-left: 0; } .ac-foot__social svg { display: block; } .ac-foot__bottom { max-width: 1440px; margin: 0 auto; padding: 24px 40px 40px; border-top: 1px solid rgba(247, 244, 237, 0.14); display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; font-size: 12.5px; color: rgba(247, 244, 237, 0.72); } .ac-foot__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; } @media (max-width: 960px) { .ac-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 48px 20px 32px; gap: 36px; } .ac-foot__bottom { padding-left: 20px; padding-right: 20px; } } /* ---------- The footer on a phone ---------- * * Stacked, the footer ran 1167px on every page — a screen and a half of it, * 45% of the whole of /locations and 31% of /contact. The September 2026 design * audit called it long and visually dominant, and named the cause: it opens * with a brand block that spends roughly 500px on identity — a 203px wordmark, * a tagline, then a *second* wordmark for the source partner and its paragraph * — before the reader reaches a phone number. On desktop that block is one * column of four and costs nothing; stacked it is the whole first screen. * * Fixed here rather than in the markup, because the footer is duplicated into * all 22 pages that carry it and CSS is what keeps those copies byte-identical. * Three changes, none of which removes anything from the page: * * 1. Contact and the two link accordions come first, and the brand block moves * to the end, where a sign-off belongs. `order` on the grid items does it; * the DOM order is untouched, so a screen reader and a crawler still meet * the columns in their authored order. * 2. Both wordmarks are set smaller. The 203px AragoCor mark is display size * for a 4-column desktop footer, not for a 350px phone column. * 3. The 260px measure the brand column carries inline is a desktop * column-width constraint. Held at 350px it wraps the copy a third earlier * than it needs to, so it is released to the column. */ @media (max-width: 560px) { .ac-foot__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; } .ac-foot__inner > div:nth-child(1) { order: 4; } .ac-foot__inner > div:nth-child(2) { order: 1; } .ac-foot__inner > div:nth-child(3) { order: 2; } .ac-foot__inner > div:nth-child(4) { order: 3; } /* The brand block, now the sign-off, set at sign-off scale. */ .ac-foot__inner > div:nth-child(1) { padding-top: 28px; border-top: 1px solid rgba(247, 244, 237, 0.14); } .ac-foot__inner > div:nth-child(1) img[alt="AragoCor Minerals"] { width: 152px; height: auto; } /* The source-partner mark carries its 180px width inline, so the smaller sign-off size has to be stated with the same weight. */ .ac-foot__inner > div:nth-child(1) img[alt="Aragosan Minerals Limited"] { width: 128px !important; height: auto !important; margin-bottom: 10px !important; } .ac-foot__inner > div:nth-child(1) p, .ac-foot__inner > div:nth-child(1) > div { max-width: none !important; } .ac-foot__inner > div:nth-child(1) > div { margin-top: 20px !important; } /* Small tracked capitals at 11px are the hardest thing in the footer to read on a phone; the extra pixel costs one line of nothing. */ .ac-foot__label { font-size: 12px; margin-bottom: 14px; } /* 26px above a label whose only content is one 44px icon is desktop column rhythm, not spacing this stack needs. */ .ac-foot__label--social { margin-top: 12px; } .ac-foot__row { margin-bottom: 0; } .ac-foot__bottom { gap: 6px 24px; padding-top: 20px; padding-bottom: 32px; } .ac-foot__bottom > span { line-height: 1.5; } } /* ---------- Progressive disclosure on phones ---------- * * Two places asked a phone user to scroll past content they had not asked for: * the eleven application cards, which stack one per row into about three and a * half screens, and the footer's two link columns, which add another 666px * under them. `site-chrome.js` collapses both, and only on a phone. * * The markup ships complete and visible. With the script off, or above the * breakpoint, every card and every link is present exactly as before — which * is also what a crawler sees, so nothing here moves a link out of reach of * one. The script toggles the `hidden` attribute rather than removing nodes, * which keeps collapsed content out of the tab order and out of the * accessibility tree instead of merely painting over it. * * The rule below is load-bearing, and applies to the injected controls as much * as to the content: `hidden` is a UA-stylesheet rule, and any author `display` * beats it. The cards carry `display: block` inline, `.ac-foot__list` is * `display: grid`, and both controls here are `display: flex` — so without * these selectors the attribute would be set correctly and change nothing on * screen, leaving a dead toggle visible on every desktop footer. */ .ac-card-grid > [hidden], .ac-foot__list[hidden], .ac-more[hidden], .ac-foot__toggle[hidden] { display: none !important; } .ac-more { width: 100%; min-height: 48px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; background: var(--paper, #FFFFFF); color: var(--ac-ink); border: 1px solid var(--ink-20, rgba(14, 53, 64, 0.20)); border-radius: 6px; font-family: var(--ac-font-sans); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 220ms var(--ac-ease); } .ac-more:hover { background: var(--ac-sand); } .ac-more:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 2px; } /* Matches .ac-foot__label, plus a chevron and a 48px target. The bottom rule gives the collapsed column a visible edge to tap along. */ .ac-foot__toggle { width: 100%; min-height: 48px; margin: 0 0 4px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; border-bottom: 1px solid rgba(247, 244, 237, 0.14); color: var(--ac-bone); font-family: var(--ac-font-mono); font-size: 11px; letter-spacing: 0.1em; text-align: left; cursor: pointer; } .ac-foot__toggle:focus-visible { outline: 2px solid var(--ac-sand); outline-offset: 3px; } .ac-more svg, .ac-foot__toggle svg { flex-shrink: 0; transition: transform 220ms var(--ac-ease); } .ac-more[aria-expanded="true"] svg, .ac-foot__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .ac-more, .ac-more svg, .ac-foot__toggle svg { transition: none; } } /* ---------- Brochure download rows ---------- */ .ac-brochure-library { max-width: 1440px; margin: 0 auto; padding: 48px 40px 88px; border-top: 1px solid var(--ac-sand); border-bottom: 1px solid var(--ac-sand); color: var(--ac-ink); font-family: var(--ac-font-sans); } .ac-brochure-group { padding: 32px; background: var(--ac-bone); border: 1px solid var(--ac-sand); border-radius: 8px; } .ac-brochure-group + .ac-brochure-group { margin-top: 24px; } .ac-brochure-heading { margin-bottom: 20px; } .ac-brochure-eyebrow { margin: 0; color: var(--ac-ink); font-family: var(--ac-font-mono); font-size: 12px; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; opacity: 0.72; } .ac-brochure-heading h2 { margin: 10px 0 0; color: var(--ac-ink); font-family: var(--ac-font-sans); font-size: 40px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; } .ac-brochure-list { display: grid; gap: 12px; } .ac-brochure-row { min-width: 0; min-height: 44px; padding: 14px; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 24px; overflow: hidden; background: var(--ac-bone); border: 1px solid var(--ac-sand); border-radius: 8px; color: var(--ac-ink); font-family: var(--ac-font-sans); text-decoration: none; transition: background 220ms var(--ac-ease), transform 220ms var(--ac-ease); } .ac-brochure-row__preview { width: 120px; aspect-ratio: 11 / 8.5; display: block; overflow: hidden; border: 1px solid var(--ac-sand); border-radius: 4px; } .ac-brochure-row__preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .ac-brochure-row__copy { min-width: 0; display: grid; gap: 7px; } .ac-brochure-row__category, .ac-brochure-row__meta { color: var(--ac-ink); font-family: var(--ac-font-mono); line-height: 1.45; opacity: 0.72; } .ac-brochure-row__category { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .ac-brochure-row__title { color: var(--ac-ink); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; } .ac-brochure-row__meta { font-size: 11.5px; letter-spacing: 0.02em; } .ac-brochure-row__download { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--ac-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; } .ac-brochure-row__download svg { flex: 0 0 auto; transition: transform 220ms var(--ac-ease); } /* `.container-wide` is the page-width wrapper the brochure band is marked with. * It is defined in `styles.css` and again in `industry-pages.css`, and every * page carrying the band loads one of those two — except `/about`, which loads * neither. There the class resolved to nothing, so the band lost its * `padding-inline` and ran flush to both screen edges below 768px while the * same markup on the seven industry pages sat at 24px. * * The values below are copied from those two files unchanged, so on a page that * already defines the class this rule is a no-op whichever sheet wins the * cascade; it only has an effect where nothing else defines it at all. */ .container-wide { margin-inline: auto; width: 100%; max-width: 78rem; padding-inline: 1.5rem; } @media (min-width: 768px) { .container-wide { padding-inline: 3rem; } } .ac-brochure-context { padding-block: 1.75rem; border-bottom: 1px solid var(--ac-sand); } .ac-brochure-context__panel { max-width: 1120px; margin: 0 auto; } .ac-brochure-context .ac-brochure-row { grid-template-columns: 128px minmax(0, 1fr) auto; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; } .ac-brochure-context .ac-brochure-row__preview { width: 128px; } .ac-brochure-context__documents { margin: 10px 0 0 152px; display: flex; flex-wrap: wrap; gap: 12px; } .ac-brochure-context__document { min-height: 44px; padding: 8px 16px; display: inline-flex; align-items: center; background: var(--ac-bone); border: 1px solid var(--ac-sand); border-radius: 4px; color: var(--ac-ink); font-family: var(--ac-font-sans); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 220ms var(--ac-ease); } .ac-brochure-feature { border-top: 1px solid var(--ac-sand); border-bottom: 1px solid var(--ac-sand); color: var(--ac-ink); font-family: var(--ac-font-sans); } .ac-brochure-feature--sourcing { width: 100%; flex: 1 0 100%; border: 0; } @media (hover: hover) { .ac-brochure-row:hover { background: var(--ac-sand); transform: translateY(-2px); } .ac-brochure-context .ac-brochure-row:hover { background: transparent; transform: none; } .ac-brochure-context .ac-brochure-row:hover .ac-brochure-row__title { text-decoration: underline; text-underline-offset: 4px; } .ac-brochure-row:hover .ac-brochure-row__download svg { transform: translateY(2px); } .ac-brochure-context__document:hover { background: var(--ac-sand); } } @media (max-width: 780px) { .ac-brochure-library { padding: 40px 24px 72px; } .ac-brochure-group { padding: 24px; } .ac-brochure-row { grid-template-columns: 100px minmax(0, 1fr); gap: 18px; } .ac-brochure-row__preview { width: 100px; } .ac-brochure-row__download { grid-column: 2; justify-self: start; } .ac-brochure-context .ac-brochure-row { grid-template-columns: 104px minmax(0, 1fr); } .ac-brochure-context .ac-brochure-row__preview { width: 104px; } .ac-brochure-context__documents { margin-left: 122px; } } @media (max-width: 480px) { .ac-brochure-library { padding: 32px 20px 64px; } .ac-brochure-group { padding: 20px; } .ac-brochure-heading h2 { font-size: 32px; } .ac-brochure-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; } .ac-brochure-row__preview { display: none; } .ac-brochure-row__download { grid-column: 1; justify-self: start; } .ac-brochure-context .ac-brochure-row { grid-template-columns: minmax(0, 1fr); } .ac-brochure-context__documents { margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr); } .ac-brochure-context__document { width: 100%; } } /* =================== Shared accessibility and responsive remediation =================== */ /* CaCO3, CaSO4, m2/g — chemical formulae are set with / across the whole site, and the UA default for those is `font-size: smaller`, which is relative and therefore compounds. Inside the small tracked labels the subscript landed at 6.7px, well under anything readable on a phone. This is a floor and nothing else: 0.83em is what `smaller` already computes to, so at every normal text size the subscript is exactly the size it was. */ sub, sup { font-size: max(0.83em, 10px); } .ac-skip { position: fixed; z-index: 10000; top: 12px; left: 12px; transform: translateY(-160%); display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 4px; background: var(--ac-bone); color: var(--ac-ink); font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.24); } .ac-skip:focus { transform: translateY(0); } .ac-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } :where(a,button,input,select,textarea):focus-visible { outline: 3px solid #2d9daf; outline-offset: 3px; } img { max-width: 100%; } [id] { scroll-margin-top: 88px; } .ac-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ac-layout-split, .ac-card-grid, .ac-stat-grid, .ac-process-grid, .ac-data-grid { min-width: 0; } .icard h3[id] { scroll-margin-top: 110px; } .ac-layout-split > *, .ac-card-grid > *, .ac-stat-grid > *, .ac-process-grid > * { min-width: 0; } .filter-chip, [data-comparison-filter] { min-height: 44px; } /* ---------- Touch targets ---------- * * WCAG 2.5.8 wants 24px in both axes; a 14.5px link in a contact card is 18px * tall and misses it. `tel:` and `mailto:` links are never prose running inside * a sentence — they are always the standalone thing you are meant to hit — so * they can take the full 44px target wherever the pointer is coarse or the * layout has stacked. Prose links are left alone: WCAG exempts a link inside a * sentence, and padding one out would break the line box around it. */ @media (max-width: 600px), (pointer: coarse) { a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; } } .icard { position: relative; } .icard__link { position: absolute; inset: 0; z-index: 3; border: 0; border-radius: inherit; } .icard__link:focus-visible { outline-offset: -5px; } @media (max-width: 960px) { .ac-layout-split { grid-template-columns: minmax(0, 1fr) !important; } .ac-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ac-stat-grid, .ac-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ac-data-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; } [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns: 1fr 1.05fr"], [style*="grid-template-columns: 1.05fr 1fr"], [style*="grid-template-columns: 1.1fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"], [style*="grid-template-columns: 1.25fr 1fr"], [style*="grid-template-columns: 1.3fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } [style*="font-size: 84px"] { font-size: clamp(52px, 9vw, 72px) !important; } [style*="font-size: 68px"] { font-size: clamp(48px, 8vw, 62px) !important; } [style*="font-size: 56px"] { font-size: clamp(42px, 7vw, 54px) !important; } [style*="padding: 96px 40px"], [style*="padding: 88px 40px"], [style*="padding: 80px 40px"], [style*="padding: 72px 40px"] { padding: 72px 28px !important; } } @media (max-width: 600px) { .ac-card-grid, .ac-stat-grid, .ac-process-grid { grid-template-columns: minmax(0, 1fr) !important; } .ac-data-grid { grid-template-columns: minmax(0, 1fr) !important; } [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; } [style*="padding: 0px 40px"], [style*="padding: 40px"], [style*="padding: 34px"], [style*="padding: 32px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="padding: 96px 40px"], [style*="padding: 88px 40px"], [style*="padding: 80px 40px"], [style*="padding: 72px 40px"], [style*="padding: 64px 40px"] { padding: 56px 20px !important; } [style*="font-size: 84px"], [style*="font-size: 68px"] { font-size: clamp(42px, 13vw, 56px) !important; overflow-wrap: break-word; } [style*="height: 660px"], [style*="height: 620px"], [style*="height: 560px"] { height: auto !important; min-height: 620px; } table { display: block; max-width: 100%; overflow-x: auto; } .btn-ar, .btn { min-height: 44px; } /* ---------- Small-label floor ---------- * * The design audit's ninth finding: the tracked uppercase labels are elegant * and too small — validate them on a poor display. On a phone they are the * category pills on /industries, the section labels, and the stat captions, * so they carry structure rather than decoration and are exactly the type a * reader is scanning. 11px is below where that survives a phone in daylight. * * A floor, not a resize: only the two sizes under 12px on these pages are * listed, and 12px and up are untouched. `!important` because the size being * corrected is inline, as with the leading floor near the top of this file. */ [style*="font-size: 11px"] { font-size: 12px !important; } [style*="font-size: 11.5px"] { font-size: 12px !important; } /* Except in the three letter-formatted documents, whose type is set to a printed page rather than to a viewport — an 11px table value there is measured against the sheet, and the floor above would reflow it. The element+attribute selector outranks the bare attribute one, so these win. */ doc-page [style*="font-size: 11px"] { font-size: 11px !important; } doc-page [style*="font-size: 11.5px"] { font-size: 11.5px !important; } } /* ---------- Homepage stat and process strips on small screens ---------- * * Both are five-column desktop layouts whose column ornamentation is written * inline on each cell: a right-hand divider on the stats, and 28px of * inter-column padding on the process steps. Collapsing the grid does not * touch either, so both used to survive into the stacked layout — the dividers * as a stray vertical rule down the right edge of four stacked rows, and the * steps with a ragged left edge, because step 01 carries no `padding-left` * while 02 onward carry 28px. Neither is visible on desktop, where the rule * genuinely divides two columns and the padding genuinely separates them. * * They are cleared from 960px down rather than from 600px, because the * two-column layout is wrong in the same way: the divider on every second cell * lands on the grid's own right edge, and `padding-left` falls on whichever * cell happens to start a row. Separation is handed to the grid's `gap`, which * is the one mechanism that stays correct at any column count. */ @media (max-width: 960px) { .ac-stat-grid > * { border-right: 0 !important; } /* Five cells in two columns leave the last one alone in the left column, with a hole beside it. Spanning it reads as intended rather than as a gap. This belongs here rather than at 600px, where it used to sit: the two-column layout starts at 960px, so between 601px and 960px the hole was still open — visible on a tablet and on a large phone in landscape. */ .ac-stat-grid > *:last-child { grid-column: 1 / -1; } .ac-process-grid > * { padding-left: 0 !important; padding-right: 0 !important; } /* Column gap only once stacked: each step already carries its own `border-top` and 22px of padding, which is what separated them before, and a row gap on top of that made the strip taller than the layout it replaced. */ .ac-process-grid { gap: 28px !important; } } @media (max-width: 600px) { /* Two up, not one. Five stacked rows ran 405px on a 390px screen — half a viewport for five short facts, which reads as a list of disconnected trivia rather than a specification. Paired, the strip is about half that and scans as a block. `[style]` raises this over the inline-style attribute selectors above, which match this element too and would otherwise win on source order. */ .ac-stat-grid[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 8px !important; padding-top: 28px !important; padding-bottom: 28px !important; } /* Stacked, the steps sit flush and are divided by their own top rules. */ .ac-process-grid { row-gap: 0 !important; } /* 28px of side padding inside a 175px column leaves 119px for a 24px serif figure; the strip is inset by its own container already. */ .ac-stat-grid > * { padding: 8px 10px !important; } } /* ---------- Homepage video hero ---------- */ .ac-home-hero { position: relative; width: 100%; height: calc(100vh - 74px); height: calc(100svh - 74px); min-height: 0; max-height: 58rem; overflow: hidden; isolation: isolate; /* Painted before the poster decodes, so no white flash can reach the eye. Sampled from the footage itself (#42a7b9 is its mean colour), which also means the swap to the poster is a change of detail, not of tone. */ background: #42a7b9; /* Hero palette, scoped to the hero — deliberately NOT --ac-ink, which is the site-wide token used 29 times in nav, footers and body copy. The type is bone on a navy scrim rather than navy on a light wash. Both directions measure fine; only one looks right on this footage. To lift dark type off mid-luminance water you have to bleach the water, and at the 55% white the previous wash used, saturated turquoise turns milky — a visible pale patch with a soft edge that reads as fog rather than as design. Darkening instead keeps the water's colour and deepens it. */ --ac-hero-fg: #F7F4ED; --ac-hero-fg-rgb: 247, 244, 237; /* Scrim navy. Deeper and bluer than --ac-ink so it darkens the turquoise rather than tinting it toward the same cyan the water already is. */ --ac-hero-scrim-rgb: 7, 26, 43; /* The filled CTA inverts on a dark ground: bone pill, navy label. */ --ac-hero-pill-ink: #0C2237; } .ac-home-hero__media { position: absolute; inset: 0; z-index: -2; /* Poster-first paint: the video remains visually hidden until playback is confirmed, so a browser-refused autoplay can never expose native media controls over the hero. Same file as