/* ============================================================
   CONTACT — ART DIRECTION

   The page is the end of the site, so it is built as an arrival.
   The brand mark is dispersed across the first screen as a cloud of
   its own pixels; scrolling reassembles it; once it holds, the three
   routes an enquiry can take are drawn out of it. Everything after
   that is the consequence of choosing one.

   The motion vocabulary here is deliberately NOT the one used on
   Services or About. Nothing fades up. Type arrives through clip
   wipes with directional travel; the standfirst resolves out of
   blur; rows uncover left to right; the mark reconstructs; the
   submit control is magnetic. Scroll drives the first screen
   directly rather than triggering it.

   Scoped under .cx-* so it cannot reach any other page.
   ============================================================ */

:root{ --cx-ink:#F6FAFF; }

/* ============================================================
   1. THE ARRIVAL — pinned, scroll-driven
   ============================================================ */
/* ============================================================
   ARRIVAL AND ENQUIRY — one screen

   The page's only job is an enquiry, so the form is on the first
   screen rather than a full viewport below it. The mark still
   assembles behind the composition; it is the backdrop now
   instead of its own stage.
   ============================================================ */
.cx-hero{
  position:relative;isolation:isolate;overflow:clip;
  padding:clamp(94px,13vh,132px) var(--gut) clamp(46px,7vh,84px);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(6,44,199,.2), transparent 62%),
    linear-gradient(180deg,#04060B,#05080F 52%,#04060B);
  border-bottom:1px solid rgba(168,210,236,.12);
}
.cx-hero__fx{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  opacity:.45;pointer-events:none;
}
.cx-hero__in{
  --engap:clamp(30px,3.6vw,60px);
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:var(--engap);align-items:start;
}
@media (min-width:1000px){
  .cx-hero__in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
}
.cx-hero__say{min-width:0;}
.cx-hero__form{position:relative;min-width:0;}

/* On one column the form would otherwise sit two screens down, behind the
   prompts and the what-happens-next list. Below 1000px the say block is
   dissolved into the grid so the order can be resequenced: the headline and
   the one-line answer to "where am I", then the direct channels, then the
   form. The supporting lists follow it rather than delaying it. */
@media (max-width:999px){
  .cx-hero__in{gap:0;}
  .cx-hero__say{display:contents;}
  .cx-kick{order:1;}
  .cx-h1{order:2;}
  .cx-say{order:3;}
  .cx-ch{order:4;margin-top:clamp(20px,3vh,30px);}
  .cx-hero__form{order:5;}
  .cx-qz{order:6;margin-top:clamp(34px,5vh,52px);}
  .cx-next{order:7;}
}

.cx-hero__spine{display:none;}
@media (min-width:1000px){
  .cx-hero__spine{
    display:block;position:absolute;z-index:1;
    left:calc((100% - var(--engap)) * 0.46 + var(--engap) / 2);
    top:6px;bottom:6px;width:1px;
    background:rgba(168,210,236,.14);
  }
  .cx-hero__spine i{
    position:absolute;inset:0 auto auto 0;width:100%;
    height:calc(var(--fill,0) * 100%);
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 50%,transparent),var(--accent));
    box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
    transition:height .6s var(--ease-out);
  }
}

