/* ============================================================ 4PHASE CONSULTING The visual system is the one built for the Turning Over site — its tokens, its spacing rhythm, its component behaviour and its restraint — carrying the 4Phase palette and the three 4Phase typefaces. Two rules survive the change of brand because they are about behaviour rather than looks: - One primary action per screen. Here that is the blue button, and it says "start a conversation". - Nothing is carried by colour alone. A phase is a number and a word before it is a lit bar. Both themes are first class. Every colour is defined on :root and redefined once, together, in the dark block — never a value that exists in only one scheme. ============================================================ */ /* ---------- fonts: self-hosted ------------------------------------ Nothing on this site is fetched from a third party, fonts included. Latin and latin-extended subsets of the variable files, so every weight in the system costs one download per subset. */ @font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap; src:url("/assets/fonts/lora-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap; src:url("/assets/fonts/lora-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 500;font-display:swap; src:url("/assets/fonts/inter-tight-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 500;font-display:swap; src:url("/assets/fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Fragment Mono ships one weight. The 400 file answers to 500 as well, so the label style can ask for medium without the browser faking a bold that would thicken the tracked caps. */ @font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400 500;font-display:swap; src:url("/assets/fonts/fragment-mono-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400 500;font-display:swap; src:url("/assets/fonts/fragment-mono-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ============================================================ TOKENS ============================================================ */ :root{ color-scheme:light dark; /* ---- palette ---- The blue is the one in the mark. The navy is the deck's ground, and it is where the call to action and the footer live. */ --accent:#1d5eff; --accent-strong:#1b4fd8; /* the same blue, darkened for hover and for link text */ --accent-quiet:rgba(29,94,255,.08); /* Two colours beside the blue, each with one job. Blue is the work, pink is your decision, cyan is what we measure. Pink marks what you get and what you decide — never a label on a section. Four places, and they are the whole list: - the decision panel on a phase page, where an engagement can end - the quotes the proposition rests on, all of which are about stopping - what a level includes: the chips on /engagement/ - the word "required" on a form, and every hover state, which is the one moment a control can carry colour without carrying noise An eyebrow is a label, not a decision, so it stays quiet. The text form is deepened because the bright pink as type on a light ground is 3.1:1. --figure is the colour a measurement takes — the hero figures and the step numerals. At 40px and up a numeral is large text, held to 3:1 rather than 4.5:1, so it can run lighter than the blue the rest of the page uses. It takes the lightest blue each ground allows: #3d78ff on the page and on a card, and --accent-light on every dark ground, where a light blue is the only one that does not sink into the navy. The one place that does not hold is the 11px counter in the page contents, which is small text and takes --accent-strong instead. */ --accent-2:#fa4a6e; --accent-2-text:#c2143f; /* 5.5:1 on the page ground */ --accent-2-strong:#d81b48; /* a fill that carries a white label at 5:1 */ --accent-2-quiet:rgba(250,74,110,.10); --accent-light:#7fb2ff; /* the light blue a numeral takes on a dark ground */ --figure:#3d78ff; /* 3.6:1 on the page, 3.3:1 on a card — large text and graphics */ --pm-lit:var(--accent); --navy:#051835; --navy-lift:#0b2144; /* the navy one step up, for a panel on the dark band */ --sky:#a8b3cc; /* the quiet blue-grey used on navy */ --bg:#f4f4f6; --surface:#ffffff; --surface-sunk:#eceef3; /* a recessed panel on the page ground */ --inverse-bg:#051835; --ink:#121529; --ink-muted:#4a5270; /* 7.0:1 on the page ground */ --ink-reverse:#eef1f7; --ink-reverse-muted:#a8b3cc; /* 8.4:1 on the navy band */ --rule:rgba(18,21,41,.13); --rule-strong:rgba(18,21,41,.22); --rule-reverse:rgba(238,241,247,.20); --rule-input:#6f7691; /* 3.6:1 on white — a field boundary is a non-text component */ --veil:rgba(18,21,41,.05); /* the tint that stands in for a card on the page ground */ --veil-reverse:rgba(238,241,247,.06); --error-ink:#b3261e; --wash-back:#f4f4f6; /* the ground the hero shader paints onto */ /* The arrow on every call to action. A mask rather than a character: the subset fonts carry no U+2192, so a literal arrow would fall back to whatever the operating system offers and change shape from machine to machine. */ --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ---- typography ---- Fraunces for display, DM Sans for body, DM Mono for labels and figures. The same three as the 4Phase report system, so a report and the website read as one brand. */ --font-display:"Lora",Georgia,"Iowan Old Style",serif; --font-body:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; /* Labels are words, and words on this site are set in the body face. A mono eyebrow over every section is a look rather than a reason — the mono stays where it does actual work, on the figures in the pricing table, where the columns have to line up. */ --font-label:var(--font-body); --text-caption:12.5px; --leading-caption:1.2; --tracking-caption:.04em; --text-body-sm:14px; --leading-body-sm:1.43; --tracking-body-sm:.018em; --text-body:16px; --leading-body:1.5; --text-body-lg:24px; --leading-body-lg:1.17; --text-lede:19px; --leading-lede:1.5; --text-heading-sm:24px; --leading-heading-sm:1.17; --tracking-heading-sm:-.063em; --text-heading:32px; --leading-heading:1.13; --tracking-heading:-.023em; --text-heading-lg:40px; --leading-heading-lg:1.1; --tracking-heading-lg:-.05em; --text-display:64px; --leading-display:1.06; --tracking-display:-.047em; --weight-light:300; --weight-regular:400; --weight-medium:500; /* ---- spacing ---- */ --spacing-4:4px; --spacing-6:6px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-20:20px; --spacing-24:24px; --spacing-32:32px; --spacing-40:40px; --spacing-48:48px; --spacing-64:64px; --spacing-80:80px; --spacing-120:120px; --spacing-160:160px; /* ---- layout ---- The rhythm is the brand signal: sections breathe at 120px and step down through the scale at each breakpoint, never below 48px. --measure holds prose to a reading length; headings get a much tighter one of their own, or a section heading sets as one enormous line while the standfirst under it wraps at 44ch and the two stop looking related. */ --page-max-width:1440px; --page-padding:var(--spacing-64); --section-gap:120px; --card-padding:28px; --element-gap:16px; --header-h:80px; --measure:66ch; --measure-heading:22ch; /* ---- radius ---- The same 4px scale the spacing runs on, one step up at every size: 12 for the small things, 16 for a card, 24 for a panel. Controls are fully round — a button is the one shape on the page that should read as pressable at a glance. */ --radius-4:4px; --radius-8:8px; --radius-12:12px; --radius-16:16px; --radius-20:20px; --radius-24:24px; --radius-circle:9999px; --radius-small:var(--radius-12); --radius-cards:var(--radius-16); --radius-large:var(--radius-24); /* ---- shadow ---- */ --shadow-nav:0 4px 18px -6px rgba(5,24,53,.16); --shadow-card:0 18px 40px -28px rgba(5,24,53,.45); /* ---- motion ---- Linear is right for a colour fade and wrong for anything that moves, so the things that travel get an easing of their own. */ --duration-card-hover:200ms; --easing-card-hover:ease; --duration-ui:280ms; --easing-ui:linear; --duration-reveal:340ms; --easing-reveal:cubic-bezier(.32,.72,0,1); } @media (prefers-color-scheme:dark){ :root{ /* The same blue as the light theme, not a tint of it. A pale accent on a dark ground reads as washed out, and the mark's blue is legible here: 3.8:1 on the page ground, which carries a button fill, a 40px numeral or a drawn arc, while small link text takes --accent-strong below at 5.6:1. */ --accent:#1d5eff; --accent-strong:#4d84ff; --accent-quiet:rgba(29,94,255,.14); --accent-2:#fa4a6e; --accent-2-text:#fa4a6e; /* 5.8:1 on the dark page ground */ --accent-2-strong:#d81b48; --accent-2-quiet:rgba(250,74,110,.12); --navy:#0b1526; --navy-lift:#132241; --sky:#9aa6c2; --figure:var(--accent-light); /* 8.6:1 on the dark page ground */ --bg:#080d18; --surface:#0e1626; --surface-sunk:#0b1220; --inverse-bg:#0d1a30; --ink:#eef1f7; --ink-muted:#9aa6c2; --ink-reverse:#eef1f7; --ink-reverse-muted:#9aa6c2; --rule:rgba(238,241,247,.14); --rule-strong:rgba(238,241,247,.24); --rule-reverse:rgba(238,241,247,.16); --rule-input:#7b86a3; --veil:rgba(238,241,247,.05); --veil-reverse:rgba(238,241,247,.05); --error-ink:#ff9b93; --wash-back:#080d18; /* On a dark page the closing band cannot be the page ground with a different name, so it steps up rather than down and takes a hairline to mark the join. */ --shadow-nav:0 4px 18px -6px rgba(0,0,0,.6); --shadow-card:0 18px 40px -28px rgba(0,0,0,.8); } } /* ============================================================ BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} *::details-content{transition-duration:.01ms !important} } ::selection{background:var(--navy);color:#eef1f7} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-body); font-weight:var(--weight-regular); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } /* Fraunces at 400 for every heading, never bold. The optical size axis is set high so large text keeps the fine, drawn contrast the report system uses, and the negative tracking is what stops it feeling loose. */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:var(--weight-regular); color:var(--ink); text-wrap:balance; overflow-wrap:break-word; margin:0 0 var(--spacing-16); } h1{font-size:clamp(var(--text-heading),1.9rem + 2.2vw,var(--text-display));line-height:var(--leading-display);letter-spacing:var(--tracking-display)} h2{font-size:clamp(26px,1.5rem + 1vw,var(--text-heading-lg));line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg)} h3{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm)} h4,h5,h6{font-size:var(--text-body-lg);line-height:var(--leading-body-lg);letter-spacing:-.015em} /* A headline is one voice the whole way through. The phrase the sentence turns on is doing that work with the words; setting it in italic blue as well says it twice and reads as decoration. */ h1 em,h2 em,h3 em{font-style:normal;font-weight:inherit;color:inherit} p{margin:0 0 var(--spacing-20)} strong,b{font-weight:var(--weight-medium)} a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px; transition:color var(--duration-ui) var(--easing-ui)} a:hover{color:var(--accent-2-text)} img,svg{max-width:100%} hr{border:0;border-top:1px solid var(--rule);margin:var(--spacing-48) 0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-small)} /* ============================================================ LAYOUT ============================================================ */ .wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--page-padding)} .narrow{max-width:var(--measure)} .wide{max-width:820px} /* A stack of questions reads as one column rather than as a column set against an empty right half, so it sits on the page centre with its heading over the top of it. */ .faqs{max-width:820px;margin-inline:auto} .section-head--center{margin-inline:auto;text-align:center} .section-head--center h2{margin-inline:auto} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#eef1f7; padding:var(--spacing-12) var(--spacing-20);z-index:200;border-radius:0 0 var(--radius-small) 0;text-decoration:none} .skip:focus{left:0;top:0} /* Sections stack with no decorative dividers — a 1px rule in the ink tint is the only thing that ever marks a break. */ .section{padding:var(--section-gap) 0} .section--tight{padding:var(--spacing-80) 0} .section--flush{padding-top:0} /* A lifted band: the page ground steps up to the card surface, so a run of sections has a light and a lighter, and the eye gets a join without a line being drawn. */ .section.lift{background:var(--surface)} /* The navy band. Two in a row are one dark block as far as the eye is concerned, so the join keeps one gap rather than two. */ .section.inverse{background:var(--inverse-bg);color:var(--ink-reverse);--figure:var(--accent-light)} .section.inverse + .section.inverse{padding-top:var(--spacing-40)} .section.inverse:last-child{padding-bottom:var(--spacing-80)} .section.inverse h1,.section.inverse h2,.section.inverse h3,.section.inverse h4{color:var(--ink-reverse)} .section.inverse a{color:var(--ink-reverse)} .section.inverse a:hover{color:var(--accent-2-text)} .section.inverse .lede,.section.inverse .muted{color:var(--ink-reverse-muted)} .section.inverse .eyebrow{color:var(--sky)} .section.inverse :focus-visible{outline-color:var(--accent)} .section.inverse hr{border-color:var(--rule-reverse)} /* A page head. Element-qualified where it needs to outrank a band modifier, because the failure is silent: 80px onto 120px reads as a hole, and 0 reads as a collision. */ .pagehead{padding-top:var(--spacing-80)} .pagehead + section.section{padding-top:var(--spacing-48)} .wash + section.section{padding-top:var(--spacing-80)} .section-head{margin-bottom:var(--spacing-48);max-width:var(--measure)} .section-head h2{max-width:var(--measure-heading)} .section-head > :last-child{margin-bottom:0} /* A light panel lifted inside a dark surround — the composition the call to action band is built on. */ .lifted{background:var(--surface);color:var(--ink);border-radius:var(--radius-large);padding:var(--spacing-64)} .lifted h2,.lifted h3,.lifted p{color:var(--ink)} .lifted .eyebrow,.lifted .muted{color:var(--ink-muted)} .lifted a{color:var(--ink)} .lifted :focus-visible{outline-color:var(--accent)} .lifted > :last-child{margin-bottom:0} .grid{display:grid;gap:var(--element-gap)} .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid.gphase{gap:var(--spacing-20)} /* Two columns with air between them, for a heading beside a block of prose rather than for cards. The text column takes a measure of its own so the line length does not follow the window. */ .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--spacing-80);align-items:start} .split > div:not(.card):not(.panel){max-width:38rem} /* A quote pinned to the top of a tall column leaves a half-page of nothing under it. Centred, it sits against the middle of the argument it is quoting. */ .split--middle{align-items:center} .centred{text-align:center} /* ============================================================ TYPE ROLES ============================================================ */ /* DM Mono, all caps, tracked. Category labels and functional metadata only, never prose. */ .eyebrow,.label{ font-family:var(--font-label);font-weight:var(--weight-medium); font-size:var(--text-caption);line-height:var(--leading-caption); letter-spacing:var(--tracking-caption); color:var(--ink-muted);margin:0 0 var(--spacing-20);display:block} .lede{font-size:var(--text-lede);line-height:var(--leading-lede);color:var(--ink);max-width:46ch} .small{font-size:var(--text-body-sm);line-height:var(--leading-body-sm)} .muted{color:var(--ink-muted)} /* ============================================================ HEADER A bar that floats over the page, takes the page ground and a soft shadow once anything has scrolled, and tucks away going down. ============================================================ */ .site-header{position:sticky;top:0;z-index:100;background:transparent; transition:background var(--duration-ui) var(--easing-ui), box-shadow var(--duration-ui) var(--easing-ui), transform var(--duration-ui) var(--easing-ui)} .site-header.is-scrolled{background:var(--bg);box-shadow:var(--shadow-nav)} /* Out of the way going down, back on the way up. It returns whenever focus enters it, so a keyboard user is never tabbing into something parked off screen. */ .site-header.is-tucked{transform:translateY(-100%)} /* Without JavaScript there is no scroll listener, so the bar simply carries its ground from the start rather than floating over the text it would otherwise overlap. */ html:not(.js) .site-header{background:var(--bg);border-bottom:1px solid var(--rule)} .header-inner{display:flex;align-items:center;justify-content:space-between; gap:var(--spacing-24);min-height:var(--header-h)} .brand{display:inline-flex;align-items:center;min-height:44px; text-decoration:none;color:var(--ink);flex-shrink:0; transition:opacity var(--duration-ui) var(--easing-ui)} .brand:hover{opacity:.72} /* The wordmark carries its own colour: blue arcs, ink lettering, and a second file with the lettering reversed for the navy footer and the dark theme. Width comes from the artwork's own ratio, so the header reserves its space before the file has loaded. */ .brand__logo{display:block;width:auto;height:34px} .site-footer .brand__logo{height:44px} @media (prefers-color-scheme:dark){ /* The light-ground artwork sets its lettering in near-black, which is invisible on the dark page. The header takes the reversed file the footer already uses. */ .site-header .brand__logo{content:url("/assets/img/logo-inverse.svg")} } /* The phase indicator: the mark with one arc lit. */ .phasemark{display:block;width:22px;height:22px;flex:none;color:var(--ink-muted)} /* On a phase card the mark is the card's subject, not an annotation on it, so it is set at heading scale. */ .ph-head .phasemark{width:36px;height:36px} .phasemark--1{--pm-1:var(--pm-lit);--pm-1-o:1} .phasemark--2{--pm-2:var(--pm-lit);--pm-2-o:1} .phasemark--3{--pm-3:var(--pm-lit);--pm-3-o:1} .phasemark--4{--pm-4:var(--pm-lit);--pm-4-o:1} .section.inverse .phasemark,.ph-head .phasemark{color:var(--ink-reverse-muted)} .site-nav{margin-left:auto} .site-nav ul{display:flex;align-items:center;gap:var(--spacing-4);list-style:none;margin:0;padding:0;flex-wrap:wrap} .site-nav a{font-size:var(--text-body-sm);color:var(--ink);text-decoration:none; padding:var(--spacing-8) var(--spacing-12);border-radius:var(--radius-small); display:inline-flex;align-items:center;min-height:44px; transition:background var(--duration-ui) var(--easing-ui),color var(--duration-ui) var(--easing-ui)} .site-nav a:hover{background:var(--veil);color:var(--accent-2-text)} .site-nav a[aria-current="page"]{background:var(--veil);font-weight:var(--weight-medium)} /* The one action in the bar. It restates its colours because the nav link rule above is the more specific of the two. */ .site-nav .nav-cta,.site-nav .nav-cta:hover{background:var(--accent);color:#fff;font-weight:var(--weight-medium); margin-left:var(--spacing-8);padding-inline:var(--spacing-20);border-radius:var(--radius-circle)} .site-nav .nav-cta:hover{background:var(--accent-2-strong)} .navtoggle{display:none;align-items:center;justify-content:center;background:transparent; border:1px solid var(--rule-strong);border-radius:var(--radius-small); width:44px;height:44px;padding:0;cursor:pointer;color:var(--ink); transition:background var(--duration-ui) var(--easing-ui)} /* Guarded: on a touch screen :hover latches after a tap, so the button would keep the hover fill while the menu is open and read as disabled. The open state is styled deliberately instead. */ @media (hover:hover){.navtoggle:hover{background:var(--veil)}} .navtoggle[aria-expanded="true"]{background:var(--veil);border-color:var(--ink)} .navtoggle__bars{width:16px;height:1px;background:currentColor; box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;display:block} /* ============================================================ BUTTONS AND LINKS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8); font-family:var(--font-body);font-weight:var(--weight-medium); font-size:var(--text-body);line-height:1.2; padding:var(--spacing-16) var(--spacing-32); border-radius:var(--radius-circle);border:1px solid transparent; min-height:52px;text-decoration:none;cursor:pointer; transition:background var(--duration-ui) var(--easing-ui), border-color var(--duration-ui) var(--easing-ui), transform var(--duration-ui) var(--easing-ui), color var(--duration-ui) var(--easing-ui)} /* Every call to action carries the same arrow, so the shape of the thing says it goes somewhere before the label has been read. It slides on hover: the movement is the affordance. */ .btn::after{content:"";flex:none;width:1.05em;height:1.05em;margin-left:var(--spacing-4); background:currentColor; -webkit-mask:var(--icon-arrow) center/contain no-repeat; mask:var(--icon-arrow) center/contain no-repeat; transition:transform var(--duration-ui) var(--easing-ui)} @media (hover:hover){.btn:hover::after{transform:translateX(4px)}} .site-nav .btn::after{content:none} .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:var(--accent-2-strong);border-color:var(--accent-2-strong);color:#fff} @media (hover:hover){.btn-primary:hover{transform:translateY(-1px)}} .btn-primary:active{transform:translateY(0)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)} .btn-ghost:hover{background:var(--veil);color:var(--accent-2-text);border-color:var(--accent-2)} .btn-sm{padding:var(--spacing-8) var(--spacing-16);font-size:var(--text-body-sm);min-height:44px} /* Each variant restates its ink on the navy band, where the reversed link colour is otherwise the more specific rule. */ .section.inverse .btn-primary,.section.inverse .btn-primary:hover{color:#fff} .section.inverse .btn-ghost{color:var(--ink-reverse);border-color:var(--rule-reverse)} .section.inverse .btn-ghost:hover{background:rgba(238,241,247,.10);color:var(--accent-2);border-color:var(--accent-2)} .btn-row{display:flex;gap:var(--element-gap);flex-wrap:wrap;align-items:center;margin:var(--spacing-32) 0 0} .btn-row:first-child{margin-top:0} /* Tertiary: an underlined link, never a third button. */ .arrow-link{ font-family:var(--font-body);font-weight:var(--weight-medium); font-size:var(--text-body-sm);color:var(--accent-strong); display:inline-flex;align-items:center;gap:var(--spacing-8);min-height:44px; text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .arrow-link::after{content:"";width:1em;height:1em;background:currentColor; -webkit-mask:var(--icon-arrow) center/contain no-repeat; mask:var(--icon-arrow) center/contain no-repeat; transition:transform var(--duration-ui) var(--easing-ui)} .arrow-link:hover{color:var(--accent-2-text)} @media (hover:hover){.arrow-link:hover::after{transform:translateX(4px)}} .section.inverse .arrow-link{color:var(--ink-reverse)} .section.inverse .arrow-link:hover{color:var(--accent-2-text)} /* A link that ends a card sits in a 44px target wrapped around 19px of text, so a third of that box is empty space stacked on top of the card's own padding. Pulled back by the difference, so the gap under the words is the padding and nothing else. */ .card > .arrow-link:last-child,.panel > .arrow-link:last-child{margin-bottom:-12px} /* ============================================================ TAGS ============================================================ */ /* A chip is a name, not a piece of data: set in the body face like everything else that is read as words. The mono face is kept for the things that really are labels and figures — eyebrows, table heads, field labels. Fully round, so a row of them reads as tokens rather than as a row of little boxes. */ .tag,.tag-soft{ display:inline-flex;align-items:center;gap:var(--spacing-8); font-family:var(--font-body);font-size:var(--text-body-sm);line-height:1.2; letter-spacing:0; padding:var(--spacing-8) var(--spacing-16);border-radius:var(--radius-circle); background:var(--veil);white-space:nowrap;color:var(--ink-muted)} .tag-soft{background:var(--accent-2-quiet);border-color:transparent;color:var(--accent-2-text)} .section.inverse .tag{background:var(--veil-reverse);color:var(--ink-reverse-muted)} /* ============================================================ CARDS ============================================================ */ /* A light surface always states its own ink: inside the navy band the section colour would otherwise cascade in and leave reversed text on a white ground. */ .card,.panel,.enquiry{color:var(--ink)} .section.inverse .card h2,.section.inverse .card h3,.section.inverse .card p, .section.inverse .panel h2,.section.inverse .panel h3,.section.inverse .panel p{color:var(--ink)} .section.inverse .card a,.section.inverse .panel a{color:var(--accent-strong)} .section.inverse .card :focus-visible,.section.inverse .panel :focus-visible{outline-color:var(--accent)} .card{ position:relative; background:var(--surface); border-radius:var(--radius-cards); padding:var(--card-padding); transition:transform var(--duration-card-hover) var(--easing-card-hover), border-color var(--duration-card-hover) var(--easing-card-hover), box-shadow var(--duration-card-hover) var(--easing-card-hover)} .card{box-shadow:0 1px 2px rgba(5,24,53,.05),0 12px 28px -22px rgba(5,24,53,.28)} @media (prefers-color-scheme:dark){.card,.phase-card{box-shadow:none}} .card > :last-child{margin-bottom:0} .card h3{margin-bottom:var(--spacing-12)} .card p{font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--ink-muted)} /* On the lifted band the card cannot be the surface colour or it disappears into it, so the two swap: the band takes the surface and the card takes the page ground. */ .section.lift .card{background:var(--bg)} /* Only a card that is itself a link lifts on hover. A static panel that rises under the pointer promises a click that is not there. */ a.card:hover,.card:has(> a:only-of-type):hover{transform:translateY(-3px)} .grid.g2 > .card{padding:var(--spacing-40)} /* A quieter card: the same shape, tinted rather than filled, for a block that belongs to the section around it rather than standing apart from it. */ .panel{background:var(--veil);border-radius:var(--radius-cards);padding:var(--spacing-40)} .panel > :last-child{margin-bottom:0} .section.lift .panel{background:var(--bg)} /* Frosted, not merely tinted, on the navy band: the contour map runs behind it, and a flat tint lets every line through at full definition so the heading sits on terrain rather than on a surface. */ .section.inverse .panel{background:rgba(238,241,247,.07); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .section.inverse .panel h2,.section.inverse .panel h3{color:var(--ink-reverse)} .section.inverse .panel p,.section.inverse .panel .prose p{color:var(--ink-reverse)} .section.inverse .panel .eyebrow{color:var(--sky)} .section.inverse .panel a{color:var(--ink-reverse)} /* A list inside a card is a set of names, not prose: the browser's disc and its indent push every line away from the heading above it, which is the one thing they should line up with. Flush left, and the marker is a short rule in the accent — the same mark the site uses for a phase's methods. */ .card ul{list-style:none;padding:0;margin:var(--spacing-16) 0 0; font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--ink-muted)} .card ul li{position:relative;padding-left:var(--spacing-20);margin-bottom:var(--spacing-8)} .card ul li:last-child{margin-bottom:0} .card ul li::before{content:"";position:absolute;left:0;top:.62em; width:8px;height:1px;background:var(--accent);opacity:.7} .section.inverse .card ul{color:var(--ink-reverse-muted)} /* A card whose body is a list wants its heading a step smaller: at 24px over four short items the heading outweighed the card. */ .grid.g4 .card h3{font-size:var(--text-body-lg);letter-spacing:-.015em} /* A statement the page makes on its own behalf, in the accent rather than in the neutral tint, so it does not read as one more content card. It is a sentence, so it takes a reading measure rather than the full width of the grid above it, and it stands clear of that grid rather than butting into it. */ .note{background:var(--accent-quiet);border:0;border-left:3px solid var(--accent); border-radius:0 var(--radius-cards) var(--radius-cards) 0; padding:var(--spacing-24) var(--spacing-32);margin-top:var(--spacing-24); max-width:var(--measure); font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--ink)} .note > :last-child{margin-bottom:0} .section.inverse .note{background:rgba(238,241,247,.07);border-left-color:var(--sky);color:var(--ink-reverse); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* ============================================================ THE HERO WASH A blue gradient that drifts behind the opening of a page. Drawn in CSS rather than fetched: two soft plates on their own slow loops, blurred past the point where either edge is legible, so what moves is the light rather than a shape. Where WebGL is available a grain-gradient canvas paints over the same box and takes it further; where it is not, this is what there is, and it is a finished thing rather than a fallback. It is pulled up behind the header, which is transparent until the page moves, so the wash starts at the top of the window rather than under the bar. ============================================================ */ .wash{position:relative;isolation:isolate} /* The opening block can be a screen in its own right, with whatever sits at its floor pinned there by an auto margin. Below that height it simply grows, so a long page head is never clipped. */ .wash--hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h))} .wash--hero > *{width:100%} .wash__plate{position:absolute;z-index:-1;pointer-events:none;overflow:hidden; left:0;right:0;bottom:0;top:calc(var(--header-h) * -1); background:var(--wash-back); /* Faded out at the foot, or the plate ends in a straight horizontal cut where the wash meets the page ground below. */ -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 97%); mask-image:linear-gradient(to bottom,#000 55%,transparent 97%)} .wash__plate::before,.wash__plate::after{content:"";position:absolute;inset:-25%; filter:blur(44px);will-change:transform} /* Two colours, kept apart. Every extra translucent layer over a dark ground mixes down toward grey, so there are four stops, each near its own value and each falling off quickly — the blue arriving from the top right, the pink answering it from the far side. */ .wash__plate::before{ background: radial-gradient(30% 34% at 82% 12%,rgba(29,94,255,.92),transparent 62%), radial-gradient(22% 26% at 99% 44%,rgba(29,94,255,.66),transparent 66%); animation:wash-drift-a 34s ease-in-out infinite alternate} .wash__plate::after{ background: radial-gradient(17% 19% at 97% 3%,rgba(61,120,255,.8),transparent 68%), radial-gradient(13% 15% at 68% 94%,rgba(250,74,110,.7),transparent 70%); animation:wash-drift-b 46s ease-in-out infinite alternate} @keyframes wash-drift-a{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-6%,4%,0) scale(1.12)}} @keyframes wash-drift-b{ from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(5%,-5%,0) scale(1)}} @media (prefers-color-scheme:dark){ .wash__plate::before{background: radial-gradient(30% 34% at 82% 12%,rgba(29,94,255,.98),transparent 62%), radial-gradient(22% 26% at 99% 44%,rgba(20,72,220,.86),transparent 66%)} .wash__plate::after{background: radial-gradient(17% 19% at 97% 3%,rgba(61,120,255,.86),transparent 68%), radial-gradient(13% 15% at 68% 94%,rgba(250,74,110,.74),transparent 70%)} } /* The shader library injects its own positioning in a