/* ===== assets/css/tokens.css ===== */
/* ══════════════════════════════════════════════════════════════════
PA-IQ DESIGN TOKENS
The only file that defines a raw colour, size or shadow value.
Everything else in the site refers to these variables, so a brand
change happens here and nowhere else.
══════════════════════════════════════════════════════════════════ */
:root{
/* ── Core brand anchors, sampled from the PA-IQ logo ── */
--paiq-navy:#004860; /* deep navy-teal — headlines, primary buttons */
--paiq-teal:#006c78; /* teal — links, accents, active states */
--paiq-green:#2e8b3d; /* green — the second half of the logo mark */
/* ── Supporting blues, extending the navy toward light ── */
--blue-700:#0a5a8a;
--blue-600:#1273b0;
--blue-500:#2f92cf;
--blue-300:#8fc6e8;
--blue-100:#dceefa;
--blue-050:#f0f8fd;
/* ── Supporting greens ── */
--green-600:#2e8b3d;
--green-500:#43a355;
--green-300:#9bd3a6;
--green-100:#dff2e4;
--green-050:#f2faf4;
/* ── Neutrals: bright healthcare, not grey SaaS ── */
--white:#ffffff;
--paper:#fbfdfe; /* page ground — a hint of blue, never flat grey */
--mist:#f2f7fa; /* alternating section ground */
--ink:#0d2b38; /* body text — navy-biased, never pure black */
--ink-2:#3f5964; /* secondary text */
--ink-3:#6b828d; /* muted text, captions */
--ink-4:#9db0b9; /* faint text, disabled */
--line:#dbe7ee; /* hairlines and card borders */
--line-soft:#eaf2f6;
/* ── Status (used only inside application previews) ── */
--status-ok:#2e8b3d;
--status-watch:#c77c11;
--status-act:#c0392f;
/* ── Gradients ── */
--grad-brand:linear-gradient(90deg,var(--paiq-green) 0%,var(--paiq-teal) 100%);
--grad-wash:linear-gradient(180deg,var(--blue-050) 0%,var(--white) 60%);
--grad-hero:linear-gradient(98deg,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.86) 22%,
rgba(255,255,255,.52) 38%,
rgba(255,255,255,.14) 50%,
rgba(255,255,255,0) 60%);
/* ── Type ── */
--sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--serif:'DM Serif Display',Georgia,serif; /* editorial pull-quotes only */
--mono:'DM Mono',ui-monospace,monospace; /* eyebrows and small labels */
/* Fluid type: scales between mobile and desktop without breakpoints. */
--fs-eyebrow:clamp(.66rem,.6rem + .2vw,.72rem);
--fs-small:clamp(.82rem,.78rem + .2vw,.88rem);
--fs-body:clamp(.95rem,.9rem + .25vw,1.05rem);
--fs-lead:clamp(1.05rem,.98rem + .45vw,1.25rem);
--fs-h3:clamp(1.15rem,1.05rem + .5vw,1.4rem);
--fs-h2:clamp(1.7rem,1.4rem + 1.5vw,2.6rem);
--fs-h1:clamp(2.05rem,1.65rem + 1.75vw,2.95rem);
/* ── Spacing scale ── */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
--sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
--sp-9:6rem; --sp-10:8rem;
/* ── Shape ── */
--r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
/* ── Soft shadows: light and wide, never a dark drop ── */
--shadow-1:0 1px 2px rgba(0,72,96,.05),0 2px 8px rgba(0,72,96,.04);
--shadow-2:0 2px 6px rgba(0,72,96,.06),0 10px 28px rgba(0,72,96,.07);
--shadow-3:0 4px 12px rgba(0,72,96,.07),0 24px 60px rgba(0,72,96,.10);
/* ── Layout ── */
--wrap:1240px;
--wrap-narrow:900px;
--gutter:clamp(1.15rem,4vw,2.25rem);
--header-h:76px;
/* ── Motion ── */
--ease:cubic-bezier(.2,.7,.3,1);
--t-fast:.16s; --t-med:.28s; --t-slow:.5s;
}
/* Per-application accent. Set on a card or page via data-accent, so the
connected applications share one visual system and differ only by hue.
Adding an application means adding a hue here and a record to
_data/applications.json — nothing else.
Revised 1 Sep 2026. The six hues now sit on one navy -> teal -> green arc
taken from the logo, so the applications read as one family seen from six
angles. The previous violet and amber sat outside the brand entirely and
made PharmacyIQ and PorterIQ look like other companies' products. They are
still six distinct hues — this is not a flattening to one colour. */
[data-accent="blue"] { --accent:#1273b0; --accent-soft:var(--blue-100); --accent-wash:var(--blue-050); }
[data-accent="teal"] { --accent:var(--paiq-teal); --accent-soft:#d3ecef; --accent-wash:#f0f9fa; }
[data-accent="navy"] { --accent:#0a4f74; --accent-soft:#d8e6f1; --accent-wash:#eff6fb; }
[data-accent="green"]{ --accent:var(--green-600); --accent-soft:var(--green-100); --accent-wash:var(--green-050); }
[data-accent="aqua"] { --accent:#0c7a68; --accent-soft:#d2ebe5; --accent-wash:#eff9f7; }
[data-accent="moss"] { --accent:#557d2c; --accent-soft:#e2ecd3; --accent-wash:#f4f8ee; }
/* HospitalIQ, added 28 Sep 2026. The deepest point on the same navy -> teal
-> green arc, because HospitalIQ is the widest view in the family: the
site above the wards. It sits below WardIQ's navy rather than beside it. */
[data-accent="deep"] { --accent:#073a52; --accent-soft:#d3e1e9; --accent-wash:#eef4f8; }
/* ===== assets/css/base.css ===== */
/* ══════════════════════════════════════════════════════════════════
BASE — self-hosted type, reset, document rhythm, accessibility.
No third-party requests: the fonts ship with the site.
══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/7cf8a1c146c5.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
src:url(../fonts/4a162522c119.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/3d2a435525b8.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/1a0430d40513.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(../fonts/f425382cda70.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The site scrolls normally. Nothing here constrains the page to one screen. */
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:var(--fs-body);
line-height:1.65;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden; /* guards against a stray wide child */
}
h1,h2,h3,h4{
font-family:var(--sans); /* DM Sans leads: cleaner than the old site */
font-weight:500;
line-height:1.14;
letter-spacing:-.018em;
color:var(--paiq-navy);
margin:0 0 var(--sp-4);
text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 var(--sp-4);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--paiq-teal);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.15em}
li{margin-bottom:var(--sp-2)}
/* ── Focus: always visible, never removed ── */
:focus-visible{
outline:2px solid var(--paiq-teal);
outline-offset:3px;
border-radius:var(--r-sm);
}
/* ── Screen-reader-only text ── */
.sr-only{
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 link: first tab stop on every page ── */
.skip-link{
position:absolute;left:var(--sp-4);top:-100px;z-index:200;
background:var(--paiq-navy);color:var(--white);
padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
font-size:var(--fs-small);font-weight:500;
transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-4);text-decoration:none}
/* ── Reduced motion: honour the system setting everywhere ──
The old site did this well and the new one keeps it. Anything that
moves must still be legible and complete when motion is switched off. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
.reveal{opacity:1!important;transform:none!important}
}
/* ── Form controls inherit the page's own type ──
Added 28 Sep 2026. A browser gives button, input, select and textarea its
own default face — Arial or similar — instead of inheriting, so Send
enquiry, the cookie Accept and Decline buttons, Cookie settings and every
field on the contact form were set in a typeface that appears nowhere
else on the site. One rule fixes all of them. `font` shorthand rather
than font-family alone, so size, weight and line-height inherit too. */
button, input, select, textarea { font: inherit; }
/* ===== assets/css/layout.css ===== */
/* ══════════════════════════════════════════════════════════════════
LAYOUT — page shell, section rhythm, the content wrapper.
══════════════════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(3.5rem,7vw,var(--sp-9))}
.section--tight{padding-block:clamp(2.5rem,5vw,var(--sp-7))}
.section--mist{background:var(--mist)}
.section--wash{background:var(--grad-wash)}
/* Section heading block, used above most content sections. */
.section-head{max-width:62ch;margin-bottom:var(--sp-6)}
.section-head--centre{margin-inline:auto;text-align:center}
.eyebrow{
font-family:var(--mono);
font-size:var(--fs-eyebrow);
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--paiq-teal);
margin:0 0 var(--sp-3);
}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
/* Generic responsive grid. Cards decide their own minimum width. */
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
/* Scroll-reveal. Starts visible and is only hidden once JS confirms it can
animate, so the page is never blank if JS fails or is switched off. */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* A section that breaks out of the content column. Used by the application
preview, which is a full working screen and needs the width to breathe. */
.bleed{
width:100vw;
margin-inline:calc(50% - 50vw);
padding-inline:clamp(.5rem,2vw,var(--gutter));
}
/* ===== assets/css/components.css ===== */
/* ══════════════════════════════════════════════════════════════════
COMPONENTS — header, buttons, hero, application cards, preview,
demo CTA, footer. Every colour comes from tokens.css.
══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────── HEADER ─────────────────────────── */
.site-header{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.86);
/* restrained glass — a blur, not a heavy frosted slab */
backdrop-filter:saturate(150%) blur(14px);
-webkit-backdrop-filter:saturate(150%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line-soft);box-shadow:var(--shadow-1)}
/* ── Pages with an embedded application ──
The preview is a working screen; a header parked on top of it competes for
attention and covers the application's own chrome. On these pages the
header retracts as you read down and comes back the moment you scroll up,
so navigation is always one flick away without ever sitting on the app.
Retracting only ever happens below the fold and never while the header
holds focus, so keyboard users never lose it. */
.has-embedded-app .site-header{
transition:transform var(--t-med) var(--ease),
border-color var(--t-med) var(--ease),
box-shadow var(--t-med) var(--ease);
will-change:transform;
}
.has-embedded-app .site-header.is-retracted{transform:translateY(-100%)}
.has-embedded-app .site-header:focus-within{transform:none}
@media (prefers-reduced-motion:reduce){
.has-embedded-app .site-header{transition:none}
}
.site-header__inner{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
min-height:var(--header-h);
}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);flex:none}
.brand:hover{text-decoration:none}
/* The master logo scales by height only, so its proportions are whatever
the supplied file says they are and nothing here can distort them. */
.brand__logo{height:42px;width:auto;display:block;flex:none}
@media (max-width:62rem){.brand__logo{height:36px}}
.site-footer .brand__logo{height:46px}
.brand__mark{width:38px;height:38px;flex:none}
.brand__word{
font-size:1.55rem;font-weight:500;letter-spacing:-.02em;
color:var(--paiq-navy);line-height:1;
}
/* ── Desktop navigation ── */
.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.1rem)}
.nav__link{
position:relative;
color:var(--ink-2);font-size:var(--fs-small);font-weight:500;
padding:var(--sp-2) 0;
transition:color var(--t-fast) var(--ease);
}
.nav__link:hover{color:var(--paiq-navy);text-decoration:none}
.nav__link::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
background:var(--grad-brand);border-radius:2px;
transform:scaleX(0);transform-origin:left;
transition:transform var(--t-med) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-open > .nav__link::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--paiq-navy)}
/* ── Applications dropdown ── */
.nav__item{position:relative}
.nav__pair{display:inline-flex;align-items:center;gap:var(--sp-1)}
.nav__disclosure{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;padding:0;
background:none;border:0;cursor:pointer;font:inherit;
color:var(--ink-3);border-radius:var(--r-sm);
}
.nav__disclosure:hover{color:var(--paiq-navy)}
.nav__toggle{
display:inline-flex;align-items:center;gap:var(--sp-2);
background:none;border:0;cursor:pointer;font:inherit;
}
.nav__chev{width:10px;height:10px;transition:transform var(--t-med) var(--ease)}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}
.nav__pair .nav__link::after{right:0}
.nav__menu{
position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
min-width:270px;padding:var(--sp-3);
background:var(--white);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:var(--shadow-3);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),visibility var(--t-med);
}
.nav__item.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu-link{
display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-3);border-radius:var(--r-md);
color:var(--ink);
transition:background var(--t-fast) var(--ease);
}
.nav__menu-link:hover{background:var(--accent-wash,var(--blue-050));text-decoration:none}
.nav__menu-name{font-weight:500;color:var(--paiq-navy);display:block;line-height:1.3}
.nav__menu-desc{font-size:.78rem;color:var(--ink-3);display:block;line-height:1.35}
.nav__menu-icon{width:32px;height:32px;flex:none;color:var(--accent,var(--paiq-teal))}
/* ── Mobile menu button (hidden on desktop) ── */
.nav-toggle{
display:none;width:44px;height:44px;flex:none;
align-items:center;justify-content:center;
background:none;border:1px solid var(--line);border-radius:var(--r-md);
cursor:pointer;color:var(--paiq-navy);
}
.nav-toggle__bar{
display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
position:relative;transition:background var(--t-fast) var(--ease);
}
.nav-toggle__bar::before,.nav-toggle__bar::after{
content:"";position:absolute;left:0;width:18px;height:2px;
background:currentColor;border-radius:2px;
transition:transform var(--t-med) var(--ease),top var(--t-med) var(--ease);
}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{top:0;transform:rotate(-45deg)}
/* ── Header demo CTA ──
Sits at the end of the nav on desktop and full width at the foot of the
open menu on mobile. Uses the standard button, one size down. */
.nav__cta{padding:.5rem .95rem;font-size:var(--fs-small);flex:none}
/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
padding:.82rem 1.5rem;border-radius:var(--r-pill);
font-size:var(--fs-small);font-weight:500;line-height:1;
border:1.5px solid transparent;cursor:pointer;
transition:transform var(--t-fast) var(--ease),
box-shadow var(--t-med) var(--ease),
background var(--t-med) var(--ease),
color var(--t-med) var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn__arrow{width:15px;height:15px;transition:transform var(--t-med) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--primary{background:var(--paiq-navy);color:var(--white);box-shadow:var(--shadow-2)}
.btn--primary:hover{background:#00394d;box-shadow:var(--shadow-3)}
.btn--secondary{background:var(--white);color:var(--blue-600);border-color:var(--blue-300);box-shadow:var(--shadow-1)}
.btn--secondary:hover{border-color:var(--blue-600);box-shadow:var(--shadow-2)}
.btn--ghost{background:transparent;color:var(--paiq-teal);padding-inline:0}
.btn--ghost:hover{color:var(--paiq-navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
/* ─────────────────────────── HERO ─────────────────────────── */
/*
The artwork is a background plate only. Headline, copy, buttons and the
five concept labels are all live HTML, so they stay selectable, responsive,
translatable and readable by a screen reader. Swapping the plate for a
higher-resolution version means changing the ![]()
and nothing else.
*/
.hero{
position:relative;
isolation:isolate;
display:flex;align-items:center;
min-height:clamp(30rem,74vh,48rem);
padding-block:clamp(var(--sp-7),8vw,var(--sp-9));
overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
width:100%;height:100%;object-fit:cover;
object-position:45% 50%; /* keeps the touch point in frame as the box narrows */
}
/* Readability wash: opaque behind the headline, clear over the artwork. */
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--grad-hero)}
/* The plate has a hard bottom edge where the section ends. This fades it
into the page ground so the seam never shows beside the card panel. */
.hero__fade{
position:absolute;left:0;right:0;bottom:0;height:clamp(4rem,12vh,8rem);z-index:-1;
background:linear-gradient(180deg,rgba(251,253,254,0),var(--paper));
}
.hero__inner{position:relative;width:100%}
.hero__content{max-width:34rem}
.hero__title{margin-bottom:var(--sp-5)}
.hero__title .l1{display:block;color:var(--paiq-navy)}
.hero__title .l2{display:block}
.hero__title .l2 .g{color:var(--paiq-green)}
.hero__title .l2 .b{color:var(--blue-600)}
.hero__lead{
font-size:var(--fs-lead);color:var(--ink-2);
max-width:27rem;margin-bottom:var(--sp-6);
}
/* On desktop the copy sits high in the frame so the hands stay the dominant
element. Below 60rem it stays vertically centred, which reads better when
the artwork is cropped narrow. */
@media (min-width:60rem){
.hero{align-items:flex-start}
.hero__inner{padding-block-start:clamp(1.5rem,5vh,3.5rem)}
.hero__title{margin-bottom:var(--sp-4)}
.hero__lead{margin-bottom:var(--sp-5)}
}
/* ── The five concepts ──
Desktop: positioned over the artwork at points that sit in its quiet areas.
Mobile: the same markup reflows into a plain wrapped row under the buttons.
One list, two presentations — nothing is duplicated. */
.concepts{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5)}
.concept{display:flex;align-items:center;gap:var(--sp-2)}
.concept__dot{
width:30px;height:30px;flex:none;display:grid;place-items:center;
border-radius:50%;background:rgba(255,255,255,.9);
border:1px solid var(--line);box-shadow:var(--shadow-1);
color:var(--paiq-teal);
}
.concept__dot svg{width:15px;height:15px}
.concept__label{
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
white-space:nowrap;
}
.concept:nth-child(1) .concept__dot{color:var(--green-600)}
.concept:nth-child(2) .concept__dot{color:var(--paiq-teal)}
.concept:nth-child(3) .concept__dot{color:var(--green-500)}
.concept:nth-child(4) .concept__dot{color:var(--blue-600)}
.concept:nth-child(5) .concept__dot{color:var(--blue-600)}
@media (min-width:60rem){
/* Over the artwork, at coordinates chosen to sit clear of both hands. */
.concepts{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
.concept{position:absolute;flex-direction:column;gap:var(--sp-2);pointer-events:auto}
.concept__dot{width:46px;height:46px}
.concept__dot svg{width:21px;height:21px}
/* Positions sit clear of the copy column (which ends near 48%) and clear
of both hands in the artwork. Percentages, so they hold as the hero
box changes shape between 60rem and very wide screens. */
.concept--information{left:57%;top:13%}
.concept--people{left:74%;top:21%}
.concept--pathways{left:53%;top:68%}
.concept--process{left:64%;top:76%}
.concept--technology{left:81%;top:60%}
}
/* ─────────────────── APPLICATION FAMILY ─────────────────── */
/*
The panel deliberately overlaps the lower edge of the hero, so PA-IQ
visibly sits above and behind the four applications rather than beside
them as a fifth peer.
*/
.app-family{position:relative;z-index:3;margin-top:clamp(-5.5rem,-6vw,-2.5rem)}
.app-family__panel{
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-xl);
box-shadow:var(--shadow-3);
padding:clamp(var(--sp-5),3vw,var(--sp-6));
}
.app-cards{
display:grid;gap:0;
grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
/* Hairline separators between cards, never around the outside. */
.app-card{
position:relative;
display:flex;align-items:center;gap:var(--sp-4);
padding:var(--sp-4);border-radius:var(--r-lg);
color:inherit;
transition:background var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.app-card + .app-card::before{
content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line-soft);
}
.app-card:hover{background:var(--accent-wash);text-decoration:none;transform:translateY(-2px)}
.app-card:hover .app-card__arrow{transform:translateX(4px);color:var(--accent)}
.app-card__icon{
width:56px;height:56px;flex:none;display:grid;place-items:center;
border-radius:50%;
background:var(--accent-soft);
color:var(--accent);
}
.app-card__icon svg{width:26px;height:26px}
.app-card__body{flex:1 1 auto;min-width:0}
.app-card__name{
display:block;font-weight:500;font-size:1.02rem;letter-spacing:-.01em;
color:var(--paiq-navy);line-height:1.3;
}
.app-card__strap{
display:block;font-size:.82rem;line-height:1.45;color:var(--ink-3);margin-top:2px;
}
.app-card__arrow{
width:18px;height:18px;flex:none;color:var(--ink-4);
transition:transform var(--t-med) var(--ease),color var(--t-med) var(--ease);
}
/* ── Orchestration line under the cards ── */
.orchestration{
display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
flex-wrap:wrap;text-align:center;
margin-top:var(--sp-5);padding-top:var(--sp-5);
border-top:1px solid var(--line-soft);
}
.orchestration__rule{
flex:1 1 2rem;max-width:9rem;height:1px;
background:linear-gradient(90deg,transparent,var(--blue-300));
position:relative;
}
.orchestration__rule:last-child{background:linear-gradient(270deg,transparent,var(--blue-300))}
.orchestration__rule::after{
content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
border-radius:50%;background:var(--blue-500);
}
.orchestration__rule:last-child::after{right:auto;left:0}
.orchestration__mark{width:36px;height:36px;flex:none}
.orchestration__text{font-size:var(--fs-small);color:var(--ink-2);font-weight:500}
.orchestration__text .t{color:var(--paiq-green)}
.orchestration__text .b{color:var(--blue-600)}
@media (max-width:45rem){
.orchestration__rule{display:none}
}
/* ─────────────────── APPLICATION PAGE HERO ─────────────────── */
.app-hero{
background:var(--grad-wash);
border-bottom:1px solid var(--line-soft);
padding-block:clamp(var(--sp-6),5vw,var(--sp-8));
}
.app-hero__grid{display:grid;gap:var(--sp-6);align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){.app-hero__grid{grid-template-columns:1.35fr 1fr}}
.app-hero__badge{
display:inline-flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
background:var(--white);border:1px solid var(--line);
border-radius:var(--r-pill);box-shadow:var(--shadow-1);
margin-bottom:var(--sp-5);
}
.app-hero__badge-icon{
width:32px;height:32px;flex:none;display:grid;place-items:center;
border-radius:50%;background:var(--accent-soft);color:var(--accent);
}
.app-hero__badge-icon svg{width:16px;height:16px}
.app-hero__badge-text{
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.app-hero__strap{
font-size:var(--fs-lead);font-weight:500;color:var(--accent);
margin-bottom:var(--sp-4);
}
/* The operational problem the application answers, stated in the hero
before anything is claimed for the product. Set below the proposition in
body ink and body size: it is the reader's own situation being described
back to them, and it stops working the moment it looks like marketing.
The rule down its left edge takes the page's own accent, so each
application states its problem in its own colour. */
.app-hero__problem{
max-width:64ch;margin:var(--sp-5) 0 0;
padding-left:var(--sp-4);border-left:2px solid var(--accent);
font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);
}
.app-hero__problem-label{
display:block;margin-bottom:var(--sp-2);
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
/* --ink-2 rather than the --ink-3 the other small labels use: at 11.5px
uppercase, --ink-3 measures 3.96:1 against the hero wash and WCAG AA
wants 4.5:1 for text this size. --ink-2 gives 7.29:1. */
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
/* ─────────────── APPLICATION PREVIEW (integration point) ─────────────── */
/*
This is the shell the real demonstration SPA drops into. The surrounding
page never needs to change: the SPA mounts inside .app-preview__stage and
owns everything below that node. See assets/js/preview/preview.js.
*/
.app-preview{
border:1px solid var(--line);
border-radius:var(--r-xl);
background:var(--white);
box-shadow:var(--shadow-2);
overflow:hidden;
}
.app-preview__bar{
display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
padding:var(--sp-3) var(--sp-4);
background:var(--accent-wash);
border-bottom:1px solid var(--line-soft);
}
.app-preview__dots{display:flex;gap:6px;flex:none}
.app-preview__dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.app-preview__title{
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
/* Best-explored-full-screen cue. Hidden on wide screens, where the embedded
preview already has the room it needs. */
.app-preview__cue{
display:none;
align-items:center;gap:var(--sp-3);flex-wrap:wrap;
padding:var(--sp-3) var(--sp-4);
background:var(--accent-wash);
border-bottom:1px solid var(--line-soft);
font-size:.78rem;color:var(--ink-2);
}
.app-preview__cue .btn{padding:.55rem 1.05rem;font-size:.78rem;margin-left:auto}
@media (max-width:60rem){ .app-preview__cue{display:flex} }
/* Opens the preview on its own, for anyone who wants the full screen. */
.app-preview__open{
margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:.62rem;font-weight:500;
letter-spacing:.11em;text-transform:uppercase;
color:var(--accent);background:var(--white);
border:1px solid var(--accent-soft);border-radius:var(--r-pill);
padding:3px 11px;
}
.app-preview__open:hover{border-color:var(--accent);text-decoration:none}
.app-preview__open svg{width:11px;height:11px}
.app-preview__flag{
font-family:var(--mono);font-size:.62rem;font-weight:500;
letter-spacing:.11em;text-transform:uppercase;
color:var(--accent);
background:var(--white);border:1px solid var(--accent-soft);
border-radius:var(--r-pill);padding:3px 10px;
}
/* The stage: fixed aspect on desktop so the page does not jump when a real
SPA loads; free height on small screens where a fixed ratio is unusable. */
.app-preview__stage{
position:relative;min-height:22rem;
display:grid;place-items:center;
/* Faint dot grid: signals "this is where an application appears"
without pretending to be a screenshot of one. */
background-color:var(--paper);
background-image:radial-gradient(circle at 1px 1px,var(--line-soft) 1px,transparent 0);
background-size:22px 22px;
}
@media (min-width:56rem){.app-preview__stage{aspect-ratio:16/10;min-height:0}}
/* Once a real preview has mounted it owns the whole stage: the centring and
the dot grid are placeholder furniture and would otherwise box it in. */
.app-preview[data-preview-live] .app-preview__stage{
display:block;background-image:none;background-color:var(--white);
}
/* ── A preview that is the whole application ──
Mounted in an iframe, so it needs a real amount of room: these are
full working screens, not a widget. The ratio is deliberately generous
and the floor rises with the viewport rather than being fixed. */
.app-preview__frame{
display:block;width:100%;height:100%;border:0;
min-height:clamp(28rem,70vh,46rem);
background:#f6f4ef;
}
.app-preview[data-preview-mode="frame"] .app-preview__stage{
aspect-ratio:auto;
height:clamp(28rem,78vh,52rem);
min-height:0;
padding:0;
}
/* On a phone the application's own layout is the constraint, so the frame
gets a fixed workable height and scrolls internally rather than being
squeezed into an unusable box. */
@media (max-width:48rem){
.app-preview[data-preview-mode="frame"] .app-preview__stage{height:34rem}
}
/* Placeholder shown until a real SPA is registered for this product. */
.preview-placeholder{max-width:34rem;text-align:center;padding:var(--sp-6)}
/* Line beneath the homepage preview pointing at the rest of the family. */
.preview-more{
margin-top:var(--sp-5);text-align:center;
font-size:var(--fs-small);color:var(--ink-3);
}
.preview-more a{display:inline-flex;align-items:center;gap:.4rem;margin-left:.5rem;font-weight:500}
.preview-more svg{width:1em;height:1em}
.preview-placeholder__icon{
width:64px;height:64px;margin:0 auto var(--sp-4);
display:grid;place-items:center;border-radius:50%;
background:var(--accent-soft);color:var(--accent);
}
.preview-placeholder__icon svg{width:28px;height:28px}
.preview-placeholder h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.preview-placeholder p{color:var(--ink-3);font-size:var(--fs-small);margin-bottom:var(--sp-2)}
.preview-placeholder code{
font-family:var(--mono);font-size:.74rem;
background:var(--white);border:1px solid var(--line);
border-radius:var(--r-sm);padding:2px 7px;color:var(--ink-2);
}
/* Static application card (Connected Intelligence page): the card is not
itself a link, because it carries two — open the demo, or read the page. */
.product-card--static{cursor:default}
.product-card--static:hover{transform:none}
.product-card__links{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4)}
.btn--sm{padding:.5rem .9rem;font-size:var(--fs-small)}
/* ─────────────────── HOMEPAGE DEMO BAND ───────────────────
Replaces the embedded application on the homepage. Deliberately light
where the closing CTA is dark, so the two asks read as two different
things: try it yourself here, talk to us there. */
.demo-band{text-align:center;max-width:56rem;margin-inline:auto}
.demo-band h2{
font-size:clamp(1.9rem,4.2vw,2.9rem);
letter-spacing:-.02em;line-height:1.1;
color:var(--paiq-navy);margin-bottom:var(--sp-6);
}
.demo-band__actions{justify-content:center}
.btn--lg{padding:.95rem 1.6rem;font-size:1.02rem}
.demo-chips{
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);
margin-top:var(--sp-6);
}
.demo-chip{
display:inline-flex;align-items:center;gap:.55rem;
padding:.5rem .9rem;
background:var(--white);
border:1px solid var(--line);border-radius:999px;
font-size:var(--fs-small);font-weight:500;color:var(--ink-2);
transition:border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.demo-chip:hover{
text-decoration:none;color:var(--accent);
border-color:var(--accent);box-shadow:var(--shadow-1);transform:translateY(-1px);
}
.demo-chip__icon{display:inline-flex;color:var(--accent)}
.demo-chip__icon svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.demo-chip:hover{transform:none}}
/* ─────────────────── HOMEPAGE APPLICATION PICKER ───────────────────
The homepage reads animation → quick application choices → contact, so
these are doors rather than cards: an icon and a name, at the same scale
as the icons used everywhere else. One row of six on a wide screen,
three then two as it narrows. Deliberately no descriptive text — the
application's own page does that job. */
.app-picker{
display:grid;gap:var(--sp-3);
grid-template-columns:repeat(6,minmax(0,1fr));
margin-inline:auto;padding:0;list-style:none;max-width:68rem;
}
@media (max-width:64rem){.app-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:32rem){.app-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
.app-pick{
display:flex;flex-direction:column;align-items:center;gap:.5rem;
padding:var(--sp-4) .5rem;
border:1px solid transparent;border-radius:var(--r-lg);
text-align:center;
transition:background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.app-pick:hover,.app-pick:focus-visible{
text-decoration:none;
background:var(--accent-wash);border-color:var(--accent-soft);
transform:translateY(-2px);
}
.app-pick__icon{
width:52px;height:52px;flex:none;display:grid;place-items:center;
border-radius:50%;
background:var(--accent-soft);color:var(--accent);
transition:box-shadow var(--t-fast) var(--ease);
}
.app-pick__icon svg{width:25px;height:25px}
.app-pick:hover .app-pick__icon{box-shadow:var(--shadow-1)}
.app-pick__name{
font-size:var(--fs-small);font-weight:500;letter-spacing:-.01em;
color:var(--paiq-navy);line-height:1.25;
}
/* The setting the application covers, in the same three or four words the
navigation dropdown uses, so the two never drift apart. A name on its own
told a first-time reader nothing the name had not already told them. This
is one short line and must stay one short line — the moment it becomes a
sentence these are cards again, and the homepage has cards nowhere. */
.app-pick__context{
max-width:17ch;
font-size:.735rem;line-height:1.35;color:var(--ink-3);
text-wrap:balance;
}
@media (prefers-reduced-motion:reduce){.app-pick:hover,.app-pick:focus-visible{transform:none}}
/* ─────────────────── DEMO CONVERSION BLOCK ─────────────────── */
.demo-cta{
margin-top:var(--sp-6);
background:linear-gradient(120deg,var(--paiq-navy) 0%,#065a72 55%,var(--paiq-teal) 100%);
border-radius:var(--r-xl);
padding:clamp(var(--sp-5),4vw,var(--sp-7));
color:var(--white);
box-shadow:var(--shadow-2);
}
.demo-cta h2,.demo-cta h3{color:var(--white);max-width:24ch}
.demo-cta p{color:rgba(255,255,255,.82);max-width:52ch}
.demo-cta .btn--primary{background:var(--white);color:var(--paiq-navy)}
.demo-cta .btn--primary:hover{background:#eef7fa}
/* The note under the button. It used to be a one-line privacy footnote and
was set at 60% white to stay out of the way. It now also carries the
time-to-live statement, which is a fact a reader is meant to take away —
and 60% white measures 3.25:1 against the teal end of the gradient behind
it, under the 4.5:1 accessibility floor. At 82% it measures 4.70:1 over
the teal and 7.28:1 over the navy, so it passes the whole way across the
panel. Computed against both gradient stops, not sampled by eye. */
.demo-cta__note{
font-size:var(--fs-small);color:rgba(255,255,255,.82);margin-top:var(--sp-4);
max-width:52ch;
}
/* ─────────────────────────── FOOTER ─────────────────────────── */
.site-footer{
background:var(--white);
border-top:1px solid var(--line-soft);
padding-block:var(--sp-7) var(--sp-5);
margin-top:var(--sp-8);
}
.site-footer__grid{
display:grid;gap:var(--sp-6);
grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
margin-bottom:var(--sp-6);
}
.site-footer__brandcol{grid-column:span 1}
.site-footer__coltitle{
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:var(--sp-3);
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:var(--sp-2)}
.site-footer a{color:var(--ink-2);font-size:var(--fs-small)}
.site-footer a:hover{color:var(--paiq-teal)}
.site-footer__base{
display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
align-items:center;justify-content:space-between;
padding-top:var(--sp-5);border-top:1px solid var(--line-soft);
font-size:.78rem;color:var(--ink-4);
}
/* ── 404 ──
A dead end should be short and offer a way out, so the page is one block
of text and two buttons, vertically comfortable on any screen. */
.notfound{display:grid;align-items:center;min-height:52vh}
.notfound__inner{max-width:34rem}
.notfound h1{margin-bottom:var(--sp-3)}
.notfound .btn-row{margin-top:var(--sp-6)}
/* ─────────────────── COOKIE CONSENT ───────────────────
A bar, not a modal: it does not cover the page, does not trap focus and
cannot be dismissed by ignoring it. Both choices are real buttons and
neither is pre-selected. */
.consent{
position:fixed;inset:auto 0 0 0;z-index:200;
background:var(--white);
border-top:1px solid var(--line);
box-shadow:0 -6px 24px rgba(10,35,45,.10);
}
.consent__inner{
width:100%;max-width:var(--wrap);margin-inline:auto;
padding:var(--sp-4) var(--gutter);
display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
}
.consent__text{
margin:0;flex:1 1 26rem;min-width:0;
font-size:var(--fs-small);color:var(--ink-2);line-height:1.5;
}
.consent__text a{white-space:nowrap}
.consent__actions{display:flex;gap:var(--sp-3);flex:none;flex-wrap:wrap}
@media (max-width:40rem){
.consent__actions{width:100%}
.consent__actions .btn{flex:1 1 auto;justify-content:center}
}
/* On a phone the banner was taking around 150px off the bottom of the
screen and sitting over whatever was under it. Nothing about the consent
itself changes — same wording, same two buttons, same explicit choice,
same logic in consent.js, which this does not touch. It is only tighter,
and the page now reserves room for it instead of being covered by it. */
@media (max-width:47.99rem){
.consent__inner{padding:var(--sp-3) var(--gutter);gap:var(--sp-2)}
.consent__text{flex:1 1 100%;font-size:.775rem;line-height:1.45}
.consent__actions{gap:var(--sp-2)}
.consent__actions .btn{padding-block:.5rem;font-size:.82rem}
}
body:has(.consent:not([hidden])){padding-bottom:8rem}
@media (min-width:48rem){
body:has(.consent:not([hidden])){padding-bottom:5.5rem}
}
/* A button that has to sit in a list of links without looking like a button. */
.footer-link{
font:inherit;font-size:inherit;color:inherit;
background:none;border:0;padding:0;cursor:pointer;
text-align:left;text-decoration:none;
}
.footer-link:hover{text-decoration:underline}
/* Legal pages: long-form text, so it gets room to breathe. */
.legal__address{font-style:normal;line-height:1.7}
.legal__action{margin-top:var(--sp-4)}
.legal__foot{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
/* ─────────────────── SMALL-SCREEN NAVIGATION ─────────────────── */
@media (max-width:62rem){
.nav-toggle{display:inline-flex}
.nav{
position:fixed;inset:var(--header-h) 0 auto 0;
flex-direction:column;align-items:stretch;gap:0;
background:var(--white);
border-bottom:1px solid var(--line);
box-shadow:var(--shadow-3);
padding:var(--sp-3) var(--gutter) var(--sp-5);
max-height:calc(100dvh - var(--header-h));
overflow-y:auto;
transform:translateY(-8px);opacity:0;visibility:hidden;
transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),visibility var(--t-med);
}
.nav.is-open{transform:none;opacity:1;visibility:visible}
.nav__link{padding:var(--sp-4) 0;font-size:1rem;border-bottom:1px solid var(--line-soft)}
.nav__link::after{display:none}
.nav__item{width:100%}
.nav__pair{width:100%;justify-content:space-between;border-bottom:1px solid var(--line-soft)}
.nav__pair .nav__link{border-bottom:0;flex:1}
.nav__disclosure{width:44px;height:44px}
.nav__toggle{width:100%;justify-content:space-between}
.nav__menu{
position:static;transform:none;translate:none;opacity:1;visibility:visible;
min-width:0;box-shadow:none;border:0;border-radius:0;
padding:0 0 var(--sp-3) var(--sp-3);
display:none;
}
.nav__item.is-open .nav__menu{display:block}
.nav__cta{width:100%;margin-top:var(--sp-4)}
}
/* ── Aside on an application page ──
Shows PA-IQ sitting *beneath* the four applications rather than describing
it in prose alone: four tiles above, the orchestration bar below, with
connectors running down into it. The current application is lit. */
.app-aside{
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
padding:var(--sp-5);
}
.app-aside__note{font-size:.8rem;color:var(--ink-3);margin:var(--sp-4) 0 0;line-height:1.55}
.layerstack{
list-style:none;margin:var(--sp-2) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);
}
@media (min-width:30rem){.layerstack{grid-template-columns:repeat(4,1fr);gap:6px}}
/* The li is only a grid cell; the anchor inside it is the tile, and it
fills the cell so the whole card is the target rather than the label. */
.layerstack__cell{display:flex;margin-bottom:0}
.layerstack__tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;width:100%;
padding:var(--sp-3) var(--sp-2);
border:1px solid var(--line-soft);border-radius:var(--r-md);
background:var(--paper);
color:var(--ink-4);
text-decoration:none;
transition:all var(--t-med) var(--ease);
}
/* Hover and keyboard focus land on the same treatment the current
application already uses, so the strip reads as one set of controls.
Focus itself is the site-wide outline from base.css — not replaced. */
.layerstack__tile:hover,
.layerstack__tile:focus-visible{
background:var(--accent-wash);
border-color:var(--accent-soft);
color:var(--accent);
box-shadow:var(--shadow-1);
transform:translateY(-2px);
text-decoration:none;
}
.layerstack__tile:hover .layerstack__name,
.layerstack__tile:focus-visible .layerstack__name{color:var(--paiq-navy)}
@media (prefers-reduced-motion:reduce){
.layerstack__tile:hover,
.layerstack__tile:focus-visible{transform:none}
}
.layerstack__tile svg{width:17px;height:17px}
.layerstack__name{
font-size:.62rem;font-weight:500;letter-spacing:.01em;
text-align:center;line-height:1.2;
}
/* The application whose page this is. */
.layerstack__tile.is-current{
background:var(--accent-wash);
border-color:var(--accent-soft);
color:var(--accent);
box-shadow:var(--shadow-1);
}
.layerstack__tile.is-current .layerstack__name{color:var(--paiq-navy)}
/* Connectors: four short lines dropping from the tiles into the bar. */
.layerstack__connectors{
position:absolute;left:0;right:0;top:-11px;height:11px;
background-image:linear-gradient(var(--blue-300),var(--blue-300));
background-size:1px 11px;background-repeat:repeat-x;
background-position:12.5% 0;
opacity:.5;
}
@media (min-width:30rem){
.layerstack__connectors{
background-image:
linear-gradient(var(--blue-300),var(--blue-300)),
linear-gradient(var(--blue-300),var(--blue-300)),
linear-gradient(var(--blue-300),var(--blue-300)),
linear-gradient(var(--blue-300),var(--blue-300));
background-size:1px 11px;background-repeat:no-repeat;
background-position:12.5% 0,37.5% 0,62.5% 0,87.5% 0;
}
}
.layerstack__base{
position:relative;margin-top:17px;
display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-md);
background:linear-gradient(120deg,var(--paiq-navy),#065a72 60%,var(--paiq-teal));
box-shadow:var(--shadow-1);
}
.layerstack__base:hover{text-decoration:none;box-shadow:var(--shadow-2);filter:saturate(115%)}
.layerstack__mark{width:30px;height:30px;flex:none;filter:brightness(0) invert(1);opacity:.95}
.layerstack__baseText{
font-family:var(--mono);font-size:.64rem;font-weight:500;
letter-spacing:.11em;text-transform:uppercase;color:var(--white);
}
/* ═══════════════════ HOMEPAGE STORY SECTIONS ═══════════════════ */
/* ── The Question ──
A single large statement. The rule beneath it echoes the network
language of the hero without repeating the artwork. */
.question{text-align:center;max-width:52rem;margin-inline:auto}
.question__heading{
font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);
line-height:1.16;letter-spacing:-.022em;margin-bottom:var(--sp-5);
}
.question__heading .l1{display:block;color:var(--paiq-navy)}
.question__heading .l2{display:block;color:var(--blue-600)}
.question__body{font-size:var(--fs-lead);color:var(--ink-2);max-width:44rem;margin-inline:auto}
.question__rule{
width:min(22rem,60%);height:1px;margin:var(--sp-6) auto 0;
background:linear-gradient(90deg,transparent,var(--blue-300) 30%,var(--green-300) 70%,transparent);
position:relative;
}
.question__rule::before,.question__rule::after{
content:"";position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;
}
.question__rule::before{left:30%;background:var(--blue-500)}
.question__rule::after{left:68%;background:var(--green-500)}
/* ── The Problem ──
Three strands of knowledge that exist separately, then a resolution line
that draws them together. The left border on each strand is the visual
"separate"; the resolution card is the visual "joined". */
.problem__grid{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:58rem){.problem__grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-7)}}
.strands{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.strand{
background:var(--white);border:1px solid var(--line-soft);
border-left:3px solid var(--line);
border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
box-shadow:var(--shadow-1);
transition:border-left-color var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.strand:nth-child(1){border-left-color:var(--blue-500)}
.strand:nth-child(2){border-left-color:var(--paiq-teal)}
.strand:nth-child(3){border-left-color:var(--green-500)}
.strand__name{display:block;font-weight:500;color:var(--paiq-navy);margin-bottom:2px}
.strand__text{display:block;font-size:var(--fs-small);color:var(--ink-3);line-height:1.55}
.resolution{
margin-top:var(--sp-4);
display:flex;align-items:flex-start;gap:var(--sp-4);
background:linear-gradient(120deg,var(--blue-050),var(--green-050));
border:1px solid var(--line-soft);border-radius:var(--r-lg);
padding:var(--sp-5);
}
.resolution__mark{width:34px;height:34px;flex:none;margin-top:2px}
.resolution__text{font-size:var(--fs-small);color:var(--ink);font-weight:500;line-height:1.6;margin:0}
/* ── Our Approach ──
Five elements on one connected track. Technology sits last on purpose,
and the track makes the order readable at a glance. */
.elements{
list-style:none;margin:0;padding:0;position:relative;
display:grid;gap:var(--sp-5) var(--sp-3);
/* 9rem lets two elements sit side by side on a phone rather than five
full-width rows, which made the section a long scroll on its own. */
grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
}
@media (min-width:64rem){
.elements{gap:var(--sp-5)}
/* The connecting track, behind the row, between the icon centres. */
.elements::before{
content:"";position:absolute;left:10%;right:10%;top:27px;height:1px;
background:linear-gradient(90deg,var(--blue-300),var(--paiq-teal),var(--green-300));
opacity:.55;
}
}
.element{position:relative;text-align:center}
.element__icon{
width:54px;height:54px;margin:0 auto var(--sp-3);
display:grid;place-items:center;border-radius:50%;
background:var(--white);border:1px solid var(--line);
box-shadow:var(--shadow-1);color:var(--paiq-teal);
}
.element__icon svg{width:23px;height:23px}
.element:nth-child(1) .element__icon{color:var(--blue-600)}
.element:nth-child(2) .element__icon{color:var(--paiq-teal)}
.element:nth-child(3) .element__icon{color:var(--paiq-teal)}
.element:nth-child(4) .element__icon{color:var(--green-500)}
.element:nth-child(5) .element__icon{color:var(--green-600)}
.element__name{display:block;font-weight:500;color:var(--paiq-navy);margin-bottom:var(--sp-1)}
.element__text{display:block;font-size:.82rem;color:var(--ink-3);line-height:1.5}
/* ── How PA-IQ Works ──
Numbered steps on a vertical spine. Strategic language only: what each
move achieves, never how it is done. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.step{
position:relative;display:flex;gap:var(--sp-5);
padding:var(--sp-5) 0 var(--sp-5) 0;
}
.step + .step{border-top:1px solid var(--line-soft)}
.step__num{
width:46px;height:46px;flex:none;display:grid;place-items:center;
border-radius:50%;background:var(--white);
border:1px solid var(--line);box-shadow:var(--shadow-1);
font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--paiq-teal);
}
.step__body{flex:1 1 auto;min-width:0}
.step__name{font-size:var(--fs-h3);font-weight:500;color:var(--paiq-navy);margin:0 0 var(--sp-1);letter-spacing:-.01em}
.step__text{margin:0;color:var(--ink-2)}
/* A continuous spine joins the five numbers, so the order is visible
rather than merely implied. Drawn behind the numbered discs. */
.step::before{
content:"";position:absolute;left:23px;top:0;bottom:0;width:1px;
background:var(--line-soft);
}
.step:first-child::before{top:var(--sp-5)}
.step:last-child::before{bottom:calc(100% - var(--sp-5) - 46px)}
.step__num{position:relative;z-index:1}
@media (min-width:58rem){
.step{gap:var(--sp-6);padding-block:var(--sp-6)}
.step__body{display:grid;grid-template-columns:14rem 1fr;gap:var(--sp-5);align-items:baseline}
.step__name{margin-bottom:0}
}
/* ── Final call to action ── */
.final-cta{
text-align:center;
background:linear-gradient(120deg,var(--paiq-navy) 0%,#065a72 55%,var(--paiq-teal) 100%);
border-radius:var(--r-xl);
padding:clamp(var(--sp-6),5vw,var(--sp-8));
color:var(--white);box-shadow:var(--shadow-2);
}
.final-cta h2{color:var(--white);max-width:20ch;margin-inline:auto}
.final-cta p{color:rgba(255,255,255,.82);max-width:48ch;margin-inline:auto;margin-bottom:var(--sp-6)}
.final-cta .btn-row{justify-content:center}
.final-cta .btn--primary{background:var(--white);color:var(--paiq-navy)}
.final-cta .btn--primary:hover{background:#eef7fa}
.final-cta .btn--secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.final-cta .btn--secondary:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
/* The title-bar chip and the narrow-screen cue are two routes to the same
place, so only one shows at a time. This lives at the end of the file
deliberately: the chip's own `display:inline-flex` is declared later than
the cue block, and at equal specificity the last rule wins — putting the
hide inside the cue block silently did nothing. */
@media (max-width:60rem){
.app-preview__open{display:none}
}
/* ═══════════════════════ ENQUIRY FORM ═══════════════════════ */
.enquiry{
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-xl);
box-shadow:var(--shadow-2);
padding:clamp(var(--sp-5),4vw,var(--sp-7));
max-width:38rem;
}
.enquiry__heading{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.enquiry__intro{color:var(--ink-2);font-size:var(--fs-small);margin-bottom:var(--sp-5)}
.field{margin-bottom:var(--sp-4)}
.field label{
display:block;font-size:var(--fs-small);font-weight:500;
color:var(--paiq-navy);margin-bottom:var(--sp-2);
}
.field .req{color:var(--paiq-teal);margin-left:2px}
.field .opt{font-weight:400;color:var(--ink-4);font-size:.78rem;margin-left:4px}
.field input,
.field select,
.field textarea{
width:100%;font:inherit;font-size:var(--fs-small);color:var(--ink);
background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-md);
padding:.7rem .85rem;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem}
.field select{
/* Native arrow varies wildly between platforms; this one is ours. */
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b828d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .8rem center;background-size:14px;
padding-right:2.4rem;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-300)}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--paiq-teal);
box-shadow:0 0 0 3px rgba(0,108,120,.14);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:var(--status-act)}
.field__err{
margin:var(--sp-2) 0 0;font-size:.78rem;color:var(--status-act);
}
/* Spam trap: out of sight, out of the tab order, still fillable by a bot. */
.enquiry__trap{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.enquiry__busy{font-size:var(--fs-small);color:var(--ink-3)}
.enquiry__note{
margin-top:var(--sp-4);font-size:.78rem;color:var(--ink-4);
}
.enquiry__result{margin:0}
.enquiry__ok{display:flex;gap:var(--sp-4);align-items:flex-start}
.enquiry__ok p{font-size:var(--fs-lead);color:var(--paiq-navy);margin:0;line-height:1.45}
.enquiry__tick{
width:38px;height:38px;flex:none;display:grid;place-items:center;
border-radius:50%;background:var(--green-100);color:var(--green-600);
}
.enquiry__tick svg{width:19px;height:19px}
.enquiry__fail p{color:var(--status-act);margin:0}
/* ═══════════════════════ CONTACT PAGE ═══════════════════════ */
.contact-grid{display:grid;gap:var(--sp-7);align-items:start}
@media (min-width:58rem){.contact-grid{grid-template-columns:1.15fr .85fr}}
.contact-aside h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.contact-block{margin-bottom:var(--sp-6)}
.contact-block h3{
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:var(--sp-2);
}
.contact-block p,.contact-block address{
margin:0;font-style:normal;color:var(--ink-2);font-size:var(--fs-small);line-height:1.7;
}
/* ═══════════════════════ LEGAL PAGES ═══════════════════════ */
.legal{max-width:44rem}
.legal h2{font-size:var(--fs-h3);margin:var(--sp-7) 0 var(--sp-3)}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{color:var(--ink-2)}
.legal__toc{
background:var(--mist);border:1px solid var(--line-soft);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-7);
}
.legal__toc h2{font-size:var(--fs-small);margin:0 0 var(--sp-3)}
.legal__toc ol{margin:0;padding-left:1.2em;font-size:var(--fs-small)}
/* A section whose wording is not yet settled. Deliberately conspicuous:
nobody should be able to publish this page without noticing them. */
.todo{
border-left:3px solid var(--status-watch);
background:rgba(199,124,17,.06);
border-radius:0 var(--r-md) var(--r-md) 0;
padding:var(--sp-4) var(--sp-5);
margin:var(--sp-3) 0 var(--sp-5);
}
.todo__tag{
display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--status-watch);
margin-bottom:var(--sp-2);
}
.todo p{margin:0 0 var(--sp-2);font-size:var(--fs-small);color:var(--ink-2)}
.todo ul{margin:var(--sp-2) 0 0;font-size:var(--fs-small)}
.todo li{margin-bottom:var(--sp-1)}
/* ═══════════════ APPLICATIONS LANDING — PRODUCT CARDS ═══════════════ */
/*
Someone who clicks "Applications" came to see the applications, so the
four cards sit directly under a deliberately short intro and are above
the fold on a normal desktop. Everything explanatory goes below them.
*/
.app-lede{max-width:52rem;margin-bottom:var(--sp-5)}
.app-lede h1{margin-bottom:var(--sp-3)}
.app-lede p{font-size:var(--fs-lead);color:var(--ink-2);margin:0}
.product-grid{
display:grid;gap:var(--sp-4);
grid-template-columns:1fr;
}
@media (min-width:40rem){ .product-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:78rem){ .product-grid{gap:var(--sp-5)} }
.product-card{
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-xl);
box-shadow:var(--shadow-1);
padding:clamp(var(--sp-5),2.2vw,var(--sp-6));
color:inherit;
position:relative;
transition:transform var(--t-med) var(--ease),
box-shadow var(--t-med) var(--ease),
border-color var(--t-med) var(--ease);
}
.product-card:hover{
text-decoration:none;transform:translateY(-3px);
box-shadow:var(--shadow-3);border-color:var(--accent-soft);
}
.product-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* A thin accent rule along the top edge, so the four read as a family that
differs only by hue. Full width and clipped by the card's own radius —
inset it and it detaches from the corner and reads as a floating bar. */
.product-card{overflow:hidden}
.product-card::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--accent);opacity:.9;
}
.product-card__head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.product-card__icon{
width:56px;height:56px;flex:none;display:grid;place-items:center;
border-radius:var(--r-lg);
background:var(--accent-soft);color:var(--accent);
}
.product-card__icon svg{width:26px;height:26px}
.product-card__name{
font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);font-weight:500;
letter-spacing:-.015em;color:var(--paiq-navy);line-height:1.2;margin:0;
}
.product-card__setting{
display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:4px;
}
.product-card__purpose{
font-size:var(--fs-lead);line-height:1.4;color:var(--accent);
font-weight:500;margin:0 0 var(--sp-3);
}
.product-card__capability{
font-size:var(--fs-small);color:var(--ink-2);margin:0 0 var(--sp-4);
line-height:1.55;
}
.product-card__cta{
margin-top:auto;display:inline-flex;align-items:center;gap:var(--sp-2);
font-size:var(--fs-small);font-weight:500;color:var(--accent);
}
.product-card__cta svg{width:15px;height:15px;transition:transform var(--t-med) var(--ease)}
.product-card:hover .product-card__cta svg{transform:translateX(4px)}
/* ── The explanatory band, below the cards ── */
.app-arch{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:58rem){.app-arch{grid-template-columns:1fr 1fr;gap:var(--sp-7)}}
.app-arch__point{margin-bottom:var(--sp-5)}
.app-arch__point h3{
font-size:var(--fs-small);font-weight:500;color:var(--paiq-navy);
margin-bottom:var(--sp-2);
}
.app-arch__point p{font-size:var(--fs-small);color:var(--ink-2);margin:0}
/* ─────────── APPLICATION PAGE, SPA-FIRST (launch polish, 1 Sep 2026) ───────────
The working application now sits directly under the name and the one
line that describes it, so the hero is short by design: no button row,
no two-column grid, nothing between the reader and the product. */
.app-hero--lean{padding-block:clamp(var(--sp-5),3.5vw,var(--sp-6))}
.app-hero--lean .app-hero__badge{margin-bottom:var(--sp-4)}
.app-hero--lean h1{margin-bottom:var(--sp-2)}
.app-hero--lean .app-hero__strap{margin-bottom:0;max-width:52ch}
/* The explanation that used to be a narrow column beside the hero. Below a
full-width application it becomes one centred block, and the family runs
in a single row rather than wrapping four-then-two. */
.app-intro{max-width:62ch;margin:0 auto var(--sp-6);text-align:center;color:var(--ink-2)}
.app-aside--wide{max-width:62rem;margin-inline:auto}
.app-aside--wide .eyebrow{text-align:center}
.app-aside--wide .layerstack{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:52rem){
.app-aside--wide .layerstack{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ─────────── APPLICATION TEASER — static product preview ───────────
Replaced the embedded working application on 1 Sep 2026. Everything
here styles pictures: there is no application markup on the page, so
there is nothing to give an interactive state to. Do not add hover or
focus affordances to the images — they are not controls, and making
them look like controls is the one thing this block must not do. */
.teaser{margin:0 auto;max-width:1180px;padding-inline:var(--gutter)}
.teaser__shot{
display:block;width:100%;height:auto;
background:var(--white);
border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-3);
}
.teaser__caption{
margin:var(--sp-4) auto 0;max-width:54ch;
text-align:center;
font-size:var(--fs-lead);font-weight:500;line-height:1.35;
color:var(--paiq-navy);
}
/* Three details from the same screen, one shape, so the row reads as a
set rather than three unrelated crops. */
.teaser__glimpses{
list-style:none;margin:var(--sp-6) 0 0;padding:0;
display:grid;gap:var(--sp-4);
grid-template-columns:repeat(3,minmax(0,1fr));
}
.teaser__glimpse img{
display:block;width:100%;height:auto;
background:var(--white);
border:1px solid var(--line-soft);border-radius:var(--r-md);
box-shadow:var(--shadow-1);
}
.teaser__glimpse span{
display:block;margin-top:var(--sp-3);
font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);
}
@media (max-width:44rem){
.teaser__glimpses{grid-template-columns:1fr;gap:var(--sp-5)}
}
.teaser__foot{
margin-top:var(--sp-6);
display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:var(--sp-4);
}
.teaser__note{
margin:0;max-width:46ch;
font-size:var(--fs-small);line-height:1.5;color:var(--ink-3);
}
/* ─────────────────── TESTIMONIAL CARDS ───────────────────
Same card as the rest of the site — white, hairline border, soft
shadow. A placeholder is the identical shape in muted type, so a real
quote replacing one changes nothing but the words. Not interactive. */
.quote-grid{
list-style:none;margin:0;padding:0;
display:grid;gap:var(--sp-4);
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:52rem){.quote-grid{grid-template-columns:1fr;gap:var(--sp-3)}}
.quote-grid > li{margin-bottom:0;display:flex}
.quote-card{
display:flex;flex-direction:column;gap:var(--sp-3);
width:100%;margin:0;
padding:var(--sp-5);
background:var(--white);
border:1px solid var(--line-soft);border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
}
.quote-card__quote{
margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--ink);
}
.quote-card__by{
margin-top:auto;padding-top:var(--sp-3);
border-top:1px solid var(--line-soft);
display:flex;flex-direction:column;gap:2px;
}
.quote-card__name{font-size:var(--fs-small);font-weight:500;color:var(--paiq-navy)}
.quote-card__role{font-size:var(--fs-small);color:var(--ink-3);line-height:1.4}
.quote-card--placeholder{background:var(--paper);border-style:dashed}
.quote-card__label{
margin:0;
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.quote-card--placeholder .quote-card__quote{color:var(--ink-3)}
/* ─────────────────── EDITORIAL PAGE BODY ───────────────────
POLISH PASS, 28 September 2026. Used on /about/.
The interior layout gives every page the site's full h2, which is right
on a page whose sections run for several paragraphs and wrong on one
whose sections run for two. About read as a column of large headings with
text wedged between them. This does three things and nothing else:
drops the subheadings one step to the h3 size, puts a hairline and real
air above each one, and lets the paragraphs set the rhythm. It is still
prose on a page — no cards, no panels, no icons. */
.editorial > h2{
font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em;font-weight:500;
color:var(--paiq-navy);
margin:var(--sp-8) 0 var(--sp-4);
padding-top:var(--sp-5);
border-top:1px solid var(--line);
}
/* The first heading follows the page's own standfirst, which already
separates it from what came before; a rule there would be a second
divider doing the same job. */
.editorial > h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--sp-6)}
.editorial > p{
margin:0 0 var(--sp-4);
line-height:1.7;color:var(--ink-2);max-width:66ch;
}
.editorial > p:last-of-type{margin-bottom:0}
/* A one-line paragraph immediately under a heading is the page's own
rhetorical device — "Healthcare does not happen in neat, isolated
systems." It earns a little more size than the prose that follows it. */
.editorial > h2 + p{
font-size:var(--fs-lead);line-height:1.55;color:var(--ink);
}
/* ─────────────────── TEAM ───────────────────
Compact credibility section for /about/. Initials are intentional
placeholders for a consistent, professional presentation without relying
on photography. */
.team-section{
margin:var(--sp-9) 0 var(--sp-8);
padding-top:var(--sp-7);
border-top:1px solid var(--line);
}
.team-section__intro{max-width:48rem;margin-bottom:var(--sp-6)}
.team-section__intro .eyebrow{
margin:0 0 var(--sp-3);
font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--paiq-teal);
}
.team-section__intro h2{
margin:0 0 var(--sp-4);
font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em;
font-weight:500;color:var(--paiq-navy);
}
.team-section__intro > p:last-child{
margin:0;max-width:66ch;
font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);
}
.team-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--sp-4);
}
.team-card{
display:grid;
grid-template-columns:56px 1fr;
gap:var(--sp-4);
align-items:start;
padding:var(--sp-5);
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
}
.team-card__mark{
width:56px;height:56px;border-radius:50%;
display:grid;place-items:center;
background:linear-gradient(145deg,var(--blue-050),var(--green-050));
border:1px solid var(--line);
font-family:var(--mono);font-size:.8rem;font-weight:500;
letter-spacing:.08em;color:var(--paiq-navy);
}
.team-card h3{
margin:0 0 2px;
font-size:var(--fs-h3);font-weight:500;color:var(--paiq-navy);
}
.team-card__role{
margin:0 0 var(--sp-3)!important;
font-family:var(--mono);font-size:var(--fs-eyebrow)!important;
letter-spacing:.08em;text-transform:uppercase;color:var(--paiq-teal)!important;
}
.team-card p:last-child{
margin:0!important;
max-width:none!important;
font-size:var(--fs-small)!important;
line-height:1.6!important;color:var(--ink-2)!important;
}
.team-card:last-child{grid-column:1 / -1}
@media (min-width:64rem){
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.team-card:last-child{grid-column:auto}
}
@media (max-width:44rem){
.team-grid{grid-template-columns:1fr}
.team-card:last-child{grid-column:auto}
}
/* ─────────────────── CTA PANEL, REBALANCED ───────────────────
POLISH PASS, 28 September 2026.
The panel stacked heading, paragraph, button and note down its left side
and left the right half of a desktop panel empty, which read as something
unfinished rather than something composed. It is now two columns from
56rem up: the argument on the left, the action and the time-to-live line
on the right, both vertically centred. Below that width it stacks exactly
as it did before. No content was added to fill the space — everything in
the panel was already there. */
@media (min-width:56rem){
.demo-cta{
display:grid;grid-template-columns:1.3fr 1fr;
gap:var(--sp-7);align-items:center;
}
.demo-cta__text > h2{max-width:20ch}
}
.demo-cta__text > h2{font-size:var(--fs-h2);margin:0 0 var(--sp-4)}
.demo-cta__text > p{margin:0}
.demo-cta__action{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.demo-cta__action .btn-row{margin:0}
.demo-cta__action .demo-cta__note{margin:0}
@media (max-width:55.99rem){
.demo-cta__action{margin-top:var(--sp-5)}
}
/* ===== assets/css/connected-intelligence.css ===== */
/* ══════════════════════════════════════════════════════════════════
CONNECTED INTELLIGENCE — the animated hero.
The artwork is a single raster plate. Everything that moves is an SVG
overlay sharing the plate's coordinate space (viewBox 0 0 1672 941), so
the two scale together and the motion stays welded to the picture at
every width. Nothing here is interactive and nothing is explained in
words — the picture and the motion do the work.
One 20s cycle carries the three named journeys, one at a time, so a
visitor can follow each. Ambient movement runs on its own shorter loops.
══════════════════════════════════════════════════════════════════ */
.ci-hero{position:relative;width:100%;max-width:1672px;margin-inline:auto}
.ci-hero__plate{display:block;width:100%;height:auto}
.ci-hero__fx{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;overflow:visible;
}
/* ── The routes that are not drawn in the artwork ──
NHS 111 to virtual triage, and discharge to scan across to the virtual
ward, are new lines. They sit at a whisper so the route reads between
pulses without competing with the plate. */
.ci-guide{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.22}
/* ── Pulses ── two passes of the same dash: a wide soft bloom and a thin
bright core. pathLength is normalised to 1000 on every path so one set
of keyframes drives routes of any length. */
.ci-pulse{fill:none;stroke-linecap:round;opacity:0}
.ci-pulse--bloom{stroke-width:13;filter:url(#ciGlow);opacity:0}
.ci-inrush.ci-pulse--bloom{stroke-width:16}
.ci-inrush.ci-pulse--core{stroke-width:4}
.ci-pulse--core{stroke-width:3.5}
/* ── The light layer ──
Blends in screen mode so it ADDS light to the artwork underneath instead
of painting over it. This is the difference between the virtual hospital
looking lit from within and looking like something drawn on top of it.
Only blue lives here: over the pale left half screen mode washes out. */
.ci-hero__fx--glow{mix-blend-mode:screen}
/* Sections of the mesh illuminating and fading, each on its own period. */
.ci-mesh{
animation-name:ciMesh;animation-iteration-count:infinite;
animation-timing-function:cubic-bezier(.4,0,.5,1);
opacity:0;
}
@keyframes ciMesh{
0%,100%{opacity:.05}
42% {opacity:.46}
62% {opacity:.30}
}
/* A point of light rather than a streak: a two-unit dash, round capped. */
.ci-amb--dot{
stroke-dasharray:2 2000;stroke-dashoffset:2004;
stroke-width:4;stroke-linecap:round;fill:none;
animation-name:ciAmbientDot;animation-timing-function:linear;
}
@keyframes ciAmbientDot{
0% {stroke-dashoffset:2004;opacity:0}
8% {stroke-dashoffset:1924;opacity:.95}
92% {stroke-dashoffset:1082;opacity:.95}
100%{stroke-dashoffset:1002;opacity:0}
}
/* An outer service surging in to the centre. Long, bright and rare: it
waits out most of its cycle, then crosses the whole route in one go.
The offsets must span 2320 to 1160 — the full length — or the surge
fades out halfway and never actually reaches the orb. */
.ci-inrush{
stroke-dasharray:160 2000;stroke-dashoffset:2320;
animation-name:ciInrush;animation-iteration-count:infinite;
animation-timing-function:linear;opacity:0;
}
@keyframes ciInrush{
0% {stroke-dashoffset:2320;opacity:0}
70% {stroke-dashoffset:2320;opacity:0}
71.5% {stroke-dashoffset:2218;opacity:.9}
85.5% {stroke-dashoffset:1263;opacity:.9}
87% {stroke-dashoffset:1160;opacity:0}
100% {stroke-dashoffset:1160;opacity:0}
}
/* ── Named journeys ─────────────────────────────────────────────── */
/* The gap is wider than the path on purpose. pathLength is 1000, so a gap
of 2000 guarantees only ONE dash can ever sit on the route: with a gap
smaller than the path the pattern repeats and a second pulse appears
behind the first the moment the offset passes zero. */
.ci-flow{stroke-dasharray:80 2000;stroke-dashoffset:2160;animation-duration:44s;animation-iteration-count:infinite;animation-timing-function:linear}
.ci-flow--a{animation-name:ciFlowA}
.ci-flow--b{animation-name:ciFlowB}
.ci-flow--c{animation-name:ciFlowC}
.ci-flow--d{animation-name:ciFlowD}
.ci-flow--e{animation-name:ciFlowE}
.ci-flow--f{animation-name:ciFlowF}
.ci-flow--g{animation-name:ciFlowG}
/* Every dashoffset step is stated on the same keyframe as its opacity and
the whole animation runs linear, so the pulse travels at a constant,
readable speed. Leave the intermediate offsets in: without them the
easing between keyframes distorts where the pulse actually is. */
@keyframes ciFlowA{
0% {stroke-dashoffset:2160;opacity:0}
1.1364% {stroke-dashoffset:2160;opacity:0}
2.0455% {stroke-dashoffset:2074;opacity:1}
11.5909% {stroke-dashoffset:1166;opacity:1}
12.5% {stroke-dashoffset:1080;opacity:0}
45.4545% {stroke-dashoffset:1080;opacity:0}
}
@keyframes ciFlowB{
0% {stroke-dashoffset:2160;opacity:0}
15.9091% {stroke-dashoffset:2160;opacity:0}
16.3636% {stroke-dashoffset:2077;opacity:1}
21.3636% {stroke-dashoffset:1164;opacity:1}
21.8182% {stroke-dashoffset:1080;opacity:0}
45.4545% {stroke-dashoffset:1080;opacity:0}
}
@keyframes ciFlowC{
0% {stroke-dashoffset:2160;opacity:0}
25% {stroke-dashoffset:2160;opacity:0}
25.9091% {stroke-dashoffset:2074;opacity:1}
35.4545% {stroke-dashoffset:1166;opacity:1}
36.3636% {stroke-dashoffset:1080;opacity:0}
45.4545% {stroke-dashoffset:1080;opacity:0}
}
/* The return leg. It occupies 82-96% of the cycle, which was the only
stretch still empty — nothing already approved was re-timed to fit it in.
It is a little brisker than the outward leg, which suits a journey home. */
@keyframes ciFlowD{
0% {stroke-dashoffset:2160;opacity:0}
37.2727% {stroke-dashoffset:2160;opacity:0}
37.8182% {stroke-dashoffset:2067;opacity:1}
43.0909% {stroke-dashoffset:1173;opacity:1}
43.6364% {stroke-dashoffset:1080;opacity:0}
45.4545% {stroke-dashoffset:1080;opacity:0}
}
/* ── The patient ──
A figure rides the pulse on a patient journey. Information routes never
carry one: person = a patient moving, pulse = intelligence moving, and
the picture stops meaning anything if the two are mixed.
Position comes from on the same 20s loop as the pulse,
so the figure travels inside its glow. Colour is the problem the shape
does not solve: a pale figure vanishes over the pale left half and a
dark one vanishes over the blue, so the body darkens and lightens as it
crosses, and the halo behind it only earns its keep on the blue side. */
.ci-person{opacity:0;animation-duration:44s;animation-iteration-count:infinite;animation-timing-function:linear}
/* The figure is a stroked stick person, not a filled blob: a round head,
a torso, arms and two legs, because that is what reads instantly at this
size. Nothing inside #ciFigure sets stroke-width or colour — both are set
here and inherit into the