.cx-ch{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 clamp(9px,1vw,15px);
  margin:0 0 clamp(22px,3.4vh,38px);
  padding-bottom:16px;
  border-bottom:1px solid rgba(168,210,236,.16);
}
.cx-ch__d{color:rgba(110,126,152,.7);font-size:var(--cx-h4);}
.cx-ch__i{
  position:relative;display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:-.022em;
  color:#DCE7F7;text-decoration:none;
  transition:color .5s var(--ease-out);
}
/* the flood runs on interaction here rather than on entry */
.cx-ch__i::after{
  content:attr(data-t);
  position:absolute;left:0;top:0;white-space:pre;pointer-events:none;
  background:linear-gradient(94deg,
    #054AE0 0%,#054AE0 12%, #0381FB 19%,#0381FB 31%,
    #8FD0FF 38%,#8FD0FF 49%, #5FD8FF 56%,#5FD8FF 67%,
    #3B9DFF 74%,#3B9DFF 85%, #6FB8FF 92%,#6FB8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--mf),transparent var(--mf));
          mask-image:linear-gradient(90deg,#000 0 var(--mf),transparent var(--mf));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:--mf .62s var(--ease-out);
}
.cx-ch__i::before{             /* the rule that draws under a route */
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease-out);
}
a.cx-ch__i:hover::after,a.cx-ch__i:focus-visible::after{--mf:100%;}
a.cx-ch__i:hover::before,a.cx-ch__i:focus-visible::before{transform:scaleX(1);}
/* the third route is a statement, not a link — it floods on its own
   when the section arrives, which is what ties the line together */
.cx-ch__i--s{color:rgba(170,184,206,.95);}
html.js .cx-hero.is-in .cx-ch__i--s::after{--mf:100%;transition-delay:.9s;}
@supports not (background-clip:text){ .cx-ch__i::after{display:none;} }

/* ---- the queries — what the visitor already recognises -------
   The page used to open its left column with "what happens next",
   which is our process. It now opens with theirs: seven things a
   marketing decision-maker actually thinks, so the first thing
   someone reads is their own situation rather than ours. -------- */
.cx-qz{
  list-style:none;margin:0 0 clamp(24px,3.4vh,38px);padding:0;
  border-top:1px solid rgba(168,210,236,.11);
}
.cx-qz li{
  position:relative;
  padding:clamp(10px,1.5vh,14px) 0 clamp(10px,1.5vh,14px) clamp(24px,2.2vw,32px);
  border-bottom:1px solid rgba(168,210,236,.11);
  font-size:var(--cx-bd);line-height:1.42;
  color:rgba(196,208,228,.96);
  transition:color .45s var(--ease-out);
}
/* a short accent rule rather than a bullet — the same marker the
   form fields use, so the two halves share a vocabulary */
.cx-qz li::before{
  content:"";position:absolute;left:0;top:calc(clamp(10px,1.5vh,14px) + .68em);
  width:7px;height:7px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 72%,transparent);
  transition:width .45s var(--ease-out), background .45s var(--ease-out);
}
.cx-qz li:hover{color:#F1F6FF;}
.cx-qz li:hover::before{width:18px;background:var(--accent);}
html.js .cx-qz li{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .8s var(--ease-out), color .45s var(--ease-out);
  transition-delay:calc(var(--si,0) * 85ms + 120ms);
}
html.js .cx-hero.is-in .cx-qz li{clip-path:inset(0 0 0 0);}

/* ---- the statement ----------------------------------------- */

/* what happens next: the answer to the question every form raises */
.cx-next{
  margin:clamp(22px,3.2vh,32px) 0 0;padding:0;list-style:none;
  display:grid;gap:clamp(11px,1.6vh,16px);
}
.cx-next li{position:relative;padding-left:26px;}
.cx-next li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 22%,transparent);
}
.cx-next li::after{
  content:"";position:absolute;left:4px;top:calc(.42em + 12px);bottom:-14px;
  width:1px;background:rgba(132,150,180,.22);
}
.cx-next li:last-child::after{display:none;}
.cx-next b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h4);letter-spacing:-.022em;color:#F2F7FF;
}
.cx-next span{display:block;margin-top:2px;font-size:var(--cx-cap);
  line-height:1.56;color:rgba(168,182,205,.92);}

.cx-kick{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(20px,3vh,32px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 74%,#fff);
}
.cx-kick::before,.cx-kick::after{
  content:"";width:clamp(22px,4vw,52px);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent));
}
.cx-kick::after{background:linear-gradient(270deg,transparent,var(--accent));}

/* THE HEADLINE — a clip wipe with travel, not a fade */
.cx-h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.05rem,4.2vw,3.5rem);
  line-height:1.0;letter-spacing:-.05em;color:var(--cx-ink);
  margin:0;max-width:15ch;text-wrap:balance;
}
.cx-h1 span{display:block;}
html.js .cx-h1 span{
  clip-path:inset(0 100% 0 0);
  transform:translateX(-.28em);
  transition:clip-path 1.15s var(--ease-out), transform 1.15s var(--ease-out);
  transition-delay:calc(var(--li,0) * 190ms + 260ms);
}
html.js .cx-h1 span:nth-child(even){transform:translateX(.28em);}
html.js .is-in .cx-h1 span{clip-path:inset(0 0 0 0);transform:none;}
.cx-h1 em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 84%,transparent);
}

