/* ========================================================================== K9 Interdiction and Detection Services — styles.css Clean & institutional design system. No external fonts, no framework. Accent hue is teal/steel by explicit requirement - no gold, orange, yellow, pink, brown, or variants anywhere in this file. ========================================================================== */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } /* Links are never underlined anywhere on this site, and never change colour on click or once visited - only on hover. NOTE: do NOT add `a:visited`/`a:active` rules here. Those selectors are (0,1,1) and would outrank every single-class component rule like .btn--primary (0,1,0), so a visited Contact button rendered dark-on-dark. `a { color: inherit }` alone is sufficient: author styles beat the UA stylesheet's visited colour regardless of specificity. */ a { color: inherit; text-decoration: none; } /* ---- Design tokens ---- */ :root { --color-bg: #F6F7F8; --color-surface: #FFFFFF; --color-ink: #1A1D21; --color-ink-muted: #5B6672; --color-navy: #14283D; --color-navy-dark: #0A1826; --color-navy-light: #1C3552; --color-accent: #2A98A5; --color-accent-dark: #1B717C; --color-accent-deep: #12626D; --color-accent-light: #7FCBD3; --color-accent-lighter: #A9DDE3; --color-accent-rgb: 42,152,165; --color-border: #E3E6E9; /* Separate, darker token for INTERACTIVE boundaries. The hairline --color-border is only ~1.25:1 on white, which fails WCAG 1.4.11 for form controls; this clears the 3:1 non-text contrast requirement. */ --color-border-input: #8A929B; --color-success: #2F6B4F; --color-success-bg: #EAF3EE; --color-error: #B4342E; --gradient-navy: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-navy-dark) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent-lighter) 0%, var(--color-accent) 100%); --gradient-accent-hover: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%); /* HEADINGS ONLY. Do NOT set anything containing a digit in this stack. Georgia is an old-style-figure font: its 3 4 5 7 9 hang below the baseline and its 0 1 2 sit at x-height. Measured by rendering the shipped /System/.../Georgia.ttf at 160px: the "9" in "K9IDS" drops 28px below the baseline (17.5% of the em) while "KIDS" alone drops 2px - so the company's own wordmark read as "KgIDS", twice on every page, at the largest size any visitor sees it. font-variant-numeric: lining-nums CANNOT fix this: the same file has no `lnum` feature at all (checked for the raw OpenType tag in the binary - it is absent from Georgia, Georgia Bold and Times New Roman alike). Lining figures would need a different face, and self-hosting one is the correct eventual fix; until a licensed woff2 pair is actually in assets/fonts/, every numeral-bearing element uses --font-body, whose system faces (SF/Segoe UI/Roboto/Helvetica/Arial) all have lining figures. See .brand__text and .pillar__num. */ --font-heading: Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 6px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(10,24,38,0.08); --shadow-md: 0 10px 28px rgba(10,24,38,0.12); --shadow-lg: 0 18px 44px rgba(10,24,38,0.20); --shadow-header: 0 1px 0 rgba(10,24,38,0.06), 0 8px 24px rgba(10,24,38,0.05); --shadow-header-scrolled: 0 4px 24px rgba(10,24,38,0.14); --container-width: 1280px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 0.18s var(--ease-out); --transition-med: 0.32s var(--ease-out); /* Type scale. Replaces ~23 ad-hoc rem values, four of which differed by a single pixel (0.95/0.96/0.97/0.98rem) and so were not distinct sizes at all - just noise that made the page look unconsidered. */ --fs-xs: 0.78rem; /* eyebrows, meta, legal fine print */ --fs-sm: 0.88rem; /* captions, secondary UI, footer links */ --fs-md: 0.97rem; /* body copy inside cards */ --fs-base: 1.05rem; /* long-form body copy */ --fs-lg: 1.15rem; /* lede */ --fs-xl: 1.35rem; /* h3 */ --fs-2xl: 1.6rem; /* sub-section headings */ /* Spacing scale, replacing ~30 one-off rem values. */ --sp-1: 0.35rem; --sp-2: 0.6rem; --sp-3: 0.9rem; --sp-4: 1.25rem; --sp-5: 1.75rem; --sp-6: 2.5rem; --sp-7: 3.5rem; } /* scroll-padding-top is required alongside the sticky header: without it an in-page anchor (e.g. /services#firearms) scrolls the target flush to the viewport top and the sticky header covers the heading. */ html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* Sticky footer: without this the footer floats mid-viewport on short pages (privacy/terms/sitemap/404) leaving a bare strip beneath it. */ body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-navy); line-height: 1.2; font-weight: 600; /* Only affects how lines are distributed when a heading is genuinely too long for its container - it never introduces a wrap that wouldn't otherwise happen, so a long title breaks evenly instead of dropping a single orphan word onto the last line. */ text-wrap: balance; } h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); font-weight: 700; letter-spacing: -0.015em; } h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); letter-spacing: -0.01em; } /* h3/h4 were fixed while h1/h2 were fluid, so the gap between h2 and h3 collapsed on small screens and gaped on large ones. Both now scale. */ h3 { font-size: clamp(1.15rem, 0.5vw + 1rem, var(--fs-xl)); } h4 { font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1rem); } p { color: var(--color-ink); } p + p { margin-top: 1em; } /* The reset zeroes all heading and paragraph margins, and nothing restored the gap BETWEEN a heading and the copy under it - so every h2/h3 sat flush against its own body text. This is the single most visible spacing defect on the content pages. */ h2 + p, h3 + p, h4 + p, h2 + ul, h3 + ul, h4 + ul { margin-top: 0.7rem; } p + h3, p + h4, ul + h3, ul + h4 { margin-top: 1.9rem; } /* `ch` resolves against this element's OWN computed font-size (the advance width of "0" in its font), so a per-element `max-width: NNch` IS the correct measure cap. Do not put one on a container - a cap on .wrap would resolve against .wrap's font rather than the text inside it. */ .lede { font-size: var(--fs-lg); color: var(--color-ink-muted); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: 0.7em; } .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gradient-accent); display: inline-block; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-navy); color: #fff; padding: 0.75em 1.25em; z-index: 1000; } .skip-link:focus { left: 1rem; top: 1rem; } /* Visible keyboard focus everywhere, without showing rings on mouse click. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; } /* ---- Layout ---- */ .wrap { max-width: var(--container-width); margin-inline: auto; padding-inline: 1.5rem; } section { padding-block: clamp(3.5rem, 6vw, 6rem); position: relative; } .section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); } .section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); } .section--navy { background: var(--gradient-navy); color: #fff; position: relative; overflow: hidden; } .section--navy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 90% 0%, rgba(var(--color-accent-rgb),0.18), transparent 60%); pointer-events: none; } /* Explicit color on every text element nested in a navy section - relying on inheritance from .section--navy's own `color` does NOT work here, because the blanket `p`/`h1-h4` rules above target the element directly and win over inheritance regardless of the parent's specificity. h1 is included deliberately: omitting it rendered the 404 headline navy-on- navy at 1.2:1 contrast, i.e. invisible. */ .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .section--navy p { color: rgba(255,255,255,0.78); } .section--navy .lede { color: rgba(255,255,255,0.85); } .section--navy .eyebrow { color: var(--color-accent-light); } /* CRITICAL: the rules above target DESCENDANTS, so any light-surfaced component nested inside a navy section inherited white text on its white background. Every "How a Sweep Works" step title on /services was white on white and therefore invisible. Light surfaces must restate their own text colours. */ .section--navy .card, .section--navy .step, .section--navy .faq-item { color: var(--color-ink); } .section--navy .card h1, .section--navy .card h2, .section--navy .card h3, .section--navy .card h4, .section--navy .step h1, .section--navy .step h2, .section--navy .step h3, .section--navy .step h4, .section--navy .faq-item summary { color: var(--color-navy); } .section--navy .card p, .section--navy .step p, .section--navy .faq-item p { color: var(--color-ink-muted); } .section--navy .card .eyebrow, .section--navy .step .eyebrow { color: var(--color-accent-dark); } .hero .eyebrow { color: var(--color-accent-light); } .hero__actions--center { justify-content: center; } .section-head { margin-bottom: 3rem; } /* Centred heads had no measure cap at all, so ledes ran the full 1232px container at roughly 110 characters per line. `.mx-auto` only sets margin-inline and supplies no width, so it was a no-op here. */ .section-head--center { margin-inline: auto; text-align: center; max-width: 54rem; } .section-head--center .lede, .lede.mx-auto { max-width: 42rem; margin-inline: auto; } /* .page-banner supplies its own bottom spacing; this margin added ~48px of dead navy beneath every banner lede. */ .page-banner .section-head { margin-bottom: 0; } .section-head--center .eyebrow { justify-content: center; } .section-head .lede { margin-top: 0.9rem; } .grid { display: grid; gap: 1.75rem; } /* Explicit tracks. auto-fit emitted a phantom fourth 0px track and orphaned the third card 2+1 between roughly 636px and 944px. When it does drop to two columns, the odd last child spans the full row so it is never visually demoted to half width. */ .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 700px) { .grid--3 { grid-template-columns: 1fr; } } /* auto-fit is correct for the 2-child text+card pairs (empty tracks collapse), but with FOUR children it fits three 392px columns and orphans the fourth. Use .grid--2up wherever the count is not two. */ .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; } /* The 320px floor held two columns down to about a 716px viewport, so an iPad Air or 11in iPad Pro in portrait (768-860px) got two 339px columns: roughly 42 characters of prose and every checklist item wrapping to two lines. 860px, matching the `.is-reversed` order reset below, so the collapse to one column and the un-swap happen at the same width. Deliberately `.grid--2`, not `.grid--2 > *` - a child selector here is the trap documented at the is-reversed reset, and it would not override the base rule at all. */ @media (max-width: 860px) { .grid--2 { grid-template-columns: 1fr; } } .grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* `.pillar:first-child` exempts only item 1 from the separating hairline, which is right for a vertical list but wrong in a 2x2 grid: item 2 is also on the first row, so it drew a rule above itself and the row rendered lopsided. (0,3,0) beats `.pillar:first-child` (0,2,0). The base .pillar rules are left alone - /services and the home page use them as a genuine vertical list. */ .grid--2up > .pillar:nth-child(-n+2) { border-top: none; } @media (max-width: 760px) { .grid--2up { grid-template-columns: 1fr; } /* Single column again, so item 2 is now genuinely below item 1 and needs its separator back. Same (0,3,0), later in source, so it wins. */ .grid--2up > .pillar:nth-child(2) { border-top: 1px solid rgba(255,255,255,0.13); } } .grid--2-center { align-items: center; } /* auto-fit with a 190px floor drops to 4-up between roughly 900px and 1110px, orphaning the fifth tile on its own row. Explicit breakpoints keep the row either 5-up, a balanced 3+2, or 2-up. */ .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1180px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .grid--5 { grid-template-columns: 1fr; } } /* Mirrored two-column sections. The DOM stays in reading order (text first, supporting card second) and only the visual columns swap, so screen readers and mobile always get the text first. The previous approach put `order` on both children in reversed source order, which cancelled out - every section rendered text-left and the page never actually alternated. */ .grid--2.is-reversed > *:first-child { order: 2; } .grid--2.is-reversed > *:last-child { order: 1; } @media (max-width: 860px) { /* Must repeat :first-child/:last-child. The two rules above are (0,3,0); `.grid--2.is-reversed > *` is only (0,2,0), and a media query adds no specificity - so the reset silently lost and the order swap stayed on down to the narrowest phone. In one column that put each supporting card ABOVE the

it supports: on /services the "Commonly Used For" list appeared before "Explosives Detection", reading as an answer with no question. Measured at 390px: card top 1657, heading top 2083. */ .grid--2.is-reversed > *:first-child, .grid--2.is-reversed > *:last-child { order: 0; } } /* ---- Utilities ---- */ .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-sm { margin-top: 0.75rem; } .mt-md { margin-top: 1.25rem; } .mt-lg { margin-top: 1.75rem; } .mt-xl { margin-top: 2.25rem; } .note-inline { font-style: italic; } .max-w-narrow { max-width: 820px; } .checklist { display: grid; gap: 0.85rem; margin-top: 1.25rem; } .checklist li { position: relative; padding-left: 1.75rem; color: var(--color-ink-muted); font-size: var(--fs-md); } /* Real markers come from CSS, not literal • characters typed into the markup - a screen reader announces those as the word "bullet". */ .checklist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-accent); } /* .max-w-narrow caps the CONTAINER at 820px but nothing capped the text inside it, so /about's "Straight Talk" section still ran 104 characters per line. Capped per element, for the same `ch` reason noted above. The commitments list is also promoted out of caption grey: these are the page's actual promises, and --color-ink-muted at --fs-md rendered them as incidental captions beside the copy that introduces them. All of these beat the .checklist rules above on specificity, not on source order. */ .max-w-narrow p, .max-w-narrow .checklist li { max-width: 64ch; } .max-w-narrow .checklist li { font-size: var(--fs-base); color: var(--color-ink); } /* The marker is positioned from the top of the item, so a larger font-size moves the first line's centre down and the dot has to follow it. */ .max-w-narrow .checklist li::before { top: 0.6em; } /* ---- Scroll reveal ---- Elements start hidden ONLY when JS is running (the .js-reveal class is added by main.js). Without JS nothing is hidden, so content is never trapped behind a script that failed to load. */ .js-reveal { opacity: 0; transform: translateY(12px); } /* box-shadow and border-color are in this list because they have to be. This rule is (0,2,0) and `.is-visible` is never removed, so its `transition` SHORTHAND permanently replaces the one on every revealed .card (0,1,0), .step, .pillar and .serve-grid tile - and those components animate their hover shadow and border through that shorthand. Without them here the hover response snapped instantly on every card the observer had revealed, i.e. all of them. A shorthand cannot be partially overridden; it has to name everything the elements underneath it need. */ .js-reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow var(--transition-med), border-color var(--transition-med); } /* ---- Buttons ---- */ /* ---- Button system ---- Every variant shares one height, one radius, a gradient fill, a subtle border and a subtle shadow, and every one changes its background on hover. Text/background pairs are all chosen to clear WCAG AA in BOTH the resting and hover states - the hover state is where contrast is most often lost, because that is the moment nobody checks. */ .btn { --btn-h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--btn-h); padding: 0 1.7rem; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-md); line-height: 1.2; text-align: center; border: 1px solid transparent; box-shadow: var(--shadow-sm); cursor: pointer; transition: color var(--transition-fast), background-image var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; } /* Navy fill, white text. 13.6:1 resting, 11.4:1 hover. */ .btn--primary { background-image: linear-gradient(135deg, #22405F 0%, #0A1826 100%); color: #fff; border-color: #0A1826; } .btn--primary:hover { background-image: linear-gradient(135deg, #2C4E71 0%, #12263A 100%); color: #fff; } /* ONE COLOUR, ONE RANK. This is a rule about meaning, not about styling, and it is the only thing keeping the button system readable: .btn--accent the single primary action of its section. One per section. Never two. .btn--primary a secondary action on a light background. .btn--outline a secondary action on a light background, quieter. .btn--outline-light a secondary action on a dark background. It drifted once already: "Request a Consultation" was .btn--accent in the home hero and .btn--primary in the closing CTA of the same page, where the teal had been given to the phone number instead - so the loudest button on the page changed meaning between the top and the bottom of one scroll. That does not read as a choice; it reads as nobody being in charge of the design. If a section seems to need two accent buttons, one of them is not primary. Light teal fill, navy text. Navy on the lightest stop is ~11:1 and on the darkest ~4.9:1; hover lightens, so contrast only improves. */ .btn--accent { background-image: linear-gradient(135deg, #A9DDE3 0%, #38A6B3 100%); color: var(--color-navy-dark); border-color: #2A98A5; } .btn--accent:hover { background-image: linear-gradient(135deg, #C6EAEF 0%, #62BEC9 100%); color: var(--color-navy-dark); border-color: #38A6B3; } /* For light backgrounds: near-white gradient, navy text (~13:1). */ .btn--outline { background-image: linear-gradient(135deg, #FFFFFF 0%, #EDF1F4 100%); color: var(--color-navy); border-color: #C3CCD4; } .btn--outline:hover { background-image: linear-gradient(135deg, #F4F7F9 0%, #DDE4EA 100%); color: var(--color-navy-dark); border-color: var(--color-navy); } /* For dark backgrounds: translucent white gradient over navy, white text. Both stops stay dark enough that white text holds well above 7:1. */ .btn--outline-light { background-image: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.07) 100%); color: #fff; border-color: rgba(255,255,255,0.55); } .btn--outline-light:hover { background-image: linear-gradient(135deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.16) 100%); color: #fff; border-color: #fff; } /* Narrower, not shorter - height stays uniform across every button. */ .btn--small { padding: 0 1.25rem; font-size: var(--fs-sm); } /* ---- Utility bar ---- The thin dark strip above the masthead. Two-tier headers are the structural convention that reads "organization" rather than "one person with a phone", and every fact on this one is already confirmed, so it buys that reading at no credibility cost. It also demotes the phone number out of the nav row, where it was ranked equal to "About". NOT sticky, and deliberately outside
: .site-header keeps position:sticky to itself, so this strip scrolls away and the sticky element's offset stays 0. Do not move it inside the header without re-checking html{scroll-padding-top} - every in-page anchor depends on it. White at 0.72 alpha over --color-navy-dark measures 9.5:1, so the 12.5px type clears WCAG AA with a wide margin; the phone is full white (17.7:1) because it is the one thing here anyone acts on. */ .utility-bar { background: var(--color-navy-dark); color: rgba(255,255,255,0.72); font-size: var(--fs-xs); line-height: 1.4; } .utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.5rem; } /* nowrap on every item. This strip is one row or it is nothing: the moment a sentence wraps it doubles the bar's height and the masthead below it starts the page 34px lower than it was designed to. The two prose items step out at the widths below rather than being allowed to wrap. */ .utility-bar__identity, .utility-bar__availability, .utility-bar__phone { white-space: nowrap; } .utility-bar__identity { color: rgba(255,255,255,0.72); transition: color var(--transition-fast); } .utility-bar__identity:hover { color: var(--color-accent-light); } .utility-bar__actions { display: flex; align-items: center; gap: 1.25rem; } .utility-bar__phone { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 700; color: #fff; transition: color var(--transition-fast); } .utility-bar__phone svg { flex-shrink: 0; color: var(--color-accent-light); } .utility-bar__phone:hover { color: var(--color-accent-light); } /* Declared AFTER the base rules, not merged into the media blocks at the foot of this file: both are (0,1,0) and a media query adds no specificity, so a hide rule written earlier would silently lose to the base rule. That exact mistake is documented three times elsewhere in this file. Measured in the browser, not estimated: identity 405px, availability 239px, phone 121px, plus 44px of gaps and the container's 48px of padding = 857px for all three, and 598px for identity + phone. The thresholds sit well above both because these numbers are macOS/SF metrics and Segoe UI on Windows sets the same strings several per cent wider - and the failure mode here is not subtle, it is the bar wrapping to two lines and pushing the masthead down on every page. The phone NEVER drops - below 960px .site-nav is display:none, so if this strip hid itself on mobile the only tel: link on the page would be locked inside the hamburger, which is where it started. */ @media (max-width: 1080px) { .utility-bar__availability { display: none; } } @media (max-width: 860px) { .utility-bar__identity { display: none; } } /* ---- Header / Nav ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); box-shadow: var(--shadow-header); transition: box-shadow var(--transition-med); } .site-header.is-scrolled { box-shadow: var(--shadow-header-scrolled); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; } .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; } .brand__lockup { display: flex; flex-direction: column; line-height: 1.1; } .brand__full { font-size: 0.7rem; letter-spacing: 0.03em; color: var(--color-ink-muted); font-weight: 500; margin-top: 0.15rem; white-space: nowrap; } .site-footer .brand__full { color: rgba(255,255,255,0.62); } /* Below the desktop nav breakpoint the header is tight; the expansion also appears in the footer and the hero, so dropping it here loses nothing. */ @media (max-width: 620px) { .brand__full { display: none; } } /* The mark artwork has an opaque white background. On the white header that is invisible; on the navy footer it is set in a rounded white chip so it reads as a deliberate badge rather than a floating white square. */ .brand__mark { flex-shrink: 0; display: block; transition: transform var(--transition-med); } .brand__mark--dark { background: #fff; border-radius: 9px; padding: 3px; box-sizing: content-box; } .brand:hover .brand__mark { transform: scale(1.05); } /* --font-body, NOT --font-heading. This is the one string on the site that must never be read wrong, and in Georgia it was: the 9 sat at x-height with a descender, so the mark rendered as "KgIDS" (see the measurement on --font-heading above). The system sans stack has lining figures everywhere, so the 9 now shares a baseline and a cap height with the K. Cap heights are within 4% (Georgia Bold 0.695 em, Helvetica Bold 0.720 em), so the lockup does not change height; the sans advance is 13% narrower over five characters, and the tracking below spends about a third of that back. A logotype in a different face from the body headings is normal - that is what makes it read as a mark rather than as a heading that happens to be first. */ .brand__text { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xl); color: var(--color-navy); letter-spacing: 0.03em; } /* "IDS" is the meaningful part of the wordmark and has to read as such. It was previously a background-clip:text gradient starting at #A9DDE3, which is only about 1.7:1 against the white header - the top-left of every glyph washed out and the acronym looked faint. Solid deep teal instead: 5.7:1 on white, still clearly distinct from the navy "K9". */ .brand__accent { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: var(--color-accent-deep); -webkit-text-fill-color: currentColor; /* Tracking is inherited from .brand__text on purpose. This span used to set its own 0.005em against the parent's 0.01em, which was invisible in Georgia; with the parent now at 0.03em (see .brand__text) the same override tracked "K9" at 0.648px and "IDS" at 0.108px - measured - so the wordmark had two different letter spacings inside five characters. Colour is the only thing this rule should be doing. */ } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; padding: 0; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--color-navy); transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { display: flex; align-items: center; gap: 1.9rem; } /* :not(.btn) is load-bearing. `.site-nav a` (0,1,1) outranks `.btn--primary` (0,1,0), so without it the nav's ink colour wins and any button in the nav renders dark-on-dark. Scope nav link styling to actual links only. */ .site-nav > a:not(.btn):not(.site-nav__phone) { position: relative; text-decoration: none; font-size: var(--fs-md); font-weight: 500; color: var(--color-ink); padding-block: 0.3rem; transition: color var(--transition-fast); } .site-nav > a:not(.btn):not(.site-nav__phone)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--gradient-accent); transition: width var(--transition-med); } .site-nav > a:not(.btn):not(.site-nav__phone):hover { color: var(--color-navy); } .site-nav > a:not(.btn):not(.site-nav__phone):hover::after, .site-nav a.is-active:not(.btn)::after { width: 100%; } .site-nav a.is-active:not(.btn) { color: var(--color-navy); } .site-nav a.btn { text-decoration: none; } /* /contact was the only page with no visible current-page indicator: the two rules above are the site's only ones and both exclude .btn, and header.php marks the Contact button with aria-current but not .is-active. Keyed on the attribute that is already in the markup rather than adding a class that would then have to fight `.btn--primary` for the underline treatment. (0,3,1) clears every .btn rule. The resting shadow is repeated in the shorthand because a shorthand replaces, and dropping it would take the button's subtle shadow with it; the :hover twin keeps the lift. */ .site-nav a.btn[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--color-accent-light), var(--shadow-sm); } .site-nav a.btn[aria-current="page"]:hover { box-shadow: inset 0 0 0 2px var(--color-accent-light), var(--shadow-md); } /* The `.site-nav__phone` rules that used to sit here are gone with the element - the number lives in .utility-bar now. The `:not(.site-nav__phone)` in the four selectors above is deliberately LEFT IN PLACE. Each `:not()` carries the specificity of its argument, so removing it would drop those selectors from (0,3,1) to (0,2,1) and re-open the tie with `.site-nav a.is-active:not(.btn)::after` that the comments above spent three paragraphs settling. It costs nothing and matches nothing. */ /* No border-bottom here - it read as an underline, which this site does not use. Weight and colour carry the affordance instead. */ .lede__phone, .contact-aside__phone { color: var(--color-accent-deep); font-weight: 700; transition: color var(--transition-fast); white-space: nowrap; } .lede__phone:hover, .contact-aside__phone:hover { color: var(--color-navy); } /* On a dark banner both of those are near-invisible: the deep teal barely separates from navy at rest, and the navy hover disappears entirely. Light teal at rest, white on hover. */ .page-banner .lede__phone, .section--navy .lede__phone, .hero .lede__phone { color: var(--color-accent-light); } .page-banner .lede__phone:hover, .section--navy .lede__phone:hover, .hero .lede__phone:hover { color: #fff; } .site-footer__phone { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1rem; font-size: var(--fs-lg); font-weight: 700; color: #fff; text-decoration: none; transition: color var(--transition-fast); } .site-footer__phone svg { color: var(--color-accent-light); flex-shrink: 0; } .site-footer__phone:hover { color: var(--color-accent-light); } /* ---- Hero ---- */ /* Top padding only: the hero closes with .hero__bar, which must sit flush on the section's bottom edge rather than floating above a padding gap. The navy gradient is the BASE layer, so if the photograph is missing or still downloading the hero is never broken - just un-photographed. */ .hero { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 0; background: radial-gradient(1100px 480px at 85% -10%, rgba(var(--color-accent-rgb),0.20), transparent 60%), var(--gradient-navy); color: #fff; position: relative; overflow: hidden; } /* Photograph layer. Sits above the gradient, below the scrim and content. Swap the file at /assets/img/hero-detection-team.jpg to change it - and regenerate its .webp sibling in the same pass (cwebp -q 78), or the WebP below will keep serving the OLD picture to almost every visitor while the JPEG you just replaced is only ever seen by the fallback. TWO background-image declarations, in this order, on purpose. The plain url() is the floor: any engine that does not parse image-set() or its type() argument discards the second declaration and keeps the first, so the masthead can never end up with no photograph. The second is what modern browsers actually use - measured, this hero is 215,510 bytes as JPEG and 58,430 as WebP (-73%), and it is the LCP element on the home page. The preload in includes/header.php names the .webp and gates it on type="image/webp"; the two must stay in step or the browser fetches both. One known, accepted gap: Safari 16 and earlier support WebP and support preload's type gate, but got image-set()'s type() only in Safari 17. Those versions therefore preload the WebP and then take the JPEG from this rule - one wasted fetch. It cannot be fixed with -webkit-image-set(), which carries resolution but has no type(), and it is not worth pushing the whole site back to JPEG-only for. */ .hero::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/img/hero-detection-team.jpg'); background-image: image-set(url('/assets/img/hero-detection-team.webp') type('image/webp'), url('/assets/img/hero-detection-team.jpg') type('image/jpeg')); background-size: cover; background-position: 72% center; opacity: 0.55; z-index: 0; pointer-events: none; } /* Scrim: keeps the headline legible over whatever the photo turns out to be. Dense navy on the left where the text sits, clearing toward the right so the image is actually visible. */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-navy-dark) 0%, rgba(10,24,38,0.94) 34%, rgba(10,24,38,0.62) 62%, rgba(10,24,38,0.34) 100%), linear-gradient(180deg, rgba(10,24,38,0.55) 0%, transparent 28%, rgba(10,24,38,0.45) 100%); z-index: 1; pointer-events: none; } @media (max-width: 860px) { /* On narrow screens the text spans the full width, so the scrim has to be even across it rather than clearing to the right. It was TOO even: 0.55 image opacity under an 0.80-0.86 scrim left about 11% of the photograph showing, so a phone visitor got a plain navy panel with a faint smudge - no dog, no handler, no context - on the page whose job is to sell detection dog teams, while still paying 60 KB to preload it at fetchpriority=high. Same diagnosis already fixed for .page-banner::before, which the hero was never brought along with. Stronger image, and the scrim now varies: dense where the headline and lede sit, lighter through the middle, dark again under the bar. The mid floor is 0.70, NOT lower. On a phone .hero__actions .btn is width:100% and the buttons land in exactly this band; .btn--outline-light is a translucent white gradient, so it LIGHTENS whatever is behind it. Measured against a pure-white worst-case photo, its white label holds 4.75:1 at 0.70 but falls to 3.68:1 at 0.58 - under the AA floor for text this size. 0.70 still more than doubles how much photograph is visible. */ .hero::after { background: linear-gradient(180deg, rgba(10,24,38,0.93) 0%, rgba(10,24,38,0.90) 44%, rgba(10,24,38,0.70) 76%, rgba(10,24,38,0.84) 100%); } .hero::before { opacity: 0.80; background-position: 70% center; } /* The matching .hero__bar override is NOT here - see below .hero__bar. */ } /* z-index 2, not 1: the scrim ::after also sits at z-index 1 and paints later in DOM order, so content at z-index 1 renders BEHIND the scrim and the headline goes dim. This selector (0,2,0) also outranks .hero__inner (0,1,0), so it is the one that actually decides the stacking. */ .hero > .wrap { position: relative; z-index: 2; } /* 3.05rem, not 3.5rem: at 1440px the headline wrapped to four lines with only two words on the first, because the type was too large for the column it sits in - and it pushed the primary CTA's bottom edge to y=702 on a 900px viewport. 48.8px in a 736px column is three lines, still entirely inside the >=0.94-opacity part of the desktop scrim. */ .hero h1 { color: #fff; font-size: clamp(2.1rem, 3.1vw + 1rem, 3.05rem); } .hero .lede { color: rgba(255,255,255,0.82); font-size: var(--fs-lg); margin-top: 1.3rem; max-width: 60ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; } /* A row of compact jump chips inside a banner. Its own class rather than borrowing .hero__actions, which drags in `width: 100%` on its buttons below 560px (see the responsive block at the foot of this file) - four chips then became a full-width stack about 690px tall and pushed the first section below the fold on a phone. These wrap inline instead, at every width. Used by the /services banner; see the note beside that nav. */ .banner-jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; } /* Text column is capped so lines stay readable while the photograph fills the rest of the frame. */ .hero__inner { position: relative; z-index: 2; } .hero__content { max-width: 46rem; } /* Full-width credential strip closing the hero. Replaces the loose floating dot list, which read as an afterthought rather than part of the design. */ .hero__bar { position: relative; z-index: 2; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,0.13); background: rgba(0,0,0,0.14); } .hero__bar-inner { display: flex; flex-wrap: wrap; gap: 0.85rem 2.75rem; padding-block: 1.15rem; color: rgba(255,255,255,0.72); font-size: var(--fs-sm); } .hero__bar-inner span { display: inline-flex; align-items: center; gap: 0.6em; } .hero__bar-inner span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-light); display: inline-block; flex-shrink: 0; } /* Belongs with the mobile hero scrim block above, and it CANNOT live there: `.hero__bar` is declared at (0,1,0) further down than that block, a media query adds no specificity, and so the base `rgba(0,0,0,0.14)` would win and this override would silently never apply. Declared after the base rule instead. With the photograph now at 0.80 opacity on mobile, a 0.14 black wash no longer separates the credential strip from the image behind it. */ @media (max-width: 860px) { .hero__bar { background: rgba(10,24,38,0.62); } } /* ---- Page banner (inner-page header with photograph) ---- Same defensive layering as the hero: navy gradient is the base, so a missing image degrades to a solid branded band rather than a blank box. */ .page-banner { position: relative; overflow: hidden; background: radial-gradient(900px 400px at 80% 0%, rgba(var(--color-accent-rgb),0.18), transparent 60%), var(--gradient-navy); color: #fff; padding-block: clamp(3rem, 6vw, 5rem); } /* 0.42 opacity under a 55% scrim left the photographs almost invisible on the right-hand side - the banner read as a plain navy band with a smudge. The image is now much stronger, and the scrim does the legibility work only where the text actually sits (the left). */ .page-banner::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.75; z-index: 0; } .page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,24,38,0.96) 0%, rgba(10,24,38,0.88) 38%, rgba(10,24,38,0.45) 72%, rgba(10,24,38,0.22) 100%); z-index: 1; } @media (max-width: 860px) { /* Text spans the full width on mobile, so the scrim must be even. */ .page-banner::after { background: linear-gradient(180deg, rgba(10,24,38,0.88) 0%, rgba(10,24,38,0.82) 100%); } } .page-banner > .wrap { position: relative; z-index: 2; } .page-banner h1 { color: #fff; } .page-banner .lede { color: rgba(255,255,255,0.85); margin-top: 1.1rem; max-width: 62ch; } .page-banner .eyebrow { color: var(--color-accent-light); } /* Each banner declares the JPEG first and then the image-set - see the note on .hero::before for why the order is load-bearing. These five are the LCP element on every page that is not the home page, and they were 173-256 KB each; the WebP siblings are 56-95 KB. */ .page-banner--services::before { background-image: url('/assets/img/banner-services.jpg'); background-image: image-set(url('/assets/img/banner-services.webp') type('image/webp'), url('/assets/img/banner-services.jpg') type('image/jpeg')); } .page-banner--industries::before { background-image: url('/assets/img/banner-industries.jpg'); background-image: image-set(url('/assets/img/banner-industries.webp') type('image/webp'), url('/assets/img/banner-industries.jpg') type('image/jpeg')); } .page-banner--about::before { background-image: url('/assets/img/banner-about.jpg'); background-image: image-set(url('/assets/img/banner-about.webp') type('image/webp'), url('/assets/img/banner-about.jpg') type('image/jpeg')); } .page-banner--faq::before { background-image: url('/assets/img/banner-faq.jpg'); background-image: image-set(url('/assets/img/banner-faq.webp') type('image/webp'), url('/assets/img/banner-faq.jpg') type('image/jpeg')); } /* The only banner with no position override, so it fell back to `center` and the dog was cut in half by the band's bottom edge. */ .page-banner--contact::before { background-image: url('/assets/img/banner-contact.jpg'); background-image: image-set(url('/assets/img/banner-contact.webp') type('image/webp'), url('/assets/img/banner-contact.jpg') type('image/jpeg')); background-position: 82% 72%; } /* Privacy, Terms and Sitemap get the same masthead so the site does not change shape when you reach them, but there is no photograph for these pages and inventing one would be filler. The scrim (::after) exists only to keep text legible over a photo, so with no photo it is switched off entirely and the navy gradient stands on its own - otherwise it darkened the band for no reason. Slightly shorter too, since there is no image to give room to. */ .page-banner--plain { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); } .page-banner--plain::before, .page-banner--plain::after { content: none; } /* Phones and small tablets were downloading the full 2400px masthead art - between 170 KB and 250 KB each, on exactly the connections least able to afford it. These are 1200px re-encodes (45-75 KB) and they sit behind a scrim at 0.55-0.75 opacity, where the difference is not perceptible. Kept as a separate block, after the full-size rules, so source order does the overriding and no specificity bump is needed. */ @media (max-width: 860px) { /* Both declarations are repeated per rule here, exactly as in the desktop block. A single `background-image: image-set(...)` would be enough for a modern browser, but the plain url() has to come with it: an engine that drops the image-set falls back to the LAST declaration it understood, which without this line is the 2400px DESKTOP jpg - so the one class of device this whole block exists to protect would download the largest file on the site. */ .hero::before { background-image: url('/assets/img/hero-detection-team-1200.jpg'); background-image: image-set(url('/assets/img/hero-detection-team-1200.webp') type('image/webp'), url('/assets/img/hero-detection-team-1200.jpg') type('image/jpeg')); } .page-banner--services::before { background-image: url('/assets/img/banner-services-1200.jpg'); background-image: image-set(url('/assets/img/banner-services-1200.webp') type('image/webp'), url('/assets/img/banner-services-1200.jpg') type('image/jpeg')); } .page-banner--industries::before { background-image: url('/assets/img/banner-industries-1200.jpg'); background-image: image-set(url('/assets/img/banner-industries-1200.webp') type('image/webp'), url('/assets/img/banner-industries-1200.jpg') type('image/jpeg')); } .page-banner--about::before { background-image: url('/assets/img/banner-about-1200.jpg'); background-image: image-set(url('/assets/img/banner-about-1200.webp') type('image/webp'), url('/assets/img/banner-about-1200.jpg') type('image/jpeg')); } .page-banner--faq::before { background-image: url('/assets/img/banner-faq-1200.jpg'); background-image: image-set(url('/assets/img/banner-faq-1200.webp') type('image/webp'), url('/assets/img/banner-faq-1200.jpg') type('image/jpeg')); } .page-banner--contact::before { background-image: url('/assets/img/banner-contact-1200.jpg'); background-image: image-set(url('/assets/img/banner-contact-1200.webp') type('image/webp'), url('/assets/img/banner-contact-1200.jpg') type('image/jpeg')); } } /* This block MUST sit after the desktop `.page-banner--contact::before` rule, not in the generic mobile block further up. Both are (0,1,1) and a media query adds no specificity, so a mobile override written earlier in the file loses to the desktop rule and silently never applies - the same failure that put a supporting card above its own heading once already. At 500px a pixel scan across this band returned nothing but navy: the generic 0.88/0.82 mobile scrim erased a 50 KB image that is still preloaded at high priority. Scoped lighter scrim, and the crop pulled toward the dog. Worst case (a pure-white photograph) the h1 holds 8.5:1, the lede 6.7:1 and the accent-light phone link 4.6:1. */ @media (max-width: 860px) { .page-banner--contact::before { background-position: 88% bottom; } .page-banner--contact::after { background: linear-gradient(180deg, rgba(10,24,38,0.78), rgba(10,24,38,0.70)); } } /* ---- Media card (image + copy) ---- */ .media-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); background: var(--gradient-navy); aspect-ratio: 4 / 3; } .media-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out); } .media-figure:hover img { transform: scale(1.04); } .media-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.35rem 1.1rem; background: linear-gradient(180deg, transparent, rgba(10,24,38,0.92)); color: #fff; font-size: var(--fs-sm); line-height: 1.5; } /* Set by main.js when an image 404s, so a missing photo reads as a designed navy panel instead of the browser's broken-file icon. */ .is-imageless img { display: none; } .is-imageless { background: radial-gradient(420px 200px at 70% 20%, rgba(var(--color-accent-rgb),0.22), transparent 65%), var(--gradient-navy); } /* Card with a photo header */ /* .card.card--media, not .card--media: both are (0,1,0) and `.card` is declared LATER in this file, so the single-class version lost on source order and every media card carried 32px of white gutter round its photo. */ .card.card--media { padding: 0; overflow: hidden; } .card--media .card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gradient-navy); } .card--media .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out); } .card--media:hover .card__media img { transform: scale(1.05); } .card--media .card__body { padding: 1.6rem 1.75rem 1.9rem; } .card--media .card__body h3 { margin-bottom: 0.5rem; } /* Bottom-align the "How ... works" link so the three cards in an equal-height row end on one line instead of three (57px/32px/32px of slack, measured on the home page). `height: 100%` does NOT work here - .card sets no height, so the percentage has nothing to resolve against; a flex column does. padding-top, not just `margin-top: auto`: on the TALLEST card there is no free space for auto to absorb, so the link would sit flush against the paragraph above it. The padding keeps the original 1.1rem gap in that case and enlarges the link's own hit area in every other. */ .card.card--media { display: flex; flex-direction: column; } .card--media .card__body { flex: 1; display: flex; flex-direction: column; } .card--media .card__link { margin-top: auto; padding-top: 1.1rem; } /* Makes the WHOLE card the click target. The card already lifts and glows on hover, but only the 23px-tall text link was clickable - one pixel under the WCAG 2.2 SC 2.5.8 minimum, and a promise the card visibly failed to keep. .card is position: relative and .card__link is static, so this resolves against the card box. :not(.card--flush) is deliberate - the aside cards on /services and /industries use the media card as a static panel, and must not silently become whole-card links. Text selection inside the card becomes drag-only, which is the accepted cost. */ .card--media:not(.card--flush) .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---- Cards ---- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-med), transform var(--transition-med), border-color var(--transition-med); position: relative; overflow: hidden; } /* Accent rule that wipes in along the card's top edge on hover. */ /* Hover feedback ONLY on cards that actually do something. Most .card elements on this site are static content panels; lifting and glowing them promises a click that never happens. :has() scopes it to cards containing a link; browsers without :has() simply get no hover, which is correct. */ .card:has(a)::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--gradient-accent); transition: width var(--transition-med); } .card:has(a):hover::before { width: 100%; } .card:has(a):hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(var(--color-accent-rgb),0.4); } /* The contact sidebar is four visually identical static panels. One of them happens to contain a phone link, so :has(a) singled it out with a lift and an accent bar - promising a click the CARD does not accept. The phone number inside keeps its own .contact-aside__phone:hover, which is the real affordance. (0,2,1) and (0,3,1) beat the base rules above outright. */ .contact-aside .card:has(a)::before { content: none; } .contact-aside .card:has(a):hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--color-border); } /* No rotate. A tilting icon reads as playful, which is the wrong register for a security vendor being evaluated by a school board. */ .card h3 { margin-bottom: 0.55rem; } .card p { color: var(--color-ink-muted); font-size: var(--fs-md); } .card__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 1.1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-navy); text-decoration: none; transition: gap var(--transition-fast), color var(--transition-fast); } .card__link:hover { color: var(--color-accent-dark); gap: 0.75em; } /* No height:100%. Forcing these to match the (much taller) text column left them 40-70% empty - the card looked like content had failed to load. They now size to their own content, which .grid--2's align-items:start allows. */ .card--flush { align-self: start; } .card h4 { margin-bottom: 0.85rem; } .pillar-list { display: grid; gap: 0.5rem; } .pillar { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-block: 1.6rem; border-top: 1px solid rgba(255,255,255,0.13); transition: border-color var(--transition-med); } .pillar:first-child { border-top: none; } .pillar:hover { border-color: rgba(var(--color-accent-rgb),0.5); } /* Every .pillar is its own grid, so the `auto` number column is measured per item and never shared - and Georgia sets digits proportionally, so "01" asked for a narrower column than "02"/"03"/"04" and the stacked items' text edges came out ragged by a few pixels. tabular-nums makes the digits equal width; the 2ch floor is the belt to that braces, for a stack that lacks the feature. (.step__num sidesteps this with an explicit 40px circle.) */ /* --font-body for the same reason .brand__text is: in Georgia this stack ran 01 02 at x-height, 03 04 05 hanging below the baseline and 06 rising above it - six "numbers" on /industries sharing no baseline and no height, which makes a numbered list of capabilities look like a typographic accident rather than a sequence. Sans lining figures are all one height and all sit on the line. (The tabular-nums and 2ch floor below are still wanted: they equalise the COLUMN width across separately-gridded .pillar items.) */ .pillar__num { font-family: var(--font-body); font-variant-numeric: tabular-nums; min-width: 2ch; font-size: 1.7rem; background-image: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } /* ---- Process steps ---- */ /* Uncapped, every step card spanned the full 1232px container with 390-420px of empty space to the right of its own prose - five stretched bars rather than a designed column. 900px clears the 74ch cap on .step p (723px) plus the 60px number column and 56px of padding. (`counter-reset: step` was dead - there is no counter-increment or counter() anywhere in this file; the numbers are literal text in the markup.) */ .steps { display: grid; gap: 1.25rem; max-width: 900px; margin-inline: auto; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); transition: border-color var(--transition-med); } /* No step card contains a link, so a lift-and-glow promised interactivity that is not there - the same problem `.card:has(a)` was written to solve. A quiet border response only. */ .step:hover { border-color: rgba(var(--color-accent-rgb),0.35); } .step__num { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-image: var(--gradient-navy); color: #fff; font-weight: 700; font-size: var(--fs-md); font-family: var(--font-body); } .step h3 { font-size: var(--fs-lg); margin-bottom: 0.35rem; } /* Capped on the paragraph itself, where `ch` resolves against this font-size rather than the parent's. Uncapped, a step card spanning the full container put ~150 characters on a line (161 on /about); the comfortable range is 45-85. The CARD still spans the full width - only the prose is limited. */ .step p { color: var(--color-ink-muted); font-size: var(--fs-md); max-width: 74ch; } /* On a phone the number circle, gap and padding ate 116px of a 342px container, leaving a 209px text column - about 27 characters per line. Same single-class specificity as the base rules above, later in source. */ @media (max-width: 600px) { .step { padding: 1.25rem 1.15rem; gap: 0.85rem; } .step__num { width: 34px; height: 34px; font-size: var(--fs-sm); } } /* ---- Who we serve strip ---- */ /* `display: grid` so the strip can be marked up as a real