/* ══════════════════════════════════════════════════════════════════
   FuseLoom — the shared shell for the Ultimate design.
   Extracted from design-1.html so every page carries the same tokens,
   navigation, buttons, layout, founder card, call to action and footer
   without each one repeating a quarter of a megabyte of CSS.
   Homepage-only diagram styling stays in the homepage; it is no use to a
   policy page and would triple the weight of one.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════ ULTIMATE — tokens ═══════════════
   Two threads tell the whole story: GOLD = your people's time.
   TEAL = the machine. Where they cross, light.                */
@view-transition{navigation:auto}
:root{
  --ink:#060B12;          /* deep navy-black ground */
  --ink-2:#0B1420;        /* raised panel */
  --ink-3:#111D2C;        /* hover panel */
  --line:rgba(180,212,238,.13);
  --line-2:rgba(180,212,238,.24);
  --txt:#EAF2FA;
  --mut:#8FA3B8;
  --gold:#F2C879;         /* human hours */
  --gold-d:#D8A845;
  --teal:#2FE3C4;         /* the machine */
  --teal-d:#12B79C;

  --t1:140ms; --t2:280ms; --t3:520ms; --t4:820ms;
  --e:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.28,.42,1);

  --pad:clamp(20px,4.4vw,64px);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--ink);color:var(--txt);
  font:400 clamp(15.5px,.42vw + 14px,17.5px)/1.65 'Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;text-wrap:balance;letter-spacing:-.02em;line-height:1.04}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
canvas,svg{display:block}
.mono{font-family:'Space Mono',monospace}
::selection{background:var(--teal);color:var(--ink)}

/* grain + ambient light */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.glowfield{position:fixed;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(58vw 46vw at 78% 6%,rgba(47,227,196,.10),transparent 62%),
  radial-gradient(46vw 40vw at 8% 52%,rgba(242,200,121,.07),transparent 66%),
  radial-gradient(52vw 44vw at 88% 92%,rgba(47,227,196,.06),transparent 66%)}

/* ═══════════════ page spine (the two threads) ═══════════════ */
#spine{position:fixed;inset:0;z-index:2;pointer-events:none}
#spine path{fill:none;stroke-linecap:round}
#spineG{stroke:var(--gold);stroke-width:1.35;opacity:.5}
#spineT{stroke:var(--teal);stroke-width:1.35;opacity:.5}

/* ═══════════════ nav ═══════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
 padding:14px var(--pad);border-bottom:1px solid transparent;transition:background var(--t3) var(--e),border-color var(--t3) var(--e),padding var(--t3) var(--e)}
.nav.stuck{background:rgba(6,11,18,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:11px;padding-bottom:11px}
@supports not (backdrop-filter:blur(1px)){.nav.stuck{background:#060B12f2}}
.wm{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:44px;view-transition-name:wordmark}
.wm i{font-style:normal;background:linear-gradient(180deg,var(--gold),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
.navlinks a:not(.pill){font-size:13.5px;font-weight:500;color:var(--mut);padding:12px 2px;position:relative;transition:color var(--t2) var(--e)}
.navlinks a:not(.pill):hover{color:var(--txt)}
.navlinks a:not(.pill)::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--teal));transition:right var(--t2) var(--e)}
.navlinks a:not(.pill):hover::after{right:0}
@media(max-width:900px){.navlinks a:not(.pill){display:none}}

/* ═══════════════ buttons ═══════════════ */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;
 padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;border:0;
 font-family:'Instrument Sans',sans-serif;position:relative;overflow:hidden;
 transition:transform var(--t2) var(--e),box-shadow var(--t2) var(--e)}