/* THE STANDFIRST — resolves out of blur */
.cx-say{
  margin:clamp(22px,3.4vh,36px) auto 0;max-width:52ch;
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.66;
  color:rgba(186,198,218,.95);
}
.cx-say strong{color:#EDF3FF;font-weight:600;}
html.js .cx-say{
  opacity:0;filter:blur(11px);
  transition:opacity 1.1s var(--ease-out) .62s, filter 1.3s var(--ease-out) .62s;
}
html.js .is-in .cx-say{opacity:1;filter:blur(0);}


/* ============================================================
   2. THE TYPE SCALE — locked, and the only sizes on this page

   Every heading, every paragraph and every label on Contact draws
   from these seven steps. Nothing sets its own font-size. That is
   what stops the page swinging between 0.56rem mono labels and
   3.1rem display lines with nothing in between: each step is a
   fixed ratio from the one above it, so the relationships hold at
   every viewport.
   ============================================================ */
:root{
  --cx-d1:clamp(2.5rem, 6.4vw, 5.2rem);      /* the arrival, once      */
  --cx-d2:clamp(1.95rem, 4.1vw, 3.3rem);     /* a statement moment     */
  --cx-h2:clamp(1.62rem, 2.7vw, 2.4rem);     /* every section heading  */
  --cx-h3:clamp(1.08rem, 1.5vw, 1.34rem);    /* a block heading        */
  --cx-h4:clamp(.95rem, 1.12vw, 1.05rem);    /* a sub-heading          */
  --cx-bd:clamp(.97rem, 1.05vw, 1.04rem);    /* body                   */
  --cx-cap:.92rem;                           /* caption                */
  --cx-lb:.72rem;                             /* mono label             */
  --cx-lead-bd:1.72;
}

/* the six archetypes, used everywhere below */
.cx-t2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--cx-d2);line-height:1.03;letter-spacing:-.045em;
  color:var(--cx-ink);margin:0;text-wrap:balance;
}
.cx-t3{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--cx-h2);line-height:1.06;letter-spacing:-.038em;
  color:var(--cx-ink);margin:0;text-wrap:balance;
}
.cx-t4{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h3);line-height:1.24;letter-spacing:-.024em;
  color:#F1F6FF;margin:0;
}
.cx-sub{                     /* was a 0.56rem mono whisper — now real  */
  display:block;margin:0 0 8px;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h4);letter-spacing:-.012em;
  color:color-mix(in srgb,var(--accent) 52%,#D7E4F7);
}
.cx-bd{
  margin:0;font-size:var(--cx-bd);line-height:var(--cx-lead-bd);
  color:rgba(172,186,208,.96);
}
.cx-cap{margin:0;font-size:var(--cx-cap);line-height:1.68;color:rgba(158,172,196,.94);}

/* the label — one definition, used by every kicker on the page */
.cx-no{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  /* Measured 4.1:1 on the rendered page. These kickers are small uppercase
     type, which WCAG counts as normal text, so they need 4.5:1 — lifted
     to clear it with room rather than sit on the line. */
  color:rgba(158,172,196,.96);
}
.cx-no::after{content:"";flex:1;height:1px;max-width:130px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent);}
.cx-no--r{flex-direction:row-reverse;}
.cx-no--r::after{background:linear-gradient(270deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent);}

/* retype the shared furniture About also uses */
.cx-say{font-size:var(--cx-bd);line-height:var(--cx-lead-bd);}
.cx-lead{
  display:grid;gap:clamp(14px,3vw,50px);
  margin-bottom:clamp(34px,5vh,60px);
}
@media (min-width:900px){
  .cx-lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;}
}

/* ============================================================
   3. THE ENQUIRY — one composition, not two blocks

   The statement and the form used to be two full sections one
   after the other, which meant the page said "you write, we read,
   we reply" twice before it said anything new. They are now a
   single asymmetric field: the promise holds the left while the
   form scrolls past it on the right, and a spine between them
   fills as the form is completed — so the two halves are wired to
   each other rather than simply adjacent.

   Deliberately not 50/50. The left column is narrower and set at
   display scale; the right is wider and set at interface scale,
   and the form's offset frame crosses back into the gutter.
   ============================================================ */
.cx-en__hd{margin:0 0 clamp(18px,2.6vh,28px);}
.cx-en__hd .cx-bd{margin-top:12px;max-width:54ch;}

.cx-form{
  position:relative;isolation:isolate;
  padding:clamp(26px,2.8vw,42px);
  background:linear-gradient(165deg,rgba(8,12,21,.94),rgba(4,6,11,.88));
  transition:box-shadow .8s var(--ease-out);
  border:1px solid rgba(168,210,236,.18);
}
.cx-form::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:conic-gradient(from calc(var(--sweep,0deg)),
    transparent 0deg, color-mix(in srgb,var(--accent) 62%,transparent) 40deg,
    transparent 110deg, transparent 360deg);
  opacity:0;transition:opacity .8s var(--ease-out);
}
.cx-form::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:linear-gradient(165deg,#070B14,#04060B);
}
.cx-form:focus-within::before,
[data-intake-host].is-ready .cx-form::before{opacity:1;animation:cx-sweep 5.5s linear infinite;}
.cx-form:focus-within{border-color:transparent;}
[data-intake-host].is-ready .cx-form{
  border-color:transparent;
  box-shadow:0 48px 100px -60px color-mix(in srgb,var(--accent) 95%,transparent);
}
@keyframes cx-sweep{to{--sweep:360deg;}}
@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false;}

.cx-form .gate__k{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 72%,#fff);margin:0 0 10px;
}
.cx-form .gate__h{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--cx-h3);letter-spacing:-.03em;
  color:#F2F7FF;margin:0 0 8px;
}
.cx-form .gate__s{
  margin:0 0 clamp(20px,2.8vh,30px);font-size:var(--cx-cap);line-height:1.66;
  color:rgba(166,180,203,.95);
}

