/* Sixlinked identity: the lockup, the Signal accent, the hero copy and the About section. */
:root{--signal:#c6f27c;--signal-ink:#0b1a0f}

/* Lockup: everything follows the wordmark size. The mark's visible height is 1.2 x the capital height (Instrument
   Sans capitals are .72em) and the visible gap is 0.4 x that height; the mark's viewBox keeps 4.08/32 clear at
   each side, so the CSS gap is smaller than the gap you see. Chosen against 1.15 to 1.25 and 0.35 to 0.45 at
   real header size. */
.brand{--word:18px}
html:root .brand{gap:calc(var(--word)*.213)}
.brand-logo{flex:none;width:calc(var(--word)*1.04);height:calc(var(--word)*1.04);color:var(--ink)}
.brand-word{font-family:Instrument,Arial,sans-serif;font-weight:560;font-size:var(--word);line-height:1;letter-spacing:-.01em;color:var(--ink)}
footer .brand{--word:14px}

/* Signal means "the live connection or the action" and is used nowhere else: a thin underline on the primary
   buttons (the same mark as the selected toggles), the hero descriptor, the About loop and the worked example's
   Connected marker. The primary buttons stay glass; no solid Signal fills (Matthew, 14 November 2026). */
html:root #top .button.primary,html:root #enquiry-form .button.primary{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1.5px;text-underline-offset:9px;color:#f0f6ec}
html:root #enquiry-form fieldset:disabled .button.primary{text-decoration-color:#c6f27c59}
/* The header button matches them: glass with the thin Signal underline, at every width and in the phone menu. */
html:root .site-header .header-contact{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1.5px;text-underline-offset:6px;color:#f0f6ec}

/* Hero copy: descriptor, two-line headline, supporting line, relationship line. One reading block for the tubes. */
.hero-flow .hero-copy{container-type:inline-size}
.hero-flow .hero-copy .hero-eyebrow{margin:0 0 22px;font-size:11px;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:var(--signal);max-width:none}
/* The headline's first line must stay on one line: capped by the copy column (12.1% of its width per px). */
.hero-flow h1{--h1:clamp(50px,5.2vw,82px);font-size:min(var(--h1),12.1cqw)}
@media(min-width:1600px){.hero-flow h1{--h1:82px}}
@media(max-width:1100px) and (min-width:700px){.hero-flow h1{--h1:65px}}


/* About: same section pattern as the others. The six jobs sit on one closed loop, the mark's own layout (a ring
   with six points at 60 degree steps, one at the top), drawn large and light, labels outside. Nothing animates. */
.about{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}
.about>div:first-child{container-type:inline-size}
/* The new two-line headings here are the longest on the page: 9.5% of the column keeps each line whole. */
.about h2{font-size:clamp(27px,9.5cqw,58px)}
.about .intro-copy+.intro-copy{margin-top:18px}
.about-side{min-width:0;display:flex;flex-direction:column;align-items:center}
.about-loop{--r:118px;--dot:44px;--label-gap:12px;position:relative;width:calc(var(--r)*2 + 240px);max-width:100%;height:calc(var(--r)*2 + 100px)}
/* The loop is a glass conduit (the systems diagram's tube), the six jobs are glass nodes on it, and one pulse in
   Signal travels the loop; each node answers as it passes. With motion off it is the complete still. */
.loop-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.loop-ring circle{r:var(--r);fill:none}
.loop-tail{stroke:#c6f27c;stroke-width:2.4;stroke-linecap:round;stroke-opacity:.75;opacity:0}
.about-loop.is-running .loop-tail{opacity:1}
.loop-pulse{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;opacity:0;background:var(--signal-ball)}
.about-loop.is-running .loop-pulse{opacity:1}
.about-points{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.3;color:#c9d6ca}
.about-points li{--a:calc(90deg - var(--k)*60deg);--answer:0;position:absolute;left:calc(50% + cos(var(--a))*var(--r));top:calc(50% - sin(var(--a))*var(--r));width:0;height:0}
.loop-node{position:absolute;left:calc(var(--dot)/-2);top:calc(var(--dot)/-2);width:var(--dot);height:var(--dot);border-radius:50%;display:grid;place-items:center;box-shadow:0 1px 2px #02060466,0 10px 22px -8px #020604b3,inset 0 0 0 1px rgb(211 236 189/calc(var(--answer)*.8)),inset 0 0 16px rgb(198 242 124/calc(var(--answer)*.16))}
.loop-node svg{position:relative;z-index:1;width:46%;height:46%;fill:none;stroke:color-mix(in srgb,#f6fcef calc(var(--answer)*100%),#a9bea6);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.loop-label{position:absolute;white-space:nowrap;color:color-mix(in srgb,#eef5ea calc(var(--answer)*100%),#c9d6ca)}
.about-points li:nth-child(1) .loop-label{bottom:calc(var(--dot)/2 + var(--label-gap));left:0;transform:translateX(-50%)}
.about-points li:nth-child(4) .loop-label{top:calc(var(--dot)/2 + var(--label-gap));left:0;transform:translateX(-50%)}
.about-points li:nth-child(2) .loop-label,.about-points li:nth-child(3) .loop-label{left:calc(var(--dot)/2 + var(--label-gap));top:0;transform:translateY(-50%)}
.about-points li:nth-child(5) .loop-label,.about-points li:nth-child(6) .loop-label{right:calc(var(--dot)/2 + var(--label-gap));top:0;transform:translateY(-50%)}
.about-direct{margin:44px 0 0;color:#c9d6c5;font-size:16px;line-height:1.8;max-width:440px;align-self:stretch}
.about-build{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.75;max-width:440px;align-self:stretch;scroll-margin-top:160px}

@media(max-width:1100px){.about{gap:6vw}}
@media(max-width:899px){.about{display:block}.about-side{margin-top:48px;align-items:flex-start}}
@media(max-width:699px){
 .brand{--word:16px}
 /* Centre the lockup on the Menu label (the header aligns to the top on phones). */
 .site-header .brand{min-height:32px}
 footer .brand{--word:13px}
 .hero-flow .hero-copy .hero-eyebrow{font-size:9.5px;margin-bottom:16px}
 .hero-flow h1{--h1:clamp(36px,10.5vw,52px)}
 .about-loop{--r:84px;--dot:36px;--label-gap:8px;width:100%;height:calc(var(--r)*2 + 84px)}
 .about-points{font-size:13px}
 .about-direct{margin-top:28px;font-size:14px}.about-build{font-size:13px}
}
@media(min-width:900px){
 .layout-larger .brand{--word:22px}
 .layout-larger footer .brand{--word:17px}
 .layout-larger .hero-flow .hero-copy .hero-eyebrow{font-size:13.75px;margin-bottom:27px}
 .layout-larger .hero-flow h1{--h1:clamp(62.5px,5.2vw,102.5px);font-size:min(var(--h1),12.1cqw)}
 .layout-larger .about h2{font-size:clamp(33.75px,9.5cqw,72.5px)}
 .layout-larger .about h2{margin-bottom:35px}
 .layout-larger .about-loop{--r:146px;--dot:52px;--label-gap:14px;width:calc(var(--r)*2 + 290px);height:calc(var(--r)*2 + 124px)}
 .layout-larger .about-points{font-size:17.5px}
 .layout-larger .about-direct{font-size:20px;max-width:550px;margin-top:52px}.layout-larger .about-build{font-size:16.25px;max-width:550px;margin-top:16px}
}
@media(min-width:900px) and (max-width:1375px){.layout-larger .hero-flow h1{--h1:81.25px}}
@media(min-width:2000px){.layout-larger .hero-flow h1{--h1:102.5px}}
@media(min-width:900px) and (max-width:1100px){.layout-larger .about{gap:6vw}}

/* About: the two company lines sit with the copy, under a hairline, so the loop stands alone */
.about>div:first-child .about-direct{margin-top:34px;padding-top:26px;border-top:1px solid #dce5d41f;align-self:auto}
.about>div:first-child .about-build{align-self:auto}