.pill-lume{background:linear-gradient(103deg,var(--gold) 0%,#FFE6AE 42%,var(--teal) 100%);color:#08131A;
 box-shadow:0 10px 34px -10px rgba(242,200,121,.5),inset 0 1px 0 rgba(255,255,255,.45)}
.pill-lume:hover{transform:translateY(-2px);box-shadow:0 18px 46px -10px rgba(47,227,196,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.pill-lume::after{content:"";position:absolute;inset:0;left:-70%;width:45%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
 transition:left var(--t4) var(--e)}
.pill-lume:hover::after{left:130%}
.pill-ghost{background:rgba(180,212,238,.05);border:1px solid var(--line-2);color:var(--txt)}
.pill-ghost:hover{transform:translateY(-2px);background:rgba(180,212,238,.1)}
.pill svg{transition:transform var(--t2) var(--e)}
.pill:hover svg{transform:translateX(3px)}
.nav .pill{min-height:42px;padding:11px 19px;font-size:14px}

/* ═══════════════ layout ═══════════════ */
main{position:relative;z-index:3}
section{position:relative;padding:clamp(84px,11.5vh,150px) var(--pad)}
.shell{max-width:var(--maxw);margin:0 auto;width:100%}
.kick{display:inline-flex;align-items:center;gap:11px;font-family:'Space Mono',monospace;font-size:11.5px;
 letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.kick::before{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--teal))}
h2{font-size:clamp(30px,4.3vw,58px);font-weight:700;max-width:19ch}
.lede{margin-top:18px;color:var(--mut);font-size:clamp(16px,.5vw + 14.5px,18.5px);max-width:56ch}
.lede b{color:var(--txt);font-weight:600}
.lume{background:linear-gradient(96deg,var(--gold) 8%,#FFE9BC 40%,var(--teal) 92%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--t4) var(--e),transform var(--t4) var(--e);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ═══════════════ hero ═══════════════ */
.hero{padding:clamp(104px,15vh,150px) var(--pad) clamp(56px,8vh,86px)}
/* the grid lives on the inner shell, exactly like every other section, so the
   headline's left edge lines up with every heading below it at any width */
.hero .shell{min-height:calc(100svh - clamp(160px,23vh,236px));display:grid;
 grid-template-columns:1.04fr .96fr;align-items:center;gap:clamp(18px,3vw,52px)}
/* sized for the longest of the four lines ("and knows when to") to sit
   inside the text column at every width — measured, not guessed */
.hero h1{font-size:clamp(32px,4.5vw,62px);font-weight:800;letter-spacing:-.03em}
.hero h1 span{display:block;overflow:hidden}
/* Timings are deliberately short. The review's finding: the call to action used
   to arrive at 0.95s, so it did not exist for the first second of the five the
   page gets. Everything the visitor must see is on screen inside half a second. */
.hero h1 span b{display:block;font-weight:inherit;transform:translateY(112%);animation:up .68s var(--e) forwards}
.hero h1 span:nth-child(1) b{animation-delay:.04s}
.hero h1 span:nth-child(2) b{animation-delay:.11s}
.hero h1 span:nth-child(3) b{animation-delay:.18s}
.hero h1 span:nth-child(4) b{animation-delay:.25s}
@keyframes up{to{transform:translateY(0)}}
.hero .sub{margin-top:26px;max-width:50ch;color:var(--mut);opacity:0;animation:fade .5s var(--e) forwards .14s}
.hero .sub b{color:var(--txt);font-weight:600}
.hero .cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap;opacity:0;animation:fade .5s var(--e) forwards .2s}
.hero .trust{margin-top:20px;font-size:13.5px;color:var(--mut);opacity:0;animation:fade .5s var(--e) forwards .28s;max-width:52ch}
.hero .trust b{color:var(--txt);font-weight:600}

/* sectors: a quiet strip, because it answers "have you thought about a bank?"
   and nothing more. Labelled so it can never read as a wall of clients. */
.sectors{margin-top:clamp(24px,3.4vh,38px);padding-top:16px;border-top:1px solid var(--line);
 opacity:0;animation:fade .5s var(--e) forwards .36s}
.sectors .sk{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--mut);margin-bottom:11px}
.sectors ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.sectors li{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.09em;color:#B0C0D0;
 border:1px solid var(--line);border-radius:999px;padding:5px 11px;
 transition:border-color var(--t2) var(--e),color var(--t2) var(--e)}
.sectors li:hover{border-color:var(--line-2);color:var(--txt)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11.5px;
 letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:22px;opacity:0;animation:fade .5s var(--e) forwards .02s}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:bp 2.6s ease-in-out infinite}
@keyframes bp{50%{opacity:.35;transform:scale(.75)}}
@keyframes fade{to{opacity:1}}
.stage{position:relative;aspect-ratio:1/1;max-height:76svh}
#loom{width:100%;height:100%;touch-action:pan-y;cursor:grab}
#loom:active{cursor:grabbing}
.hint{position:absolute;right:4px;bottom:2px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.22em;
 text-transform:uppercase;color:var(--mut);opacity:0;animation:fade 1s var(--e) forwards 1.9s;pointer-events:none}
.stagekey{position:absolute;left:4px;bottom:2px;display:flex;gap:14px;font-family:'Space Mono',monospace;font-size:10.5px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--mut);opacity:0;animation:fade 1s var(--e) forwards 1.9s;pointer-events:none}
.stagekey i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
@media(max-width:940px){
  .hero{padding-top:clamp(96px,13vh,130px)}
  .hero .shell{grid-template-columns:1fr}
  .stage{order:2;max-height:none;aspect-ratio:1/.84;margin-top:8px}
}