/* fields uncover in sequence rather than fading in */
.cx-form .gate__f{
  position:relative;display:block;
  padding:26px 0 13px 44px;
  border-bottom:1px solid rgba(168,210,236,.14);
  cursor:text;
  transition:border-color .5s var(--ease-out);
}
html.js .cx-form .gate__f{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .95s var(--ease-out), border-color .5s var(--ease-out);
  transition-delay:calc(var(--si,0) * 110ms + 180ms);
}
html.js .cx-hero.is-in .gate__f{clip-path:inset(0 0 0 0);}
/* no numerals — a field marker holds the gutter instead */
.cx-form .gate__f::before{
  content:"";position:absolute;left:0;top:30px;
  width:10px;height:1px;background:rgba(110,126,152,.75);
  transition:background .5s var(--ease-out), width .5s var(--ease-out);
}
.cx-form .gate__f::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease-out);
}
.cx-form .gate__f.is-live::after{transform:scaleX(1);}
.cx-form .gate__f.is-live::before,
.cx-form .gate__f.is-filled::before{background:var(--accent);width:20px;}
.cx-form .gate__f > span{
  position:absolute;left:44px;top:28px;
  font-family:var(--font-body);font-size:1.04rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:rgba(150,165,190,.95);
  pointer-events:none;transform-origin:0 50%;
  transition:transform .55s var(--ease-out), color .5s var(--ease-out),
             font-size .5s var(--ease-out), letter-spacing .5s var(--ease-out);
}
.cx-form .gate__f > span i{font-style:normal;font-size:.84em;color:rgba(116,132,158,.9);}
.cx-form .gate__f.is-live > span,
.cx-form .gate__f.is-filled > span{
  transform:translateY(-24px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 78%,#fff);
}
.cx-form .gate__f input,
.cx-form .gate__f textarea{
  display:block;width:100%;background:none;border:0;outline:none;padding:0;
  font-family:var(--font-body);font-size:1.06rem;line-height:1.55;color:#EEF4FF;
  /* the <label> is the real hit area, but a thumb aimed at the field
     itself should not land on a 26px strip */
  min-height:34px;
}
@media (max-width:760px){
  .cx-form .gate__f input{min-height:40px;}
}
.cx-form .gate__f textarea{resize:vertical;min-height:94px;}
.cx-form .gate__f input::placeholder,
.cx-form .gate__f textarea::placeholder{
  color:rgba(96,110,134,.75);opacity:0;transition:opacity .4s var(--ease-out);
}
.cx-form .gate__f.is-live input::placeholder,
.cx-form .gate__f.is-live textarea::placeholder{opacity:1;}
.cx-form .gate__f.is-filled{border-bottom-color:color-mix(in srgb,var(--accent) 34%,transparent);}

.cx-form .gate__go{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;margin-top:clamp(24px,3.2vh,36px);
  padding:21px 28px;border:0;border-radius:2px;cursor:pointer;
  background:linear-gradient(120deg,#062CC7,#0381FB 52%,#3B9DFF);
  color:#03060E;font-family:var(--font-display);font-weight:800;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 26px 60px -34px color-mix(in srgb,var(--accent) 95%,transparent);
  filter:saturate(.5) brightness(.76);
  transform:translate(var(--mgx,0px),var(--mgy,0px));
  transition:filter .6s var(--ease-out), box-shadow .5s var(--ease-out),
             transform .32s var(--ease-out);
}
[data-intake-host].is-ready .cx-form .gate__go{filter:none;}
.cx-form .gate__go::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.45) 50%,transparent 66%);
  transform:translateX(-130%);
}
.cx-form .gate__go:hover{box-shadow:0 36px 78px -30px color-mix(in srgb,var(--accent) 100%,transparent);}
.cx-form .gate__go:hover::after{animation:cx-shine 1.1s var(--ease-out);}
@keyframes cx-shine{to{transform:translateX(130%);}}
.cx-form .gate__go svg{width:15px;height:15px;}
.cx-form .gate__fine{margin:16px 0 0;font-size:.8rem;line-height:1.62;color:rgba(124,139,164,.92);}
.cx-form .gate__err{
  margin:14px 0 0;padding:10px 13px;
  border-left:2px solid #FF7A7A;background:rgba(255,122,122,.07);
  font-size:var(--cx-cap);color:#FFD4D4;
}
.cx-form .gate__hp{position:absolute;left:-9999px;width:0;height:0;
  opacity:0;pointer-events:none;border:0;padding:0;min-height:0;}
.cx-form .gate__done{padding-block:clamp(18px,3vh,30px);}
.cx-form .gate__tick{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
}
.cx-form .gate__tick svg{width:20px;height:20px;}

