/* The Automation Department - site stylesheet Palette: cool grey field, carbon ink, one stamp red marker. Soft corners on a three-step radius scale (see --radius-sm / --radius / --radius-lg), rules and whitespace first, cards and shadows where they earn it. The "square corners throughout" this file used to claim stopped being true on 17 September, when --radius went from 0 to 10px. */ @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } :root { --carbon: #16181C; --slate: #5A6470; --rule: #DADEE3; --field: #F2F4F6; --surface: #FFFFFF; --stamp: #B3271C; --stamp-on-dark: #F2A29B; --text: var(--carbon); --text-2: var(--slate); --ground: var(--field); --col: 720px; --col-wide: 1260px; /* One radius scale, three steps plus a pill. Before this there were nineteen values in play and card corners alone ran 12, 13, 14, 16 and 18px with no rule behind the choice: nobody sees an individual radius, everybody feels the set of them. --radius stays the control step, which is what the rest of the file already reaches for. */ --radius-sm: 6px; /* chips, tags, small markers */ --radius: 10px; /* buttons, inputs, controls */ --radius-lg: 14px; /* cards, panels, bands */ --radius-pill: 999px; /* pills and round buttons */ --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --step: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --gap: clamp(3rem, 2rem + 5vw, 6rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--sans); font-size: var(--step); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; } h1, h2, h3 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; margin: 0; } h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); } p { margin: 0 0 1.1em; max-width: 68ch; } a { color: inherit; } a:focus-visible, button:focus-visible, summary:focus-visible, [role="tabpanel"]:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; } .ground-dark a:focus-visible, .ground-dark button:focus-visible, .ground-dark [role="tabpanel"]:focus-visible { outline-color: var(--field); } /* The tab panels hold no focusable content, so they take a tab stop of their own to make the content reachable. A tab stop with no visible ring is worse than no tab stop, hence the rule above; the inset keeps the ring inside the panel's own edge rather than over the tab strip above it. */ [role="tabpanel"]:focus-visible { outline-offset: -3px; } /* ---------- layout ---------- */ .band { padding: var(--gap) 20px; border-bottom: 1px solid var(--rule); } .band-dark { background: var(--carbon); color: var(--field); border-bottom: 0; } .band-dark .lede, .band-dark p { color: #C7CCD3; } .col { max-width: var(--col); margin: 0 auto; } .col-wide { max-width: var(--col-wide); margin: 0 auto; } .center { text-align: center; } .center p { margin-left: auto; margin-right: auto; } /* ---------- header ---------- */ .masthead { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background 160ms linear, border-color 160ms linear; } .masthead.is-stuck { background: var(--field); border-bottom-color: var(--rule); } .masthead-in { max-width: var(--col-wide); margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 0 20px; min-height: 84px; } .wordmark { display: inline-flex; align-items: center; margin-right: auto; line-height: 0; min-height: 44px; } .logo { display: block; width: auto; height: 72px; } /* stacked lockup, fills the band */ .foot .logo { height: 84px; } @media (max-width: 700px) { .masthead-in { min-height: 52px; } .logo { height: 46px; } } @media (max-width: 420px) { .masthead-in { min-height: 46px; } .logo { height: 44px; } } /* Measured at 375px: a 44px-tall lockup is 173px wide, and 173 + the Menu link + "Book a free audit" is wider than the 335px between the gutters, so the button sat on the wordmark and its label wrapped onto three lines. The mark comes down and the button says Book; the bottom bar still carries the full invitation. */ /* The header button moved into the drawer at 860px, which freed the whole right side of the bar. The lockup had been shrunk to 34px to make room for a button that is no longer there, leaving the brand smaller than the menu control beside it. Measured at 375: the mark ends at 154 and the burger starts at 270, so 116px of that gap was bought for nothing. */ @media (max-width: 560px) { .logo { height: 46px; } } @media (max-width: 380px) { .logo { height: 42px; } } .nav { display: flex; } .nav-list { list-style: none; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); margin: 0; padding: 0; } .nav-has { position: static; } .nav-top { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 4px; text-decoration: none; color: var(--text-2); font-size: 0.95rem; } .nav-top:hover, .nav-top[aria-current="page"] { color: var(--text); } .nav-drop::after { content: ""; width: 5px; height: 5px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .65; } /* The panel spans the masthead rather than the link, so eight destinations fit in four columns instead of a long thin list. It needs no JS: :focus-within keeps it open while a keyboard is inside it. */ .nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 34px rgba(22, 24, 28, .09); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 60; } .nav-has:hover > .nav-panel, .nav-has:focus-within > .nav-panel, .nav-has.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; } .nav-cols { max-width: var(--col-wide); margin: 0 auto; padding: 22px 20px 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 26px; } .nav-item { display: block; text-decoration: none; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); min-height: 44px; } .nav-item b { display: block; font-size: 0.9rem; font-weight: 600; } .nav-item i { display: block; font-style: normal; font-size: 0.78rem; color: var(--text-2); margin-top: 2px; line-height: 1.4; } .nav-item:hover { background: var(--field); } @media (max-width: 1000px) { .nav-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* phone drawer */ .nav-burger { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 0.88rem; background: none; cursor: pointer; border: 1px solid var(--slate); border-radius: var(--radius); color: var(--text); } .nav-burger i { display: block; width: 16px; height: 10px; position: relative; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .nav-burger i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; transform: translateY(-50%); } .masthead .btn { padding: 9px 16px; font-size: 0.9rem; } /* the drawer carries its own booking link; on a wide screen the header does. Scoped past .btn, which sets display later in this file. */ .nav .nav-cta { display: none; } @media (max-width: 860px) { /* Four menus, a lockup and a CTA will not share one row on a phone, and the second-row wrap that used to live here cannot hold panels. The nav becomes a drawer; the burger is the only control that needs script, and until it loads the nav is simply hidden the way it is on any unopened drawer -- so menu.js also unhides it, rather than the other way round. */ .masthead-in { column-gap: 10px; } .nav { display: none; } .nav-burger { display: inline-flex; } /* Book sits inside the menu here: the first screen already asks for the booking, so a second button in the bar only crowded the lockup. */ .masthead-in > .btn { display: none; } /* First thing under the close, not last thing under two screens of menu. */ .nav:target .nav-cta { display: block !important; width: 100%; margin: 0 0 18px; text-align: center; padding: 15px 18px; font-size: 0.95rem; } /* The drawer opens on :target, so it works with no JavaScript at all -- the burger is a link to #nav. menu.js only adds aria-expanded and Escape on top. Hiding the nav behind a control that needs script would leave a phone with no navigation whenever that script fails, which is the state this replaced. */ /* The chat bubble is fixed at z-index 99999999 inside the widget's own shadow root, so the drawer cannot be raised above it: at 375 the bubble sat on top of the open menu. It steps aside while the menu is open. */ .nav:target ~ chat-widget, body:has(.nav:target) chat-widget { display: none; } /* Scrolling past the end of the drawer used to scroll the page behind it. */ .nav:target { overscroll-behavior: contain; } /* Full bleed: a 39px sliver of greyed page down the left read as an unfinished overlay rather than a menu. */ .nav:target { display: block; position: fixed; inset: 0; width: 100%; background: var(--surface); border-left: 0; z-index: 200; overflow-y: auto; padding: 60px 16px 28px; box-shadow: none; } .nav:target .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav:target .nav-top { border-bottom: 1px solid var(--rule); padding: 4px 6px; font-size: 1rem; color: var(--text); justify-content: space-between; } .nav:target .nav-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: block; } /* once menu.js is in, the panels collapse into accordions */ .nav.js:target .nav-panel { display: none; } .nav.js:target .nav-has.is-open > .nav-panel { display: block; } .nav:target .nav-cols { grid-template-columns: minmax(0, 1fr); padding: 4px 0 10px; gap: 0; } .nav:target .nav-item { padding-left: 14px; } /* The only rounded thing on the page, reading as a stray focus ring in white space. Square, like everything else, and on the slate that every other control boundary uses. */ .nav-close { position: absolute; top: 10px; right: 14px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--slate); border-radius: var(--radius); background: none; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--text); text-decoration: none; } .nav-close:hover { background: var(--field); border-color: var(--carbon); } .nav:target + .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(22,24,28,.4); z-index: 190; } .nav-scrim { display: none; } } @media (min-width: 861px) { .nav-close, .nav-scrim { display: none; } } /* ---------- home hero ---------- The old hero was a centred column: at 1440 it read as a thin ribbon of grey text with one button and no evidence of anything. This holds the width, gives the stamp red a job in the second clause, offers a second door for the price-checkers, and puts a real piece of our own work beside the headline. */ /* The fold has to hold the lockup, the whole hero and the first marquee row on a laptop, so this band is tight on purpose: the old 78px top gap left the headline floating a long way below the logo and pushed the marquee off. */ .hm-hero { padding: clamp(12px, 0.4rem + 0.9vw, 18px) 0 clamp(28px, 1.2rem + 1.6vw, 48px); } /* The marquee is a full-bleed black band and the booking row ends in outlined time buttons, so 15px left the two sitting on top of each other. The band needs air above it to read as a separate thing. */ .hm-wrap { max-width: var(--col-wide); margin: 0 auto; padding: 0 20px; } .hm-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(28px, 4vw, 66px); align-items: center; } @media (max-width: 900px) { .hm-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } } .hm-eyebrow { font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); margin: 0 0 12px; display: flex; align-items: center; gap: 12px; } .hm-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .hm-h1 { font-size: clamp(2.1rem, 1rem + 4.2vw, 3.9rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 12px; max-width: 18ch; } .hm-h1 .accent { color: var(--stamp); } .hm-sub { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.24rem); color: var(--text-2); max-width: 46ch; margin: 0 0 16px; line-height: 1.5; } .hm-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .hm-ctas .btn { margin: 0; } .hm-hero .nx-row { margin-top: 14px; } .hm-hero .nx-note { margin-top: 8px; } .hm-micro { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); margin: 10px 0 0; } /* the evidence panel: one of our own operations, mid-run */ /* ---------- the numbers ---------- Beside the headline: what it costs to start, how long until it runs, what it costs to keep, and who already runs on it. No panel and no card, just a rule and the figures, which is how the rest of the site treats a list. The first row is the price, in red, because the price is the question everyone arrives with and publishing it is the part competitors will not do. */ .hm-nums { border-left: 2px solid var(--carbon); padding-left: clamp(18px, 1rem + 1.4vw, 32px); } .hm-num { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 28px); padding: clamp(18px, 1.2vw + 0.6rem, 30px) 0; } .hm-num + .hm-num { border-top: 1px solid var(--rule); } /* A fixed column rather than a character count: "From $499" is wider than "Free", so a ch-based minimum let the first label start 21px right of the other two on a phone. Every label now begins on the same line. */ /* A fixed width, not a minimum: with a minimum the widest figure grows its own column and takes its label with it, so "From $499" started 21px right of the other two on a phone. */ .hm-num b { flex: none; width: clamp(156px, 7vw + 130px, 190px); font-size: clamp(2.1rem, 1.2rem + 2.5vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--carbon); } /* The unit rides with the figure rather than being read as part of it. */ .hm-num b em { font-style: normal; font-size: 0.38em; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); margin-left: 0.3em; } /* "From" belongs to the price without competing with it, and sits on the same line: stacked above, it made that row two lines deep while the other two were one, so nothing landed in the same place down the column. */ .hm-num b i { font-style: normal; font-family: var(--mono); /* 0.24em of a 34px figure is 8.1px, the smallest type on the site. */ font-size: max(0.24em, 12px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-right: 0.4em; vertical-align: 0.45em; } .hm-num span { font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); line-height: 1.45; } .hm-num:first-child b { color: var(--stamp); } @media (max-width: 900px) { .hm-nums { max-width: 520px; } } @media (max-width: 420px) { .hm-num { gap: 12px; padding: 12px 0; } .hm-num b { min-width: 4.1ch; } .hm-num span { font-size: max(0.7rem, 12px); } } /* timing on the steps that were already here */ .step .when { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: max(0.66rem, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 3px 10px; } /* ---------- buttons ---------- */ .btn { display: inline-block; background: var(--carbon); color: var(--field); text-decoration: none; font-weight: 600; padding: 15px 26px; border: 1px solid var(--carbon); border-radius: var(--radius); } .btn:hover { background: #000; border-color: #000; } /* .btn-accent, .btn-lg and .btn-line have been written in the markup for a long time and were defined nowhere, so every button on the site rendered identically. These are the three the markup already implies. The outline border is --slate rather than --rule so it clears 3:1 against white for WCAG 1.4.11; --rule is 1.3:1 and too faint to be a control boundary. */ .btn-lg { padding: 17px 30px; font-size: 1.02rem; } .btn-accent { background: var(--carbon); color: var(--field); border-color: var(--carbon); } .btn-line { background: transparent; color: var(--carbon); border-color: var(--slate); } .btn-line:hover { background: var(--field); border-color: var(--carbon); } .band-dark .btn-line, .cta-band .btn-line, .ground-dark .btn-line { background: transparent; color: #fff; border-color: #7A848F; } .band-dark .btn-line:hover, .cta-band .btn-line:hover, .ground-dark .btn-line:hover { background: #252A31; border-color: #fff; } .band-dark .btn { background: var(--field); color: var(--carbon); border-color: var(--field); } .band-dark .btn:hover { background: #fff; } .btn-note { font-family: var(--mono); font-size: 0.8rem; color: var(--text-2); margin-top: 14px; } .band-dark .btn-note { color: #9AA3AD; } /* ---------- hero ---------- */ .hero { padding-top: clamp(4rem, 2rem + 9vw, 8rem); } .lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--text-2); } .hero .btn { margin-top: 10px; } /* ---------- stat strip ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); } .stat { padding: 8px 18px; border-left: 1px solid var(--rule); } .stat:first-child { border-left: 0; } .stat b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -0.03em; } .stat span { font-family: var(--mono); font-size: 0.76rem; color: var(--text-2); } @media (max-width: 640px) { .stats { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 1px solid var(--rule); padding: 16px 0; } .stat:first-child { border-top: 0; } } /* ---------- problem sequence ---------- */ .seq p { text-wrap: balance; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 auto 0.55em; max-width: 20ch; } .turn { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); } .turn p { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 700; max-width: 22ch; margin: 0 auto; } .turn .mark { border-bottom: 3px solid var(--stamp); } /* ---------- numbered steps ---------- */ .steps-grid { display: grid; gap: 34px; grid-template-columns: repeat(3, 1fr); text-align: left; margin-top: 2.5rem; } .step { border-top: 2px solid var(--carbon); padding-top: 14px; } .step .num { font-family: var(--mono); font-size: 0.78rem; color: var(--stamp); display: block; margin-bottom: 8px; } .step h3 { margin-bottom: 8px; } .step p { font-size: 0.97rem; color: var(--text-2); margin-bottom: 10px; } .step a { font-size: 0.92rem; text-underline-offset: 3px; } @media (max-width: 760px) { .steps-grid { grid-template-columns: 1fr; gap: 26px; } } /* ---------- fit / non-fit ---------- */ .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2.2rem; text-align: left; } .fit > div { padding: 26px; border: 1px solid var(--rule); } .fit > div + div { border-left: 0; } .fit h3 { font-size: 1.05rem; margin-bottom: 14px; } .fit ul { margin: 0; padding-left: 1.1em; } .fit li { margin-bottom: 9px; color: var(--text-2); font-size: 0.97rem; } .fit .no h3 { color: var(--stamp); } @media (max-width: 720px) { .fit { grid-template-columns: 1fr; } .fit > div + div { border-left: 1px solid var(--rule); border-top: 0; } } /* ---------- founders ---------- */ .people { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2.6rem auto 0; max-width: 940px; text-align: left; border-top: 1px solid var(--rule); } .person { display: grid; grid-template-columns: 124px 1fr; gap: 22px; align-items: start; padding: 30px 30px 30px 0; border-bottom: 1px solid var(--rule); } .person + .person { border-left: 1px solid var(--rule); padding-left: 30px; } .person img { width: 124px; height: 124px; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: 1px solid var(--rule); background: var(--surface); } .person-body { min-width: 0; } .person h2, .person h3 { margin: 0 0 3px; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem); letter-spacing: -0.02em; } .person .person-role { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); margin: 0 0 12px; letter-spacing: 0.01em; } .person p { font-size: 0.93rem; line-height: 1.55; color: var(--text-2); margin: 0 0 12px; } .person a { font-size: 0.87rem; white-space: nowrap; text-underline-offset: 3px; } @media (max-width: 820px) { .people { grid-template-columns: 1fr; max-width: 520px; } .person { padding: 26px 0; } .person + .person { border-left: 0; padding-left: 0; } } @media (max-width: 420px) { .person { grid-template-columns: 96px 1fr; gap: 16px; } .person img { width: 96px; height: 96px; } } /* ---------- faq ---------- */ .faq { margin-top: 2.2rem; text-align: left; } .faq details { border-top: 1px solid var(--rule); } .faq details:last-of-type { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font-family: var(--mono); font-weight: 400; font-size: 1.3rem; color: var(--stamp); } .faq details[open] summary::after { content: "\2013"; } .faq details p { padding-bottom: 18px; color: var(--text-2); font-size: 0.98rem; } /* ---------- prose / service + pricing blocks ---------- */ .block { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 44px; text-align: left; } .block:first-of-type { border-top: 0; margin-top: 2rem; } .block .num { font-family: var(--mono); font-size: 0.78rem; color: var(--stamp); } .block h2 { margin: 6px 0 14px; } .spec { margin: 18px 0 0; border-top: 1px solid var(--rule); } .spec div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; } .spec dt { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); } .spec dd { margin: 0; } @media (max-width: 620px) { .spec div { grid-template-columns: 1fr; gap: 4px; } } .ph { font-family: var(--mono); font-size: 0.85em; color: var(--stamp); background: #FBE9E7; padding: 1px 5px; } /* ---------- form ---------- */ .form { margin-top: 2rem; text-align: left; } .form label { display: block; font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); margin: 18px 0 6px; } .form input, .form textarea { width: 100%; padding: 12px 13px; font: inherit; font-size: 0.97rem; border: 1px solid var(--carbon); border-radius: var(--radius); background: var(--surface); color: var(--text); } .form textarea { min-height: 120px; resize: vertical; } .form .btn { margin-top: 22px; cursor: pointer; } .booking { margin-top: 2rem; border: 1px solid var(--rule); background: var(--surface); padding: 44px 24px; text-align: center; font-family: var(--mono); font-size: 0.82rem; color: var(--text-2); } /* ---------- footer ---------- */ .foot { padding: 46px 20px; font-size: 0.9rem; color: var(--text-2); } .foot-in { max-width: var(--col-wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; } .foot a { color: var(--text-2); } .foot .nav-foot { display: flex; gap: 18px; flex-wrap: wrap; } .foot address { font-style: normal; line-height: 1.8; } .foot .fine { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; margin-top: 30px; } /* spacing corrections after first visual pass */ .hero h1 + .lede { margin-top: 1.1em; } .hero .lede { margin-bottom: 2.2rem; } @media (max-width: 460px) { .wordmark { font-size: 0.95rem; max-width: 46%; } .wordmark span { font-size: max(0.58rem, 12px); } } /* ---------- problem row: three marks, one line of text each ---------- */ .pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .pain { padding: 8px 22px; border-left: 1px solid var(--rule); } .pain:first-child { border-left: 0; } .pain svg { width: 56px; height: 56px; display: block; margin: 0 auto 20px; fill: none; stroke: var(--carbon); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; } .pain svg .tick { stroke: var(--stamp); } .pain p { font-size: clamp(1.15rem, 0.95rem + 0.75vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; max-width: none; white-space: nowrap; } .pain span { font-family: var(--mono); font-size: 0.82rem; color: var(--text-2); white-space: nowrap; } .seq .turn p { font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.3rem); max-width: none; white-space: nowrap; margin: 0 auto 0.15em; } @media (max-width: 860px) { .pains { grid-template-columns: 1fr; } .pain { border-left: 0; border-top: 1px solid var(--rule); padding: 28px 0; } .pain:first-child { border-top: 0; padding-top: 0; } .pain svg { width: 44px; height: 44px; margin-bottom: 14px; } } @media (max-width: 520px) { .pain p, .pain span, .seq .turn p { white-space: normal; } } /* ---------- founders' note ---------- */ .note { margin-top: 2rem; border-top: 2px solid var(--carbon); padding-top: 26px; } .note p { margin: 0 0 1.05em; max-width: 66ch; } .note p:first-of-type { font-size: 1.1em; } .sign { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 22px; } .signer { display: flex; align-items: center; gap: 13px; } .signer img { width: 54px; height: 54px; object-fit: cover; display: block; border: 1px solid var(--rule); } .signer b { display: block; font-size: 0.97rem; } .signer span { font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--text-2); } @media (max-width: 760px) { .person { grid-template-columns: 104px 1fr; gap: 16px; } .person img { width: 104px; height: 104px; } } /* ---------- service marquee: two rows, opposite directions ---------- */ .marquee { background: var(--carbon); color: var(--field); overflow: hidden; } .marquee-row { overflow: hidden; padding: 13px 0; } .marquee-caps { border-bottom: 1px solid #2C313A; } .marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee-track-rev { animation: slide-rev 58s linear infinite; } .marquee-set { display: flex; align-items: center; flex: 0 0 auto; } .marquee-set span { white-space: nowrap; padding: 0 20px; } .marquee-caps .marquee-set span { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; } .marquee-tools .marquee-set span { font-family: var(--mono); font-size: 0.82rem; color: #AEB6C0; } .marquee-set i { color: var(--stamp-on-dark); font-style: normal; font-size: 0.85rem; } .marquee-tools .marquee-set i { color: #7A8189; } /* was #5C646F: 2.97:1 on carbon, fails AA */ @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes slide-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .marquee-track, .marquee-track-rev { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } .marquee-set:last-child { display: none; } .marquee-set { flex-wrap: wrap; justify-content: center; } .marquee-set span { padding: 4px 12px; } } /* ---------- service catalogue ---------- */ .grp { border-top: 2px solid var(--carbon); padding-top: 18px; margin: 52px 0 14px; } .grp:first-of-type { margin-top: 30px; } .grp h3 { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.72rem); font-weight: 700; letter-spacing: -0.025em; } .grp-n { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--stamp); } .grp-sub { margin: 6px 0 0 34px; font-size: 0.97rem; color: var(--text-2); max-width: 60ch; } @media (max-width: 680px) { .grp-sub { margin-left: 0; } } .cat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 12px; border-top: 1px solid var(--rule); } .cat > div { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--rule); } .cat > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule); } .cat b { display: block; font-size: 0.99rem; margin-bottom: 3px; } .cat span { font-size: 0.89rem; color: var(--text-2); } @media (max-width: 640px) { .cat { grid-template-columns: 1fr; } .cat > div:nth-child(even) { padding-left: 0; border-left: 0; } } /* ---------- two ways to start ---------- */ .ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2.4rem auto 0; max-width: 940px; text-align: left; border-top: 2px solid var(--carbon); } .way { padding: 26px 30px 26px 0; } .way + .way { border-left: 1px solid var(--rule); padding-left: 30px; } .way .num { font-family: var(--mono); font-size: 0.78rem; color: var(--stamp); display: block; margin-bottom: 10px; } .way h3 { margin: 0 0 10px; } .way p { font-size: 0.97rem; color: var(--text-2); margin: 0 0 14px; } .way a { font-size: 0.93rem; font-weight: 600; text-underline-offset: 3px; } .ways-note { font-family: var(--mono); font-size: 0.82rem; color: var(--text-2); margin: 22px auto 0; max-width: 52ch; } @media (max-width: 760px) { .ways { grid-template-columns: 1fr; max-width: 520px; } .way { padding: 24px 0; border-top: 1px solid var(--rule); } .way:first-child { border-top: 0; } .way + .way { border-left: 0; padding-left: 0; } } /* ---------- the one process, with a branch at step 02 ---------- */ .proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2.6rem auto 0; text-align: left; align-items: stretch; } .proc-step { position: relative; padding: 20px 26px 22px 20px; border-top: 2px solid var(--carbon); } .proc-step + .proc-step { border-left: 1px solid var(--rule); } .proc-step .num { font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--stamp); display: block; margin-bottom: 8px; } .proc-step > b { display: block; font-size: 1.12rem; letter-spacing: -0.02em; margin-bottom: 8px; } .proc-step p { font-size: 0.9rem; color: var(--text-2); margin: 0; } .proc-step::after { content: ""; position: absolute; top: -6px; right: -5px; border-left: 8px solid var(--carbon); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .proc-step:last-child::after { display: none; } .branch { display: grid; gap: 8px; } .branch > div { border: 1px solid var(--rule); background: var(--surface); padding: 10px 12px; } .branch > div:last-child { border-color: var(--stamp); } .branch i { font-family: var(--mono); font-style: normal; font-size: max(0.7rem, 12px); color: var(--stamp); display: block; margin-bottom: 3px; } .branch b { display: block; font-size: 0.92rem; } .branch span { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); } @media (max-width: 900px) { .proc { grid-template-columns: 1fr 1fr; } .proc-step:nth-child(3) { border-left: 0; } } @media (max-width: 600px) { .proc { grid-template-columns: 1fr; max-width: 420px; } .proc-step + .proc-step { border-left: 0; } .proc-step { padding: 18px 0 20px; } .proc-step::after { top: auto; bottom: -6px; right: auto; left: 50%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--carbon); border-bottom: 0; } } /* ---------- track record ---------- */ .record { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; text-align: left; } .record-copy h2 { margin-bottom: 14px; } .record-copy p { font-size: 0.99rem; color: var(--text-2); } .record-note { font-family: var(--mono); font-size: 0.8rem; margin-bottom: 0; } .chart { margin: 0; } .bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 190px; border-bottom: 2px solid var(--carbon); } .bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; } .bar-fill { background: var(--carbon); width: 100%; } .bar:last-child .bar-fill { background: var(--stamp); } .bar span { position: absolute; bottom: -24px; left: 0; right: 0; font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); text-align: center; } .chart figcaption { font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--text-2); margin-top: 38px; } @media (max-width: 820px) { .record { grid-template-columns: 1fr; gap: 34px; } .bars { height: 150px; } } /* ---------- speed promise ---------- */ .kicker { display: inline-block; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.01em; color: var(--carbon); margin: 0 auto 22px; border: 1px solid var(--carbon); border-left: 4px solid var(--stamp); padding: 8px 14px; background: var(--surface); } @media (max-width: 480px) { .kicker { font-size: max(0.74rem, 12px); padding: 7px 10px; } } /* ---------- running automations ---------- */ .rails { display: grid; gap: 0; } .rail { display: grid; grid-template-columns: 116px 1fr 54px; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid #2C313A; } .rail:last-child { border-bottom: 0; } .rlabel { font-family: var(--mono); font-size: 0.78rem; color: #AEB6C0; white-space: nowrap; } .rtrack { position: relative; display: flex; align-items: center; min-width: 0; } .rnode { font-size: 0.82rem; white-space: nowrap; padding: 6px 12px; border: 1px solid #39404B; color: #C7CCD3; background: #1B1F26; animation: light 7s linear infinite; animation-delay: calc(var(--d) + var(--n) * 0.55s); } .rline { flex: 1 1 10px; min-width: 10px; height: 1px; background: #39404B; } .rpulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; background: var(--stamp-on-dark); border-radius: 50%; animation: run 7s linear infinite; animation-delay: var(--d); } .rdone { font-family: var(--mono); font-size: max(0.7rem, 12px); color: #7A8189; text-align: right; /* was #5C646F, 2.97:1 */ animation: doneflash 7s linear infinite; animation-delay: calc(var(--d) + 2.4s); } @keyframes run { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 40% { left: calc(100% - 7px); opacity: 1; } 46% { opacity: 0; } 100% { left: calc(100% - 7px); opacity: 0; } } @keyframes light { 0%, 100% { border-color: #39404B; color: #C7CCD3; } 8% { border-color: var(--stamp-on-dark); color: #fff; } 22% { border-color: #39404B; color: #C7CCD3; } } @keyframes doneflash { 0%, 100% { color: #7A8189; } 6%, 26% { color: var(--stamp-on-dark); } } @media (max-width: 760px) { .rail { grid-template-columns: 1fr; gap: 10px; } .rdone { display: none; } .rnode { font-size: max(0.74rem, 12px); padding: 5px 8px; } .rlabel { font-size: max(0.72rem, 12px); } } @media (prefers-reduced-motion: reduce) { .rnode, .rpulse, .rdone { animation: none; } .rpulse { display: none; } } /* ---------- case studies ---------- */ .cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 2.6rem; text-align: left; border-top: 2px solid var(--carbon); } .case { padding: 26px 30px 28px 0; border-bottom: 1px solid var(--rule); } .case:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 30px; } .case:nth-last-child(-n+2) { border-bottom: 0; } .case:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 26px; border-top: 1px solid var(--rule); } .case:last-child:nth-child(odd) .case-list { columns: 2; column-gap: 30px; } @media (max-width: 900px) { .case:last-child:nth-child(odd) .case-list { columns: 1; } } .case-tag { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); display: block; margin-bottom: 8px; } .case h3 { margin: 0 0 10px; } .case-what { font-size: 0.93rem; color: var(--text-2); margin: 0 0 14px; } .case-list { list-style: none; margin: 0 0 16px; padding: 0; } .case-list li { font-size: 0.89rem; padding: 7px 0 7px 18px; position: relative; border-top: 1px solid var(--rule); } .case-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border: 1px solid var(--carbon); } .case-out { font-size: 0.93rem; font-weight: 600; margin: 0; border-left: 3px solid var(--stamp); padding-left: 12px; } .cases-note { font-family: var(--mono); font-size: 0.8rem; color: var(--text-2); margin: 26px auto 0; max-width: 60ch; } @media (max-width: 900px) { .cases { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .case { padding: 24px 0; border-top: 1px solid var(--rule); } .case:first-child { border-top: 0; } .case + .case { border-left: 0; padding-left: 0; } } /* ---------- case rows, icon tiles ---------- */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 8px; border-left: 1px solid var(--rule); text-align: center; } .tile:first-child { border-left: 0; } .ic { width: 26px; height: 26px; fill: none; stroke: var(--carbon); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; } .tile span { font-family: var(--mono); font-size: max(0.68rem, 12px); color: var(--text-2); line-height: 1.25; } .crow:hover .ic { stroke: var(--stamp); } @media (max-width: 680px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tile { padding: 4px 4px; } .tile span { font-size: max(0.6rem, 12px); } .ic { width: 22px; height: 22px; } } /* ---------- live floor, light ---------- */ .fc-kicker { font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--stamp); margin: 0 0 8px; letter-spacing: 0.04em; } .fc-sub { color: var(--text-2); margin-bottom: 0; } .fc { margin-top: 2.2rem; text-align: left; } .fc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 4px; } .fc-tag { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); margin: 0 0 4px; } .fc-name { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); margin: 0; } .fc-result { text-align: right; border-right: 3px solid var(--stamp); padding-right: 16px; max-width: 30ch; } .fc-result-label { display: block; font-family: var(--mono); font-size: max(0.66rem, 12px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp); margin-bottom: 5px; } .fc-out-line { margin: 0; font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); text-wrap: balance; } .fc-track { position: relative; height: 240px; margin-top: 14px; background: var(--surface); border: 1px solid var(--rule); overflow: hidden; } .fc-stations { position: absolute; left: 0; right: 0; top: 42%; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: 20px; pointer-events: none; } .station { text-align: center; padding: 0 8px; } .station .ic { width: 30px; height: 30px; stroke: #888E94; /* was #B9C0C8: 1.67:1, fails 1.4.11 */ transition: stroke 900ms ease, transform 900ms ease; } .station b { display: block; font-size: 0.875rem; color: #6C7077; margin-top: 8px; /* was 0.82rem/#9AA1AA: 2.37:1 */ font-weight: 600; transition: color 600ms ease; } .station i { display: block; font-family: var(--mono); font-style: normal; font-size: max(0.72rem, 12px); color: #6C7075; margin-top: 2px; transition: color 600ms ease; } /* was 0.64rem/#B9C0C8: 1.67:1 at 10px */ .station.done .ic { stroke: var(--carbon); } .station.done b { color: var(--carbon); } .station.done i { color: var(--carbon); } /* was --text-2, too close to the new resting colour to read as a change */ .fc-lane { position: absolute; left: 0; right: 0; top: 30%; height: 0; } .fc-lane::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 1px; background: var(--rule); } .fc-lane::after { content: ""; position: absolute; left: 4%; top: 0; height: 1px; background: var(--stamp); width: var(--p, 0%); transition: width 900ms cubic-bezier(.5,0,.2,1); } .chip { position: absolute; top: 30%; box-shadow: 0 0 0 4px var(--surface); transform: translate(-50%, -50%); background: var(--field); border: 1px solid var(--carbon); color: var(--carbon); font-family: var(--mono); font-size: max(0.7rem, 12px); white-space: nowrap; padding: 5px 9px; will-change: left; z-index: 2; transition: left 900ms cubic-bezier(.5,0,.2,1), opacity 400ms ease; } .chip.done { background: var(--carbon); color: var(--field); border-color: var(--carbon); } .chip.out { opacity: 0; } .fc-shelf { position: absolute; right: 3%; top: 14px; display: flex; align-items: center; gap: 8px; max-width: 70%; justify-content: flex-end; } .fc-shelf p { font-family: var(--mono); font-size: max(0.7rem, 12px); color: #6C7075; /* was 0.62rem/#B9C0C8: 1.67:1 at 10px */ margin: 0; white-space: nowrap; } .fc-shelf span { font-family: var(--mono); font-size: max(0.66rem, 12px); color: var(--text-2); border: 1px solid var(--rule); background: var(--field); padding: 3px 8px; white-space: nowrap; animation: shelfin .5s both; } @keyframes shelfin { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } .fc-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .fc-tab { appearance: none; font: inherit; cursor: pointer; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--rule); color: var(--text-2); font-size: 0.82rem; padding: 15px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .fc-tab:hover { color: var(--text); border-color: var(--slate); border-top-color: var(--slate); } .fc-tab.is-on { background: var(--carbon); color: #fff; font-weight: 600; border-color: var(--carbon); border-top-color: var(--stamp); } @media (max-width: 820px) { .chip { font-size: max(0.62rem, 12px); padding: 4px 7px; box-shadow: 0 0 0 3px var(--surface); } .band-alt .chip { box-shadow: 0 0 0 3px var(--field); } .fc-head { flex-direction: column; align-items: flex-start; gap: 8px; } .fc-result { text-align: left; border-right: 0; border-left: 3px solid var(--stamp); padding-right: 0; padding-left: 14px; max-width: none; } .fc-track { height: 290px; } .station b { font-size: max(0.66rem, 12px); } .station i { display: none; } /* The shelf was hidden here, which removed the only payoff the component has: work arriving and being marked done. There is empty track above the lane on a phone, so it goes there instead of being cut. */ .fc-shelf { left: 3%; right: 3%; top: 12px; max-width: none; flex-wrap: wrap; justify-content: flex-start; gap: 6px; } .fc-shelf p { font-size: max(0.64rem, 12px); width: 100%; margin-bottom: 2px; } .fc-shelf span { font-size: max(0.62rem, 12px); padding: 2px 6px; } .fc-tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; } .fc-tab { padding: 12px 8px; font-size: 0.76rem; } } @media (prefers-reduced-motion: reduce) { .chip { transition: none !important; } .fc-shelf span { animation: none; } } /* ---------- alternating section grounds ---------- */ .band-alt { background: var(--surface); border-bottom-color: var(--rule); } .band-alt + .band { border-top: 0; } /* on a white ground the inner panels need their own edge back */ .band-alt .fc-track { background: var(--field); } .band-alt .fit > div, .band-alt .booking, .band-alt .node, .band-alt .branch > div { background: var(--field); } .band-alt .kicker { background: var(--field); } /* honeypot: present for bots, gone for people */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* links through to the rest of the site */ .nav-more { max-width: var(--col-wide); margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 20px; } .nav-more a { font-size: 0.85rem; color: var(--text-2); } .nav-more a:hover { color: var(--text); } /* ---------- skip link ---------- */ /* Keyboard users need it; everyone else should never see it. Without these rules it renders as a stray "Skip to content" link above the header. */ .skip { position: absolute; left: -9999px; top: 0; background: var(--carbon); color: var(--field); padding: 10px 16px; font-size: 0.9rem; font-weight: 600; text-decoration: none; z-index: 100; } .skip:focus, .skip:focus-visible { left: 8px; top: 8px; outline: 2px solid var(--stamp); outline-offset: 2px; } /* ---------- tap targets ---------- WCAG 2.5.8 wants 24x24px. These four are standalone links, not links inside a sentence, so the inline exception does not cover them: they were 15-22px tall. Padding only; nothing moves visually beyond a few pixels of breathing room. Links inside prose are exempt and left alone. */ .way > a, .step > a, .person-body > a { display: inline-block; padding: 5px 0; } .foot .nav-more a, .foot address a { display: inline-block; padding: 4px 0; } /* ---------- services: workflow canvas ---------- */ .wf { margin-top: 2rem; } .wf-canvas { margin-top: 14px; border: 1px solid var(--rule); background: var(--surface); } .wf-canvas svg { display: block; width: 100%; height: auto; } .wf-edge { fill: none; stroke: #C6CCD3; stroke-width: 2; marker-end: url(#wfarrow); transition: stroke 260ms ease; } .wf-edge.hot { stroke: var(--stamp); marker-end: url(#wfarrowhot); } .wf-node rect { fill: var(--field); stroke: var(--carbon); stroke-width: 1.5; } .wf-node .wf-ic { stroke: var(--carbon); fill: none; stroke-width: 1.7; } /* These are user units in a 1200-wide viewBox, so what a reader sees is the value times however far the canvas is scaled. At 13.5/10 the sub-labels landed at 10.3px on a 1280 laptop and 6.8px at 861. Measured against every node's rect: nothing comes within 4px of its box even at 15/12.4. */ .wf-node .wf-t { font-family: var(--sans); font-size: 17.5px; font-weight: 700; fill: var(--carbon); } .wf-node .wf-s { font-family: var(--mono); font-size: 14.7px; fill: var(--text-2); } .wf-node .wf-c { text-anchor: middle; } .wf-node.hot rect { fill: var(--carbon); } .wf-node.hot .wf-t { fill: #fff; } .wf-node.hot .wf-s { fill: #AEB6C0; } .wf-node.hot .wf-ic { stroke: var(--stamp-on-dark); } .wf-node rect, .wf-node .wf-t, .wf-node .wf-s, .wf-node .wf-ic { transition: fill 420ms ease, stroke 420ms ease; } .wf-decide rect { stroke-dasharray: 5 4; } .wf-human rect { fill: #FDF3F2; stroke: var(--stamp); } .wf-human .wf-ic { stroke: var(--stamp); } .wf-out rect { fill: var(--surface); stroke-width: 2.5; } .wf-packet rect { fill: var(--carbon); } .wf-packet circle { fill: var(--stamp-on-dark); } .wf-packet text { font-family: var(--mono); font-size: 10px; fill: #fff; } /* The diagram builds itself column by column when a job is picked, and the work sets off through it before the last column has landed. */ .wf-node.wf-pop .wf-cell { animation: wfPop 420ms cubic-bezier(.2, .9, .3, 1) var(--d, 0ms) both; transform-box: fill-box; transform-origin: center; } @keyframes wfPop { from { opacity: 0; transform: scale(.82); } } .wf-edge.wf-drawing { animation: wfDraw 380ms ease var(--d, 0ms) both; marker-end: none; } @keyframes wfDraw { to { stroke-dashoffset: 0; } } .wf-tab { appearance: none; font: inherit; cursor: pointer; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--rule); color: var(--text-2); font-size: 0.82rem; padding: 15px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .wf-tab:hover { color: var(--text); border-color: var(--slate); border-top-color: var(--slate); } .wf-tab.is-on { background: var(--carbon); color: #fff; font-weight: 600; border-color: var(--carbon); border-top-color: var(--stamp); } @media (max-width: 820px) { .wf .fc-head { flex-direction: column; align-items: flex-start; gap: 8px; } .wf-tab { padding: 12px 8px; font-size: 0.76rem; } } @media (prefers-reduced-motion: reduce) { .wf-packet { display: none; } } /* ---------- services: catalogue rows and stage accordion ---------- */ /* Twelve services were twelve full-width rows, then four rows of four with the group heading stacked above each: still a tall column with the left third empty. The group label now sits beside its tiles, so the section reads across the page instead of down it. Reference is the ClickUp and Airtable grids. */ .bento { display: grid; gap: 14px; margin: 26px 0 30px; } .bento-row { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; border-top: 2px solid var(--carbon); padding-top: 16px; align-items: start; } .bento-lab { position: sticky; top: 96px; } .bento-lab .n { font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--stamp); display: block; margin-bottom: 6px; } .bento-lab h3 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -0.01em; } .bento-lab p { margin: 0; font-size: 0.88rem; color: var(--text-2); line-height: 1.5; } .bento-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .btile { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--text); border: 1px solid var(--rule); border-left: 3px solid var(--slate); border-radius: var(--radius); padding: 13px 14px; background: var(--surface); } .btile:hover { border-color: var(--slate); border-left-color: var(--stamp); background: var(--field); } .btile b { font-size: 0.93rem; line-height: 1.3; letter-spacing: -0.01em; } .btile span { font-size: 0.81rem; color: var(--text-2); line-height: 1.45; } @media (max-width: 1100px) { .bento-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .bento-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } .bento-lab { position: static; } } @media (max-width: 520px) { .bento-tiles { grid-template-columns: minmax(0, 1fr); } /* Sixteen tiles stacked one per row is 1,136px of the bento's 1,726, and that part is content. This takes the part that is not: two pixels of padding a tile, and the gaps between the rows and the groups. Tiles are not put two-up here on purpose -- at 175px "Invoice and document processing" wraps to three lines and its description to five, which is the trade the six service cards already refused. */ .btile { padding: 11px 13px; gap: 4px; } .bento { gap: 10px; margin: 20px 0 24px; } .bento-row { gap: 9px; } .bento-lab h3 { margin-bottom: 3px; } } .stages summary { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; } .stages summary em { font-style: normal; font-family: var(--mono); font-size: max(0.74rem, 12px); color: var(--text-2); white-space: nowrap; } .stages .spec { margin-bottom: 20px; } /* ---------- centred section intros ---------- */ /* A centred paragraph that runs the full column wraps into a long line and a two-word orphan, which reads as a mistake. Hold them to a comfortable measure and let the browser balance the lines. */ .center > p, p.center, .band.center .col > p, .band.center .col-wide > p { max-width: 56ch; margin-left: auto; margin-right: auto; text-wrap: balance; } .center > .lede, .lede.center { max-width: 50ch; } /* an eyebrow above a centred heading should be centred too */ .center .fc-kicker, .fc-kicker.center, .center .ey { text-align: center; } /* headings keep their own balance, and never sit tight against their intro */ .band h2 + p, .band h2 + .lede { margin-top: 0.7em; } /* ---------- engagement timeline ---------- */ .tl { list-style: none; margin: 2.4rem 0 0; padding: 0; } .tl-item { display: grid; grid-template-columns: 168px 1fr; gap: 34px; position: relative; padding: 0 0 36px 0; } .tl-item::before { /* the rail, centred on the marker */ content: ""; position: absolute; left: 174px; top: 14px; bottom: -10px; width: 2px; background: var(--rule); } .tl-item.tl-last::before { display: none; } .tl-item::after { /* the marker, clear of the label */ content: ""; position: absolute; left: 168px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--carbon); } .tl-item.tl-last::after { background: var(--stamp); border-color: var(--stamp); } .tl-when { font-family: var(--mono); font-size: 0.78rem; color: var(--carbon); text-align: right; padding-right: 26px; line-height: 1.5; } .tl-when em { display: block; font-style: normal; font-size: max(0.7rem, 12px); color: var(--text-2); } .tl-body { padding-left: 8px; } .tl-body h3 { margin: 0 0 6px; font-size: 1.22rem; } .tl-body > p { color: var(--text-2); margin: 0 0 12px; max-width: 62ch; } .tl-body details summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 0.76rem; color: var(--stamp); padding: 4px 0; } .tl-body details summary::-webkit-details-marker { display: none; } .tl-body details summary::before { content: "+ "; } .tl-body details[open] summary::before { content: "\2013 "; } .tl-body details .spec { margin-top: 8px; } @media (max-width: 760px) { /* 30px under each step, four steps, on a component that is already a vertical list with a rule down its left. 20 reads the same. */ .tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; padding-bottom: 20px; } .tl-item::before { left: 6px; top: 16px; } .tl-item::after { left: 0; top: 4px; } .tl-when { text-align: left; padding-right: 0; } .tl-when em { display: inline; margin-left: 8px; } .tl-body { padding-left: 0; } } } /* ---------- softened edges ---------- */ /* The identity was built on square corners. Rounding them deliberately, through one token plus the handful of components that set their own geometry. */ .btn { border-radius: var(--radius); } .fc-track, .wf-canvas, .booking, .fc-tab, .wf-tab, .dd, .lc, .cc, .case, .person img, .signer img, .form input, .form textarea, .kicker, .branch > div, .node, .chip, .tile, .stat, .fit > div { border-radius: var(--radius); } .fc-tab, .wf-tab { border-radius: var(--radius) var(--radius) 0 0; } .chip, .menu-badge, .marquee-set span { border-radius: var(--radius-sm); } .person img, .signer img { border-radius: var(--radius-lg); } .station .ic, .wf-node rect { rx: 8; } .fc-shelf span { border-radius: var(--radius-sm); } /* ---------- tool marks in the marquee ---------- */ .tool { display: inline-flex; align-items: center; gap: 9px; } .tool-ic { width: 17px; height: 17px; fill: #C7CCD3; flex: none; } .marquee-tools .marquee-set span { padding: 0 18px; } /* the floor settles before it changes company, rather than cutting */ .fc-head, .fc-track { transition: opacity 420ms ease; } .fc.is-swapping .fc-head, .fc.is-swapping .fc-track { opacity: 0.18; } .fc.is-swapping .chip { opacity: 0; transition: opacity 300ms ease; } /* ---------- who you deal with ---------- */ .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1.6rem; border-top: 2px solid var(--carbon); } .role { padding: 22px 26px 24px 0; } .role + .role { border-left: 1px solid var(--rule); padding-left: 26px; } .role-tag { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); display: block; margin-bottom: 6px; } .role h3 { margin: 0 0 10px; font-size: 1.2rem; } .role p { font-size: 0.96rem; color: var(--text-2); margin: 0 0 10px; } .role-note { border-left: 3px solid var(--rule); padding-left: 12px; font-size: 0.92rem; } @media (max-width: 760px) { .roles { grid-template-columns: 1fr; } .role { padding: 20px 0; border-top: 1px solid var(--rule); } .role:first-child { border-top: 0; } .role + .role { border-left: 0; padding-left: 0; } } /* ---------- screens from the five businesses ---------- */ .shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 1.4rem + 1.6vw, 42px); margin: 2.8rem auto 0; text-align: left; } .shot { margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .shot.is-in { opacity: 1; transform: none; } .shot-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 1.2rem + 2vw, 46px); align-items: center; } .shot-img { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); overflow: hidden; line-height: 0; box-shadow: 0 1px 2px rgba(22, 24, 28, .05), 0 12px 28px -18px rgba(22, 24, 28, .35); } .shot-img img { display: block; width: 100%; height: auto; } .shot figcaption { padding-top: 16px; } .shot-wide figcaption { padding-top: 0; } .shot-tag { display: block; font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); letter-spacing: 0.01em; } /* --rule is a hairline colour and fails AA as a glyph: 1.35:1 on surface. #6E7073 clears 4.5:1 on both surface and field, which is the threshold these need because they shrink below large-text size on mobile. */ .shot-tag i { font-style: normal; color: #6E7073; margin: 0 6px; } .shot figcaption b { display: block; margin: 8px 0 8px; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; } .shot-wide figcaption b { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); } .shot figcaption p { margin: 0; font-size: 0.93rem; color: var(--text-2); line-height: 1.6; } .shot-wide figcaption p { font-size: 1rem; } .shots-note { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); margin: 26px auto 0; max-width: 58ch; } @media (max-width: 860px) { .shots { grid-template-columns: 1fr; max-width: 560px; } .shot-wide { grid-column: auto; grid-template-columns: 1fr; gap: 0; } .shot-wide figcaption { padding-top: 16px; } } @media (prefers-reduced-motion: reduce) { .shot { opacity: 1; transform: none; transition: none; } } /* ---------- phones ---------- Measured at 375px before writing any of this. Three things were actually broken: the services canvas rendered its labels at 5px, the tab grids ate a third of the screen, and the mono labels fell to 10.2px. Everything below fixes one of those, or a tap target too small to hit. */ @media (max-width: 760px) { /* The canvas is 1200 wide; squeezed into 335px its labels fell to 5px, and scrolling it sideways hid most of the path. ui.js turns it on its side instead, so it runs top to bottom at close to real size. */ /* The sideways canvas is only 340 units wide, so it scales up fast: left uncapped it reached 718px at 760, blowing the labels up to 25px. Holding it at 380 keeps one size from 375 all the way to the switch. */ .wf-canvas svg.wf-compact { max-width: 380px; margin: 0 auto; } .wf-compact .wf-node .wf-t { font-size: 14px; } .wf-compact .wf-node .wf-s { font-size: 12.3px; } /* Ten tabs in a two-column grid ran to 269px. One scrolling row is 60px and keeps the job you are looking at in view. */ .fc-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(44%, max-content); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 4px; } .fc-tab, .wf-tab { scroll-snap-align: start; min-height: 44px; } /* Nothing mono drops below 12px; under that it reads as texture, not words. */ .kicker, .fc-kicker, .fc-tag, .fc-result-label, .btn-note, .ways-note, .shots-note, .menu-badge, .grp-n, .role-tag, .shot-tag, .person .person-role, .tl-when, .foot, .station i, .num { font-size: max(0.75rem, 12px); } .station b { font-size: max(0.8rem, 13px); } .proc-step .num, .branch > div i, .branch > div span, .tl-when em { font-size: max(0.75rem, 12px); } /* Finger-sized targets. The nav comment said 24px, which is what it was. */ .nav-top { padding: 12px 4px; } .foot .fine, .foot .fine span, .foot .nav-legal a { font-size: max(0.75rem, 12px); } .foot a, .foot .nav-foot a, .foot .nav-legal a, .foot .nav-more a, .foot address a { display: inline-block; padding: 11px 0; } /* padding alone left these short; a min-height is what actually holds. */ .spec dd a, .foot .nav-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; } .btn { padding: 15px 24px; } .masthead .btn { padding: 13px 18px; } .way > a, .step > a, .person-body > a { padding: 12px 0; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .fc-tabs { scroll-snap-type: none; } } /* ---------- phones: less chrome, less air ---------- Measured at 375x812: the header held 126px and the booking bar 76px, a quarter of the screen before any content. Every band spent ~100px on padding, and the home page ran to 13 screens. The header now steps aside while you read down and comes back the moment you scroll up; the booking bar keeps the call to action in reach meanwhile. */ @media (max-width: 760px) { :root { --gap: 2.25rem; } .hero { padding-top: 2.75rem; } .masthead { transition: background 160ms linear, border-color 160ms linear, transform 220ms cubic-bezier(.4, 0, .2, 1); } .masthead.is-hidden { transform: translateY(-100%); } .foot { padding: 32px 20px; } .foot-in { gap: 18px; } .foot .logo { height: 60px; } .foot .fine { margin-top: 14px; } /* the gap between a section's intro and its content: 35-48px, now one step */ main :is(.fc, .wf, .ways, .turn, .steps-grid, .sectors, .fit, .people, .faq, .hubs) { margin-top: 24px; } .hero .lede { margin-bottom: 1.6rem; } main .sectors-note { margin-bottom: 28px; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .masthead { transition: none; } } /* ---------- pricing: one menu instead of six stacked bands ---------- Everything the page sells, visible at once, with a qualifier under every number so "$4,000 to $8,000" can never be read as per month. */ /* A grid, with the two cards in a row sharing a height. CSS columns balanced worse, not better: the tall cards cannot break, so one column took both. Stretching keeps the boxes aligned instead of leaving a ragged edge. */ .menu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 1rem + 1.6vw, 30px); text-align: left; } .menu-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(22px, 1rem + 1.4vw, 34px); } .menu-card-plain { background: none; } .menu-card > h2 { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.02em; margin: 0 0 8px; } .menu-card > h2 i { font-style: normal; color: #6E7073; margin: 0 4px; } .menu-sub { color: var(--text-2); font-size: 0.91rem; line-height: 1.6; margin: 0 0 20px; } .menu-head { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding-bottom: 9px; border-bottom: 2px solid var(--carbon); font-family: var(--mono); font-size: max(0.66rem, 12px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); } .menu-list { list-style: none; margin: 0; padding: 0; } .menu-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); } .menu-row:last-child { border-bottom: 0; padding-bottom: 0; } .menu-row b { display: block; font-size: 0.99rem; font-weight: 650; letter-spacing: -0.01em; } .menu-what { display: block; color: var(--text-2); font-size: 0.87rem; line-height: 1.55; margin-top: 4px; } .menu-price { text-align: right; white-space: nowrap; margin: 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.02em; color: var(--text); } .menu-price em { display: block; font-style: normal; font-family: var(--mono); font-size: max(0.66rem, 12px); font-weight: 400; color: var(--text-2); letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; } .menu-badge { display: inline-block; font-family: var(--mono); font-size: max(0.6rem, 12px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stamp); border: 1px solid var(--stamp-lt); border-radius: var(--radius-sm); padding: 2px 7px; margin-left: 8px; vertical-align: 2px; font-weight: 400; } .menu-more { margin-top: 10px; } .menu-more summary { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); cursor: pointer; padding: 4px 0; } .menu-more summary:hover { color: var(--text); } .menu-more ul { margin: 8px 0 0; padding-left: 1.1em; color: var(--text-2); font-size: 0.87rem; line-height: 1.6; } .menu-more li { margin-bottom: 4px; } @media (max-width: 900px) { .menu { grid-template-columns: 1fr; } } @media (max-width: 520px) { /* "$12,000 - $25,000" will not sit beside a name at this width. */ .menu-row { grid-template-columns: 1fr; gap: 10px; } .menu-price { text-align: left; } .menu-price em { display: inline; margin-left: 8px; } .menu-head { display: none; } } /* The phone block above is declared before the menu, and a media query adds no specificity, so these have to come after it to win. */ @media (max-width: 760px) { .menu-price em, .menu-more summary, .menu-badge, .menu-head, .menu-card > h2 i { font-size: max(0.75rem, 12px); } .menu-more summary { padding: 12px 0; } } /* ---------- how far through the article you are ---------- */ .readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--stamp); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; } /* ---------- the call to action, brought back on a phone ---------- */ .stickycta { display: none; } @media (max-width: 760px) { .stickycta { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px -18px rgba(22, 24, 28, .5); transform: translateY(105%); transition: transform 260ms cubic-bezier(.4,0,.2,1); } .stickycta.is-up { transform: none; } /* The LeadConnector bubble is fixed at the bottom right, directly over the right half of this bar's button. Keep the button clear of it. */ .stickycta { padding-right: 86px; } .stickycta span { flex: 1; font-family: var(--mono); font-size: 12px; line-height: 1.35; color: var(--text-2); } .stickycta .btn { flex: none; padding: 13px 18px; font-size: 0.9rem; } /* The bar sits over the last of the page, so give the page somewhere to end. */ body { padding-bottom: 76px; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .stickycta { transition: none; } } /* ---------- the sectors we have already built in ---------- */ .sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 0; margin: 2.2rem auto 0; text-align: left; border-top: 2px solid var(--carbon); } .sector { display: block; text-decoration: none; color: inherit; padding: 18px 18px 20px 0; border-bottom: 1px solid var(--rule); transition: background 150ms ease; } .sector + .sector { border-left: 1px solid var(--rule); padding-left: 18px; } .sector:hover { background: var(--field); } .sector b { display: block; font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 6px; } .sector span { display: block; font-size: 0.85rem; color: var(--text-2); line-height: 1.5; } .sector i { display: block; font-style: normal; font-family: var(--mono); font-size: max(0.68rem, 12px); color: var(--stamp); margin-top: 10px; line-height: 1.4; } .sectors-note { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); margin: 18px auto 2.6rem; max-width: 62ch; } @media (max-width: 900px) { .sector + .sector { border-left: 0; padding-left: 0; } .sector { padding-right: 0; } } /* Two to a row from a large phone up to a tablet, rather than whatever auto-fit lands on (four and one at 900px). Five sectors leave one over; it sits centred under the pairs instead of hanging off the left. */ @media (min-width: 412px) and (max-width: 900px) { .sectors { grid-template-columns: repeat(2, 1fr); column-gap: 24px; } .sector:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); text-align: center; } } /* ---------- the five builds, in detail ---------- */ .builds { display: grid; gap: clamp(46px, 2rem + 4vw, 78px); text-align: left; } .build { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 1rem + 2.4vw, 48px); align-items: start; } /* The screenshot is the evidence, so once there is room it takes the wider half. That also pulls the prose back to the measure the rest of the site reads at: an even split left it near 70 characters a line, this gives 65. Below 1100px there is no room to give away and the halves stay even. */ @media (min-width: 1100px) { .build { grid-template-columns: 1.16fr 1fr; } .build:nth-child(even) { grid-template-columns: 1fr 1.16fr; } } .build:nth-child(even) .build-shot { order: 2; } .build-shot { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); overflow: hidden; line-height: 0; box-shadow: 0 1px 2px rgba(22, 24, 28, .05), 0 12px 28px -18px rgba(22, 24, 28, .35); } .build-shot img { display: block; width: 100%; height: auto; } .build-tag { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); margin: 0; } .build-tag i { font-style: normal; color: #6E7073; margin: 0 6px; } .build-body > h2 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.62rem); letter-spacing: -0.02em; margin: 8px 0 18px; } .build-spec { margin: 0; } .build-spec dt { font-family: var(--mono); font-size: max(0.68rem, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--rule); } .build-spec dd { margin: 6px 0 14px; font-size: 0.93rem; line-height: 1.62; color: var(--text-2); } .build-spec dd:last-child { margin-bottom: 0; } @media (max-width: 900px) { .build { grid-template-columns: 1fr; } .build:nth-child(even) .build-shot { order: 0; } } @media (max-width: 760px) { .build-tag, .build-spec dt { font-size: max(0.7rem, 12px); } .build-spec dd { font-size: 0.95rem; } } /* Audit, 21 September 2026: the last elements under the site's own phone standards, measured by rendering every page at 375px. The menu links were 41px tall against a 44px tap target; these labels rendered at 10 to 12px against the 12px floor. */ @media (max-width: 760px) { .nav-top { min-height: 44px; display: inline-flex; align-items: center; } .nav-foot a { min-height: 44px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; } .tl-body details summary { min-height: 44px; display: flex; align-items: center; } .fc-shelf p, .sector i, .signer span { font-size: max(0.7rem, 12px); } } /* Held until scrolled into view; ui.js adds and removes .await. */ .await, .await * { animation-play-state: paused !important; } /* ---------- footer: four columns with headings ---------- It was fourteen links in two unlabelled rows, the second of which held the entire content estate in 0.85rem grey, and the whole thing closed the page in the same colour as the page. Now it names its groups, carries the invitation, and its links are finger-sized on a desktop too, not only on a phone. */ .foot-grid { max-width: var(--col-wide); margin: 0 auto; /* The brand track was minmax(260px, 1.25fr), which resolves to 260-270px between 1081 and 1440 -- three pixels narrower than the inbox address needs at 15px. So the one string on the site that must not break was breaking, mid-word, on every desktop. The track is wide enough for it now at every width where this five-column layout applies. */ display: grid; grid-template-columns: minmax(288px, 1.5fr) repeat(4, 1fr); gap: 40px 32px; } .foot-brand .logo { height: 72px; } .foot-brand p { margin: 14px 0 18px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 32ch; } .foot-brand address { font-style: normal; font-size: 15px; line-height: 1.6; margin-bottom: 20px; } /* The address and the inbox were underlined in the browser's own weight and colour, which is the one thing on the page that looks unstyled. */ .foot-brand address a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; } .foot-brand address a:hover { text-decoration-color: var(--stamp); } .foot-brand .btn { font-size: 0.9rem; } .foot-col { display: flex; flex-direction: column; align-items: flex-start; } /* The four groups are lists, so a screen reader announces how many links are in each one before reading them. The marker and indent go, the column behaviour does not change. menu.js moves this whole