/* ═══════════════ method ═══════════════ */
.rail{margin-top:clamp(38px,6vh,64px);position:relative}
.railline{position:absolute;top:13px;left:0;right:0;height:2px;background:rgba(180,212,238,.1);border-radius:2px;overflow:hidden}
.railline b{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--teal));
 transform:scaleX(0);transform-origin:left;transition:transform 2.3s var(--e) .15s}
.rail.in .railline b{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,20px)}
.step{padding-top:44px;position:relative;opacity:0;transform:translateY(20px);
 transition:opacity var(--t4) var(--e),transform var(--t4) var(--e)}
.rail.in .step{opacity:1;transform:none}
.rail.in .step:nth-child(2){transition-delay:.34s}.rail.in .step:nth-child(3){transition-delay:.68s}
.rail.in .step:nth-child(4){transition-delay:1.02s}.rail.in .step:nth-child(5){transition-delay:1.36s}
.knot{position:absolute;top:5px;left:0;width:19px;height:19px;border-radius:50%;background:var(--ink);
 border:2px solid var(--teal);box-shadow:0 0 0 4px rgba(47,227,196,.11),0 0 15px rgba(47,227,196,.45)}
.knot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold)}
.step .k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--mut)}
.step h3{font-size:clamp(17px,1.6vw,21px);font-weight:700;margin:7px 0 7px}
.step p{font-size:14px;color:var(--mut);line-height:1.6}
.exit{margin-top:34px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--mut)}
.exit i{flex:none;width:28px;height:1.5px;background:var(--gold)}
.exit b{color:var(--txt);font-weight:600}
@media(max-width:880px){.steps{grid-template-columns:1fr;gap:0}.railline{display:none}
 .step{padding:0 0 24px 34px}.knot{top:2px}
 .step::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:1.5px;background:var(--line)}
 .step:last-child::before{display:none}}

/* ═══════════════ honesty — the standing orders ═══════════════ */
/* the stamp above the four orders: who enforces them, and that they are live */
.ordbar{margin-top:clamp(26px,4vh,40px);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:rgba(180,212,238,.03)}
.ordk{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ordon{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;
 font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.ordon i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;flex:none}
.vows{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.vow{background:var(--ink);padding:clamp(20px,2.6vw,32px);transition:background var(--t3) var(--e)}
.vow:hover{background:var(--ink-2)}
.vow .k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
/* the order's name on its own line — at four across, "Order four · No fake
   numbers" on one mono line would wrap into an untidy two */
.vn{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(17px,1.5vw,20px);
 letter-spacing:-.015em;margin-top:8px}
.vow p{margin-top:10px;font-size:15px;font-weight:400;line-height:1.58;color:#C6D4E3}
.vow p b{color:var(--teal);font-weight:600}
@media(max-width:980px){.vows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vows{grid-template-columns:1fr}}

/* ── the escalation rule, shown as the artifact it actually is ──────────
   Set like a written rule rather than a paragraph, because the argument is
   that it is a rule: three conditions and one consequence, in the words the
   client can open and edit. Gold on the THEN line — that is the human. */
.rule{margin-top:clamp(20px,2.6vh,30px);border:1px solid var(--line);border-radius:18px;overflow:hidden;
 background:linear-gradient(180deg,rgba(11,20,32,.9),rgba(6,11,18,.9))}
.rule-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 16px;
 border-bottom:1px solid var(--line);background:rgba(180,212,238,.03)}
.rule-k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.rule-tag{margin-left:auto;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--teal)}
.rule-body{padding:clamp(15px,2vw,22px)}
.rule-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.rule-list li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:baseline;
 font-size:15.2px;line-height:1.55;color:#C6D4E3}
.rule-list li b{color:var(--txt);font-weight:600}
.rule-n{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--mut);text-align:right}
/* the consequence is the whole point, so it is the only lit line */
.rule-then{padding-top:10px;margin-top:3px;border-top:1px solid var(--line)}
.rule-then .rule-n{color:var(--gold)}
.rule-then span:last-child{color:#F6E6C6}
.rule-then b{color:var(--gold)!important}
.rule-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
 display:flex;gap:12px;align-items:flex-start;font-size:14.4px;line-height:1.55;color:var(--mut)}