/* the state strip above the form */
.cx-state{
  display:flex;align-items:center;gap:clamp(10px,2vw,24px);flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:clamp(18px,2.6vh,28px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(132,148,174,.95);
}
.cx-state__id{display:flex;align-items:center;gap:10px;
  color:color-mix(in srgb,var(--accent) 78%,#fff);}
.cx-state__id::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),0 0 14px var(--accent);
  animation:cx-blink 2.6s ease-in-out infinite;
}
@keyframes cx-blink{0%,100%{opacity:.45;}50%{opacity:1;}}
.cx-state__c{margin-left:auto;}
.cx-state__c b{color:#EAF2FF;font-weight:700;font-variant-numeric:tabular-nums;}
.cx-meter{position:relative;height:2px;background:rgba(168,210,236,.14);margin-bottom:clamp(20px,3vh,32px);}
.cx-meter i{
  position:absolute;inset:0 auto 0 0;display:block;
  width:calc(var(--fill,0) * 100%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),var(--accent));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:width .7s var(--ease-out);
}

/* the offset frame and the bloom under the object */
.cx-form-wrap{position:relative;isolation:isolate;}
.cx-form-wrap::before{
  content:"";position:absolute;z-index:-2;
  inset:-16px -16px 26px 26px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  pointer-events:none;
  transition:inset .9s var(--ease-out), border-color .9s var(--ease-out);
}
.cx-form-wrap:focus-within::before{
  inset:-24px -24px 34px 34px;
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);
}
.cx-form-wrap::after{
  content:"";position:absolute;z-index:-3;
  left:6%;right:6%;bottom:-8%;height:46%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 26%,transparent), transparent 72%);
  filter:blur(28px);opacity:.5;pointer-events:none;
  transition:opacity .9s var(--ease-out);
}
[data-intake-host].is-ready .cx-form-wrap::after{opacity:1;}


/* ============================================================
   4. THE CHANNELS — a full-bleed band of tall panels

   Right-aligned head (the only right-aligned head on the page),
   then four panels standing side by side at staggered heights.
   Nothing here is a two-column split.
   ============================================================ */
.cx-pan{
  position:relative;overflow:clip;
  padding-block:clamp(74px,12vh,150px);
  background:
    radial-gradient(80% 100% at 12% 0%, rgba(6,44,199,.16), transparent 62%),
    linear-gradient(180deg,#05080F,#04060B);
  border-block:1px solid rgba(168,210,236,.14);
}
.cx-pan__lbl{
  position:absolute;right:clamp(10px,2vw,26px);top:50%;
  transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(116,131,157,.8);
  display:flex;align-items:center;gap:14px;
}
.cx-pan__lbl::before{content:"";width:1px;height:56px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent));}
@media (max-width:1180px){.cx-pan__lbl{display:none;}}
.cx-pan__in{
  max-width:1340px;margin-inline:auto;
  padding-inline:clamp(20px,6vw,96px);
}
.cx-pan__hd{margin-bottom:clamp(40px,6vh,74px);max-width:54ch;}
.cx-pan__hd .cx-bd{margin-top:16px;}
/* the head flips to the right only where there is room for the move
   to read as composition rather than as ragged text */
@media (min-width:820px){
  .cx-pan__hd{margin-left:auto;text-align:right;}
}
@media (max-width:819px){
  .cx-no--r{flex-direction:row;}
  .cx-no--r::after{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent);}
}