.rule-foot i{flex:none;width:24px;height:1.5px;margin-top:11px;background:linear-gradient(90deg,var(--gold),var(--teal))}
.rule-foot b{color:var(--txt);font-weight:600}
@media(max-width:560px){
  .rule-list li{grid-template-columns:46px minmax(0,1fr);gap:10px;font-size:14.4px}
  .rule-tag{margin-left:0}
}

/* ═══════════════ founder ═══════════════ */
.fcard{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,48px);align-items:center;
 border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,52px);
 background:linear-gradient(142deg,rgba(242,200,121,.07),rgba(47,227,196,.05) 55%,transparent)}
.sig{width:clamp(78px,8vw,104px);height:clamp(78px,8vw,104px);border-radius:24px;flex:none;
 background:var(--ink);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
 font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.04em;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.sig i{font-style:normal;background:linear-gradient(180deg,var(--gold),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
blockquote{font-size:clamp(16.5px,1.5vw,21px);line-height:1.6;font-weight:500;max-width:40ch;border:0}
blockquote em{font-style:normal;color:var(--gold)}
.who{margin-top:15px;font-size:14px;color:var(--mut)}
.who b{color:var(--txt);font-weight:600}
@media(max-width:680px){.fcard{grid-template-columns:1fr}}

/* ═══════════════ CTA ═══════════════ */
.final{text-align:center;padding-bottom:clamp(96px,13vh,150px);position:relative;overflow:hidden}
#burst{position:absolute;inset:0;z-index:0;pointer-events:none}
.final .shell{position:relative;z-index:1}
.final .kick{margin-left:auto;margin-right:auto}
/* the closing line is a sentence, not two words — it needs more room per line
   and a slightly smaller top size than the old "Thirty minutes." headline */
.final h2{margin:0 auto;font-size:clamp(31px,4.9vw,64px);max-width:19ch}
.final .lede{margin:20px auto 34px;text-align:center}
.final .pill{min-height:54px;padding:18px 34px;font-size:16.5px}
.final .trust{margin-top:22px;font-size:13.5px;color:var(--mut)}
.final .trust b{color:var(--txt);font-weight:600}

/* ═══════════════ footer ═══════════════ */
/* a real site foot: the promise, then every service and every phase reachable
   from the bottom of the page, then the four orders restated one last time */
footer{position:relative;z-index:3;border-top:1px solid var(--line);padding:clamp(34px,5vh,54px) var(--pad) 88px;
 color:var(--mut);font-size:14px}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;
 grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
/* the footer mark must not share the nav mark's view-transition-name — two
   elements with the same name make the browser skip the transition entirely */
.fbrand .wm{view-transition-name:none}
.fbrand p{margin-top:14px;max-width:34ch;line-height:1.62}
.fbrand p b{color:#C3D2E1;font-weight:500}
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol h4{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--txt);font-weight:400;margin-bottom:4px}
.fcol a,.fcol span{font-size:14px;line-height:1.45;color:var(--mut);transition:color var(--t2) var(--e)}
.fcol a:hover{color:var(--txt)}
.fcol .flink{color:var(--teal)}
.fcol .flink:hover{color:#7BF3DC}
.fbot{max-width:var(--maxw);margin:clamp(30px,4vh,46px) auto 0;padding-top:20px;border-top:1px solid var(--line);
 display:flex;gap:10px 26px;flex-wrap:wrap;font-size:13px}
.forders{margin-left:auto;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--gold-d)}
footer a:hover{color:var(--txt)}
@media(max-width:900px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fbrand{grid-column:1/-1}
  .forders{margin-left:0;width:100%}
}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}


/* ═══════════════ QUESTIONS (.fq-) ═══════════════
   Every answer is complete in the visible text — nothing is summarised and
   nothing is held back for the call — so the page and the FAQPage microdata
   can never drift apart. Colour law holds inside the prose:
   GOLD where a person decides, TEAL where the machine acts. Nothing else
   in an answer is coloured.                                                 */

/* one deliberate off-token value: long prose sits between --txt (too bright
   for paragraphs at this size) and --mut (too dim to read a contract in).
   Declared once, on the section, so it is a token everywhere it is used. */
.fq-sec{--fq-tx:#C6D4E3}

/* body: the list, and a card for the question that isn't on the list */
.fq-body{margin-top:clamp(28px,4.4vh,50px);display:grid;
 grid-template-columns:minmax(0,1fr) minmax(258px,330px);
 gap:clamp(24px,3.6vw,64px);align-items:start}

/* width of the Q0n gutter — the answer indents to match, so question and
   answer share one left edge and the eye never has to re-find the column */
.fq-list{--fq-w:clamp(38px,3.6vw,52px)}
.fq-list>.fq-i:last-child{border-bottom:1px solid var(--line)}

/* ── one question ── */
.fq-i{position:relative;border-top:1px solid var(--line)}
/* the two threads weave across the rule on hover and stay woven while open.
   Decorative only — no information lives in it. */
.fq-i::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
 background:linear-gradient(90deg,var(--gold),var(--teal));pointer-events:none;
 transition:width var(--t3) var(--e)}
.fq-i:hover::after,.fq-i[open]::after{width:100%}
.fq-i[open]{background:linear-gradient(180deg,rgba(180,212,238,.035),transparent 58%)}

/* ── the question row ── */
.fq-q{display:grid;grid-template-columns:var(--fq-w) minmax(0,1fr) auto;align-items:baseline;
 gap:0 14px;padding:clamp(17px,2vw,22px) 0;cursor:pointer;list-style:none}
.fq-q::-webkit-details-marker{display:none}
.fq-q::marker{content:""}
.fq-n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--mut)}
/* open: the index becomes the gradient — the smallest possible "you are here" */
.fq-i[open] .fq-n{background:linear-gradient(96deg,var(--gold),var(--teal));
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fq-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.015em;
 font-size:clamp(16.5px,1.45vw,21px);line-height:1.3;color:var(--txt)}
.fq-ic{width:17px;height:17px;flex:none;color:var(--mut);align-self:center;
 transition:transform var(--t2) var(--e-spring),color var(--t2) var(--e)}
.fq-q:hover .fq-ic{color:var(--gold)}
.fq-i[open] .fq-ic{transform:rotate(135deg);color:var(--txt)}

/* nothing inside a question may bleed out of its row on a narrow screen */
.fq-list,.fq-body{overflow-x:clip}

/* ── the answer ── */
.fq-a{padding:0 0 clamp(20px,2.4vw,26px) var(--fq-w);max-width:74ch;
 color:var(--fq-tx);font-size:15.5px;line-height:1.64}
.fq-a p+p{margin-top:11px}
.fq-a b{color:var(--txt);font-weight:600}
/* the only two colours allowed inside an answer */
.fq-hu{color:var(--gold)}
.fq-ai{color:var(--teal)}
/* the panel appears; it does not stretch. No height animation, so nothing
   janks — and the text is fully readable at frame one either way */
.fq-i[open] .fq-a{animation:fq-rise 300ms var(--e) both}
@keyframes fq-rise{from{opacity:0;transform:translateY(-6px)}}

/* ── the card: the question that isn't on the list ── */
.fq-aside{position:sticky;top:96px;border:1px solid var(--line);border-radius:20px;
 padding:clamp(20px,2.4vw,28px);
 background:linear-gradient(150deg,rgba(242,200,121,.07),rgba(47,227,196,.05) 58%,transparent)}
.fq-ask-k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--mut)}
.fq-aside h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;margin:9px 0 10px}
.fq-aside p{font-size:14.5px;line-height:1.6;color:var(--mut)}
.fq-mail{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:14.5px;
 font-weight:600;color:var(--txt);position:relative;padding-bottom:3px}
.fq-mail::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
 background:linear-gradient(90deg,var(--gold),var(--teal));transition:right var(--t2) var(--e)}
.fq-mail:hover::after{right:0}
/* the page's colour law, restated where the answers use it — visible at rest,
   never behind a hover, so it survives a screenshot */
.fq-key{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
 display:flex;flex-direction:column;gap:8px}