.cx-pan__set{display:grid;gap:clamp(2px,.4vw,6px);}
@media (min-width:820px){.cx-pan__set{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* the stagger — panels do not sit on one baseline */
@media (min-width:820px){
  .cx-pan__i:nth-child(2){transform:translateY(clamp(14px,2.4vw,38px));}
  .cx-pan__i:nth-child(3){transform:translateY(clamp(28px,4.6vw,72px));}
  .cx-pan__i:nth-child(4){transform:translateY(clamp(42px,7vw,108px));}
}
.cx-pan__i{
  position:relative;display:flex;flex-direction:column;
  min-height:clamp(210px,26vh,290px);
  padding:clamp(22px,2.4vw,34px) clamp(20px,2.2vw,30px);
  border:1px solid rgba(168,210,236,.13);
  background:linear-gradient(168deg,rgba(9,13,23,.7),rgba(4,6,11,.35));
  color:inherit;
  transition:border-color .6s var(--ease-out), background .6s var(--ease-out),
             box-shadow .6s var(--ease-out);
}
/* the hairline that draws across the top of each panel on entry */
.cx-pan__i::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 12%,transparent));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-out);
  transition-delay:calc(var(--si,0) * 150ms + 120ms);
}
html.js .cx-pan.is-in .cx-pan__i::before{transform:scaleX(1);}
.cx-pan__k{
  display:block;margin-bottom:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(124,139,164,.9);
  transition:color .5s var(--ease-out);
}
.cx-pan__l{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.34rem,2.1vw,1.86rem);line-height:1.04;letter-spacing:-.042em;
  color:#EEF4FF;margin:clamp(26px,4vh,44px) 0 10px;
  transition:color .5s var(--ease-out), transform .7s var(--ease-out);
}
.cx-pan__p{margin:0;font-size:var(--cx-cap);line-height:1.64;color:rgba(162,176,200,.95);}
.cx-pan__go{
  margin-top:18px;width:38px;height:38px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(168,210,236,.22);color:rgba(180,196,220,.95);
  transition:transform .6s var(--ease-out), border-color .6s var(--ease-out),
             background .6s var(--ease-out), color .6s var(--ease-out);
}
.cx-pan__go svg{width:14px;height:14px;}
a.cx-pan__i:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 12%,rgba(9,13,23,.8)),rgba(4,6,11,.5));
  box-shadow:0 40px 90px -56px color-mix(in srgb,var(--accent) 95%,transparent);
}
a.cx-pan__i:hover .cx-pan__l{color:#fff;transform:translateX(6px);}
a.cx-pan__i:hover .cx-pan__k{color:var(--accent);}
a.cx-pan__i:hover .cx-pan__go{
  transform:rotate(-45deg);border-color:transparent;color:#03060E;
  background:linear-gradient(120deg,#0381FB,#6FB8FF);
}
html.js .cx-pan__i{
  opacity:0;
  transition:opacity .85s var(--ease-out), border-color .6s var(--ease-out),
             background .6s var(--ease-out), box-shadow .6s var(--ease-out);
  transition-delay:calc(var(--si,0) * 150ms);
}
html.js .cx-pan.is-in .cx-pan__i{opacity:1;}

/* ============================================================
   5. THE LAYERED BLOCKS — three things, arranged not listed

   A twelve-column field. The heading sits across the top, an
   oversized ghost word runs behind everything, and the three
   blocks take different spans at different depths so they
   overlap rather than queue.
   ============================================================ */
.cx-lay{
  position:relative;overflow:clip;
  padding-inline:var(--gut);
  padding-block:clamp(80px,13vh,168px);
}
.cx-lay__in{max-width:var(--maxw);margin-inline:auto;position:relative;}
.cx-lay__ghost{
  position:absolute;right:-3%;top:clamp(46px,10vh,140px);z-index:0;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(4.6rem,14.5vw,12.6rem);line-height:.78;letter-spacing:-.065em;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.075);
  pointer-events:none;user-select:none;white-space:nowrap;
}
/* below the layered breakpoint the blocks stack, and the ghost would
   sit behind body copy rather than behind a composition */
@media (max-width:899px){.cx-lay__ghost{display:none;}}
.cx-lay__hd{position:relative;z-index:2;max-width:34ch;margin-bottom:clamp(34px,5vh,62px);}
.cx-lay__hd .cx-bd{margin-top:16px;max-width:48ch;}
.cx-lay__set{position:relative;z-index:2;display:grid;gap:clamp(20px,3vh,34px);}
@media (min-width:900px){
  .cx-lay__set{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:0 clamp(14px,2vw,30px);
  }
  .cx-lay__i:nth-child(1){grid-column:1 / span 6;  grid-row:1;}
  .cx-lay__i:nth-child(2){grid-column:8 / span 5;  grid-row:1 / span 2;
                          margin-top:clamp(52px,9vh,128px);}
  /* the third block noses under the second by a little less than its
     own padding, so the blocks genuinely overlap and no word is hidden */
  .cx-lay__i:nth-child(3){grid-column:2 / span 6;  grid-row:2;
                          margin-top:clamp(30px,5vh,66px);
                          margin-right:calc(-1 * clamp(8px,1.6vw,26px));}
}
.cx-lay__i{
  position:relative;
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px);
  background:linear-gradient(165deg,rgba(8,12,21,.9),rgba(4,6,11,.78));
  border:1px solid rgba(168,210,236,.12);
  backdrop-filter:blur(3px);
}
/* the middle block is the lifted one — it sits over the other two */
@media (min-width:900px){
  .cx-lay__i:nth-child(2){
    z-index:3;
    border-color:color-mix(in srgb,var(--accent) 30%,transparent);
    box-shadow:0 50px 110px -70px color-mix(in srgb,var(--accent) 90%,transparent);
  }
  .cx-lay__i:nth-child(3){z-index:2;}
}
.cx-lay__k{
  display:block;margin-bottom:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 66%,#8494AE);
}
.cx-lay__h{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--cx-h3);line-height:1.18;letter-spacing:-.03em;
  color:#F1F6FF;margin:0 0 12px;
}
.cx-lay__p{margin:0;font-size:var(--cx-cap);line-height:1.7;color:rgba(168,182,205,.95);}
html.js .cx-lay__i{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:calc(var(--si,0) * 165ms + 90ms);
}
html.js .cx-lay.is-in .cx-lay__i{opacity:1;transform:none;}
html.js .cx-lay__ghost{
  opacity:0;transition:opacity 1.4s var(--ease-out) .2s;
}
html.js .cx-lay.is-in .cx-lay__ghost{opacity:1;}

/* ============================================================
   6. THE QUESTIONS — typography-led, answers indented

   Not a sticky heading beside a stack of accordions. The heading
   runs across the top; each question is a full-width line of
   display type, and the answer opens into a measure set in from
   the left, so the section reads as an essay rather than a widget.
   ============================================================ */
.cx-qa{
  position:relative;padding-inline:var(--gut);
  padding-block:clamp(74px,12vh,150px);
  border-top:1px solid rgba(168,210,236,.14);
}
.cx-qa__in{max-width:1080px;margin-inline:auto;}
.cx-qa__hd{margin-bottom:clamp(30px,4.6vh,56px);max-width:30ch;}
.cx-qa__hd .cx-bd{margin-top:16px;max-width:46ch;}
.cx-qa .qs{margin-top:0;max-width:none;border-top:1px solid rgba(168,210,236,.16);}
.cx-qa .q{border-bottom:1px solid rgba(168,210,236,.12);}
.cx-qa .q__b{
  display:flex;align-items:flex-start;gap:clamp(16px,3vw,44px);
  width:100%;padding:clamp(22px,3.2vh,34px) 0;
  background:none;border:0;cursor:pointer;text-align:left;
  color:#EAF1FB;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h3);line-height:1.24;letter-spacing:-.026em;
  transition:color .5s var(--ease-out);
}
.cx-qa .q__b:hover{color:#fff;}
.cx-qa .q__b > span{flex:1;}
.cx-qa .q__b i{
  display:block;position:relative;flex:none;width:20px;height:20px;margin-top:5px;
  transition:transform .6s var(--ease-out);
}
.cx-qa .q__b i::before,.cx-qa .q__b i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  translate:-50% -50%;
}
.cx-qa .q__b i::before{width:14px;height:1.5px;}
.cx-qa .q__b i::after{width:1.5px;height:14px;transition:transform .5s var(--ease-out);}
.cx-qa .q.on .q__b i::after{transform:scaleY(0);}
.cx-qa .q.on .q__b i{transform:rotate(180deg);}
/* the answer is set in from the left — the editorial move */
.cx-qa .q__p{overflow:hidden;}
.cx-qa .q__p p{
  padding:0;margin:0 0 clamp(24px,3.4vh,36px);
  max-width:62ch;font-size:var(--cx-bd);line-height:var(--cx-lead-bd);
  color:rgba(168,182,205,.96);
}
@media (min-width:820px){
  .cx-qa .q__p p{margin-left:clamp(40px,11vw,180px);}
}

/* ============================================================
   7. shared furniture About still uses
   ============================================================ */
.cx-rows{border-top:1px solid rgba(168,210,236,.2);margin-top:clamp(30px,5vh,54px);}
.cx-row{
  position:relative;display:grid;gap:8px clamp(20px,3vw,54px);
  padding:clamp(24px,3.8vh,42px) 0;
  border-bottom:1px solid rgba(168,210,236,.11);
  transition:background .6s var(--ease-out);
}
@media (min-width:880px){
  .cx-row{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start;}
}
.cx-row:hover{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%);}
.cx-row__h{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h3);letter-spacing:-.02em;
  color:#EEF4FF;margin:0;max-width:20ch;
}
.cx-row__p{margin:0;font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(166,180,203,.95);}
html.js .cx-row{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease-out), background .6s var(--ease-out);
  transition-delay:calc(var(--si,0) * 110ms);
}
html.js .cx-rows.is-in .cx-row{clip-path:inset(0 0 0 0);}

/* ============================================================
   8. THE COLOUR SPLASH — the homepage flood, reusable

   Any <em data-t="…"> inside a heading rests as an outline and is
   flooded by the brand ramp when its section enters. The fill is a
   duplicate of the word masked by a moving edge, which is what
   lets the outline stay visible beneath it.
   ============================================================ */