.fq-key span{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;
 font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.fq-key i{width:8px;height:8px;border-radius:50%;flex:none}

@media(max-width:940px){
  .fq-body{grid-template-columns:minmax(0,1fr);gap:30px}
  .fq-aside{position:static}
}
@media(max-width:560px){
  /* the index stays on the phone — it is half the texture of the section —
     it just gives up most of its gutter */
  .fq-list{--fq-w:30px}
  .fq-q{gap:0 10px}
  .fq-n{font-size:10px;letter-spacing:.1em}
  .fq-a{max-width:none}
}


/* ═══════════════ reduced motion: the whole story, still ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .hero h1 span b{transform:none;animation:none}
  .eyebrow,.hero .sub,.hero .cta,.hero .trust,.hero .sectors,.hint,.stagekey{opacity:1;animation:none}
  .rv{opacity:1;transform:none}
  .rail .railline b{transform:none}
  .rail .step{opacity:1;transform:none}
}

/* ═══════════════ accessibility the audit asked for ═══════════════
   Three findings, three rules. A firm selling digital transformation whose own
   site fails a keyboard test is an awkward answer to a procurement question. */

/* 1. a skip link — the first thing a keyboard user needs and the site had none */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 12px 0;
 background:var(--gold);color:#1A1206;font:600 14px/1 'Instrument Sans',sans-serif;text-decoration:none}
.skip:focus{left:0}

/* 2. focus is always visible. The live site sets outline:none on its form fields
      and defines no replacement, so a keyboard user tabbing through the booking
      wizard often cannot tell where they are. */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* 3. the sticky header must not cover whatever the page has just jumped to */
:target{scroll-margin-top:96px}
[id]{scroll-margin-top:96px}


/* ═══════════════ touch and small screens ═══════════════
   Measured, not guessed. At 320, 375 and 768 the layout produced no horizontal
   overflow at all — the grids are already fluid. What it did produce was
   controls too small for a thumb and labels too small to read:

     footer links      335 × 20   · a standalone link 20px tall
     inline mail links 299 × 24
     mono captions     9.5–11.5px · legible on a monitor, not in a hand

   WCAG 2.5.8 asks for 24×24 CSS pixels on anything you tap. That is the floor,
   not the goal, so on a touch device the standalone links get a comfortable 44.
   Inline links inside a sentence are exempt from 2.5.8 and are left alone —
   padding them would tear the paragraph apart. */

/* ── anything with a coarse pointer: give the thumb something to land on ── */
@media (pointer: coarse){
  /* standalone links in the footer, the nav and lists of links */
  .fcol a,
  .navlinks a,
  footer .mid a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* the skip link is the first thing a keyboard or switch user reaches */
  .skip{min-height:44px;display:inline-flex;align-items:center}
}

/* ── narrow screens: raise the floor on type ──
   The mono labels are a deliberate part of the design and stay small, but not
   so small that a caption stops being readable at arm's length. Everything
   below is a floor, applied only where the design had gone under it. */
@media (max-width:640px){
  .fcol a,.fcol span{font-size:15px;line-height:1.5}
  .fbot,.forders{font-size:12.5px}
  /* captions, keys and legends: nothing under 11px on a phone */
  .ct-note,.sv-note,.sv-cap,.sw-note,.sw-bseal,
  .ct-legend,.sv-legend,.stagekey,.hint,
  .pk-yk,.pk-when,.fq-n{font-size:11px;letter-spacing:.08em}
  /* the two lines a reader actually has to take in */
  .sw-note,.ct-note{font-size:12px}
}

/* ── very narrow: the last 40 pixels, where most sites give up ── */
/* The sectors strip is content, not decoration — it is what tells a bank this
   firm has thought about banks — so on a phone it goes UP, not down. At 9.5px
   the label was smaller than anything else on the page. */
@media (max-width:640px){
  .sectors .sk{font-size:10.5px}
  .sectors li{font-size:11.5px;padding:6px 11px}
}
@media (max-width:360px){
  .pk-row{padding:16px 14px}
  .fgrid{gap:22px}
}

/* the remaining sub-11px labels the measurement found on a phone, and the one
   link that is laid out as a row rather than inline — flex display makes it a
   standalone target, so 2.5.8 applies to it and it needs the height */
@media (max-width:640px){
  .sw-h,.rule-k,.fq-in-k,.qa-y span,.fa-note{font-size:11px;letter-spacing:.07em}
}
@media (pointer: coarse){
  .tr-check a{min-height:44px}
}