@property --mf{syntax:'<percentage>';initial-value:0%;inherits:false}
.cx-h1 em,.cx-flood{position:relative;display:inline-block;font-style:normal;}
.cx-h1 em,.cx-flood{
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 84%,transparent);
}
.cx-flood{-webkit-text-stroke-width:1.2px;}
.cx-h1 em::after,.cx-flood::after{
  content:attr(data-t);
  position:absolute;left:0;top:0;white-space:pre;pointer-events:none;
  -webkit-text-stroke:0;
  background:linear-gradient(94deg,
    #054AE0 0%,#054AE0 12%, #0381FB 19%,#0381FB 31%,
    #8FD0FF 38%,#8FD0FF 49%, #5FD8FF 56%,#5FD8FF 67%,
    #3B9DFF 74%,#3B9DFF 85%, #6FB8FF 92%,#6FB8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--mf),transparent var(--mf));
          mask-image:linear-gradient(90deg,#000 0 var(--mf),transparent var(--mf));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:--mf 1.5s var(--ease-out) 1.05s;
}
html.js .is-in .cx-h1 em::after{--mf:100%;}
html.js .is-in .cx-flood::after{--mf:100%;transition-delay:.55s;}
@supports not (background-clip:text){ .cx-h1 em::after,.cx-flood::after{display:none;} }

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .cx-h1 span{clip-path:none;transform:none;}
  html.js .cx-say{opacity:1;filter:none;}
  html.js .cx-qz li{clip-path:none;}
  .cx-ch__i--s::after{--mf:100%;transition:none;}
  html.js .cx-row,html.js .cx-form .gate__f{clip-path:none;}
  html.js .cx-pan__i,html.js .cx-lay__i,html.js .cx-lay__ghost{
    opacity:1;transform:none;}
  html.js .cx-pan__i::before{transform:scaleX(1);}
  @media (min-width:820px){
    .cx-pan__i:nth-child(2),.cx-pan__i:nth-child(3),.cx-pan__i:nth-child(4){transform:none;}
  }
  .cx-state__id::before{animation:none;}
  .cx-hero__spine i{transition:none;}
  .cx-form::before{animation:none;}
  .cx-h1 em::after,.cx-flood::after{--mf:100%;transition:none;}
}


/* ============================================================
   6 · THE CLOSE — the Contact banner

   Restored. Removed in the fourth composition pass, asked for again.
   Rebuilt on the record in claude/contact-composition.md rather than
   reinvented:

     · the headline is the word **Contact**, set in .cx-t2 at --cx-d2,
       the step the notes describe as "the close carried it" and which
       nothing else on the page has used since;
     · full-bleed band, so it reads as an arrival rather than as a sixth
       two-column section — the rhythm rule the whole page is built on;
     · the strip is page cross-links, not channels. The four channel
       panels in section 4 already own that, and repeating the message
       is exactly what the second pass removed.
   ============================================================ */
.cx-end{
  position:relative;
  padding:clamp(66px,10vh,116px) var(--gut) clamp(58px,9vh,100px);
  border-top:1px solid rgba(168,210,236,.13);
  background:
    radial-gradient(66% 150% at 50% 0%,
      color-mix(in srgb,var(--accent) 11%,transparent), transparent 72%),
    linear-gradient(180deg,rgba(5,8,15,.55),rgba(8,12,22,.82));
  overflow:hidden;
}
/* the hairline that lights across the top of the band */
.cx-end::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--accent) 30%,transparent),transparent);
}
.cx-end__in{max-width:1180px;margin-inline:auto;}
.cx-end .cx-t2{margin-top:12px;max-width:16ch;}
.cx-end__s{
  margin:clamp(14px,2vh,20px) 0 0;max-width:54ch;
  font-size:var(--cx-bd);line-height:1.72;color:rgba(178,191,213,.96);
}
.cx-end__a{
  display:flex;flex-wrap:wrap;gap:12px 15px;align-items:center;
  margin-top:clamp(22px,3vh,30px);
}
.cx-end__xr{
  list-style:none;margin:clamp(38px,5.5vh,64px) 0 0;padding:0;
  display:grid;gap:1px;background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
@media (min-width:720px){.cx-end__xr{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){.cx-end__xr{grid-template-columns:repeat(4,minmax(0,1fr));}}
.cx-end__xr a{
  display:block;height:100%;padding:clamp(16px,2.2vh,22px) clamp(14px,1.4vw,20px);
  background:linear-gradient(168deg,rgba(11,16,30,.9),rgba(6,10,20,.9));
  transition:background .45s var(--ease-out);
}
.cx-end__xr a:hover{
  background:linear-gradient(152deg,#FFFFFF,#F1F7FF 58%,#DEEAFA);
}
.cx-end__xr b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:var(--cx-h4);letter-spacing:-.015em;color:#EFF5FF;
  transition:color .45s var(--ease-out);
}
.cx-end__xr i{
  display:block;margin-top:6px;font-style:normal;
  font-size:var(--cx-cap);line-height:1.55;color:rgba(164,178,202,.94);
  transition:color .45s var(--ease-out);
}
.cx-end__xr a:hover b{color:#060B16;}
.cx-end__xr a:hover i{color:rgba(24,38,64,.86);}