/* Waslio Connect homepage, brand v1 ("premium luminous") draft.
   Source of truth: Brand Kit v1 (tokens.json, waslio.css, brief). Self-contained: the draft
   does not load home-page.css, studio.css or site-chrome.css. Reused, unchanged scripts:
   studio.js (project brief form), site-chrome.js (header menus), platforms.js, connected-loop.js. */

@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/SpaceGrotesk-variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/DMSans-variable.woff2") format("woff2");font-weight:100 1000;font-display:swap}

:root{
  --midnight:#090C12;--surface:#111620;--raised:#192130;
  --text:#F2F3F5;--muted:#A9AFBD;--border:#343F52;--control:#647188;
  --blue:#4162FF;--violet:#936BFF;--ice:#8CDFFF;--pearl:#E9EBEF;--ink:#121722;--light:#F7F8FA;
  --spectrum:linear-gradient(135deg,#8CDFFF,#4162FF 45%,#936BFF);
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1280px;--pad:clamp(20px,4.4vw,64px);--section:clamp(80px,9vw,128px);
  --header:80px;
}
@media(max-width:960px){:root{--header:68px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%;background:var(--midnight);color-scheme:dark}
body{margin:0;background:var(--midnight);color:var(--text);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--ice);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:#4162FF66;color:#fff}
:focus-visible{outline:2px solid var(--ice);outline-offset:4px;border-radius:4px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Buttons and links (brief §06: pearl primary, no glow) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:13px 22px 13px 24px;border:1px solid transparent;border-radius:8px;font:500 16px/1.2 var(--body);text-decoration:none;transition:background-color 160ms,color 160ms,border-color 160ms}
.btn .icon{width:18px;height:18px}
.btn-primary{background:var(--pearl);color:var(--ink)}
.btn-primary:hover{background:#fff}
.btn-primary:active{background:#CED3DD}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#5A77FF}
.btn-blue:active{background:#3550E0}
.btn-outline{background:transparent;color:var(--text);border-color:var(--control)}
.btn-outline:hover{background:var(--raised);border-color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:500;text-decoration:none;padding-block:6px;border-bottom:1px solid var(--control);transition:border-color 160ms,color 160ms}
.link:hover{border-color:var(--text)}
.link .icon{width:18px;height:18px;transition:transform 220ms var(--ease)}
.link:hover .icon{transform:translateX(3px)}
.link-ice{color:var(--ice);border-bottom-color:transparent}
.link-ice:hover{border-bottom-color:var(--ice)}
.link-out:hover .icon{transform:translate(2px,-2px)}

/* ---------- Header (markup mirrors the site chrome so site-chrome.js drives the menus) ---------- */
.wc-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:8px;background:var(--pearl);color:var(--ink);text-decoration:none;font-weight:500}
.wc-skip:focus{top:12px}
.wc-header{position:sticky;top:0;z-index:100;height:var(--header);background:#090C12e6;border-bottom:1px solid #ffffff12;backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px)}
.wc-header-in{height:100%;display:flex;align-items:center;gap:32px;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.v2-logo{display:block;flex:none;margin-left:-6px}
.v2-logo img{width:150px;height:auto}
.wc-nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:12px}
.wc-nav>a,.wc-menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 15px/1 var(--body);text-decoration:none;transition:color 160ms,background-color 160ms}
.wc-nav>a:hover,.wc-menu-btn:hover,.wc-menu-btn[aria-expanded=true]{color:var(--text);background:#ffffff0a}
.wc-menu-btn svg{width:12px;height:12px;transition:transform 160ms}
.wc-menu-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.wc-menu{position:relative}
.wc-menu-panel{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;width:340px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:0 24px 48px -16px #000c;display:none}
.wc-menu-btn[aria-expanded=true]+.wc-menu-panel{display:block}
.wc-menu-panel a{display:block;padding:12px 14px;border-radius:10px;color:var(--text);text-decoration:none}
.wc-menu-panel a:hover,.wc-menu-panel a:focus-visible{background:var(--raised)}
.wc-menu-panel b{display:flex;align-items:center;gap:8px;font:500 15px/1.3 var(--body)}
.wc-menu-panel span:not(.wc-pill){display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.wc-pill{display:inline-block;padding:2px 8px;border-radius:99px;border:1px solid var(--control);font:500 11px/1.4 var(--body);color:var(--muted);letter-spacing:.01em}
.wc-pill-live{border-color:#8CDFFF66;color:var(--ice)}
.wc-cta{min-height:44px;padding:10px 16px 10px 18px;font-size:15px}
.wc-cta svg{width:16px;height:16px}
.wc-toggle{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--border);border-radius:8px;background:none;position:relative}
.wc-toggle span{position:absolute;left:12px;right:12px;height:1.6px;border-radius:2px;background:var(--text);transition:transform 220ms var(--ease),top 220ms var(--ease)}
.wc-toggle span:first-child{top:17px}.wc-toggle span:last-child{top:25px}
.wc-toggle[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.wc-toggle[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.wc-mobile{position:fixed;inset:var(--header) 0 auto 0;max-height:calc(100dvh - var(--header));overflow:auto;padding:12px var(--pad) 28px;background:var(--midnight);border-bottom:1px solid var(--border)}
.wc-mobile>a,.wc-mobile summary{display:flex;align-items:center;min-height:52px;border-bottom:1px solid #ffffff12;color:var(--text);font:500 18px/1.2 var(--body);text-decoration:none;cursor:pointer}
.wc-mobile details a{display:flex;align-items:center;gap:8px;min-height:44px;padding-left:14px;color:var(--muted);text-decoration:none}
.wc-mobile .btn{margin-top:20px;width:100%}
@media(max-width:960px){
  .wc-nav,.wc-header-in>.wc-cta{display:none}
  .wc-toggle{display:block}
  .v2-logo img{width:140px}
}

/* ---------- Hero: copy left; the glass W as the one luminous object (Brand Kit glass mark) ---------- */
.v2-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight)}
.hero-grid{position:relative;z-index:1;display:flex;align-items:center;min-height:clamp(540px,calc(100svh - var(--header) - 220px),680px)}
.hero-copy{padding-block:clamp(48px,6vw,88px) 32px;max-width:600px}
.v2-hero h1{font-size:clamp(42px,5.2vw,72px);line-height:1.05}
.v2-hero h1 .dot{color:var(--blue)}
.nowrap{white-space:nowrap}
.hero-lede{margin-top:24px;max-width:30em;font-size:clamp(17px,1.4vw,19px);color:#C9CDD6}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.hero-founder{margin-top:32px;font-size:15px;color:var(--muted)}
.hero-stage{position:absolute;z-index:0;top:0;right:0;bottom:0;width:min(58%,980px);pointer-events:none}
.hero-dots{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 42% 34% at 52% 48%,#4162FF33,transparent 70%),radial-gradient(ellipse 30% 7% at 52% 74%,#4162FF59,transparent 70%)}
.hero-w{position:absolute;left:52%;top:46%;width:min(78%,600px);aspect-ratio:1;translate:-50% -50%}
.w-float{position:relative;width:100%;height:100%}
.js-motion .v2-hero:not(.is-off) .w-float{animation:w-float 9s ease-in-out infinite alternate}
@keyframes w-float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.w-img{position:relative;z-index:2;width:100%;height:100%}
.w-sweep{position:absolute;inset:0;z-index:3;-webkit-mask:url(/assets/v2/glass-w-720.webp) center/contain no-repeat;mask:url(/assets/v2/glass-w-720.webp) center/contain no-repeat;background:linear-gradient(105deg,transparent 38%,#ffffff8c 50%,transparent 62%) 160% 0/260% 100% no-repeat;mix-blend-mode:screen;opacity:0}
.js-motion .v2-hero:not(.is-off) .w-sweep{animation:w-sweep 8s var(--ease) 1.2s infinite}
@keyframes w-sweep{0%{background-position:160% 0;opacity:1}22%{background-position:-60% 0;opacity:1}23%,100%{background-position:-60% 0;opacity:0}}
/* Reflection: the W mirrored about its baseline, fading into the floor */
.w-reflect{position:absolute;left:0;right:0;top:47%;height:100%;z-index:1;opacity:.32;-webkit-mask-image:linear-gradient(transparent 22%,#000 30%,transparent 52%);mask-image:linear-gradient(transparent 22%,#000 30%,transparent 52%)}
.w-reflect img{width:100%;height:100%;transform:scaleY(-1);filter:blur(1.5px)}
.js-motion .v2-hero:not(.is-off) .w-reflect{animation:w-float-r 9s ease-in-out infinite alternate}
@keyframes w-float-r{from{transform:translateY(0)}to{transform:translateY(24px)}}
.js-motion .hero-w{animation:w-in 1100ms var(--ease) both}
@keyframes w-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
.hero-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding-bottom:28px}
.hero-services{display:flex;flex-wrap:wrap;align-items:center}
.hero-services a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;color:#C9CDD6;font-size:15px;text-decoration:none;border-left:1px solid var(--border);transition:color 160ms}
.hero-services a:first-child{padding-left:0;border-left:0}
.hero-services a:hover{color:var(--text)}
.hero-services .icon{width:22px;height:22px;color:var(--muted);transition:color 160ms}
.hero-services a:hover .icon{color:var(--ice)}
.hero-pause{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--muted);font-size:13px;transition:color 160ms,border-color 160ms}
.hero-pause:hover{color:var(--text);border-color:var(--control)}
.hero-pause .icon{width:14px;height:14px}

/* ---------- Diagram language: thin light lines, flat rings; light marks what is active ---------- */
.dg{position:relative;width:100%;max-width:500px;margin-top:48px}
.dg-stage{position:relative;aspect-ratio:600/440}
.dg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dg-glow path{fill:none;stroke:#4162FF;stroke-width:6;opacity:.35}
.dg-tile-glow{fill:#4162FF;opacity:.32}
.dg-route{fill:none;stroke:url(#dg-spectrum);stroke-width:1.8;opacity:.85}
.dg-light{fill:none;stroke:#E6F7FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:0 1;opacity:0}
.dg-node{position:absolute;display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);transform:translateY(-50%)}
.ring{display:grid;place-items:center;flex:none;width:clamp(40px,3.6vw,48px);aspect-ratio:1;border-radius:50%;background:var(--midnight);border:1px solid #4162FF66;color:var(--text);transition:border-color 400ms var(--ease),box-shadow 400ms var(--ease)}
.ring .icon{width:20px;height:20px}
.dg-node b{font:400 clamp(15px,1.3vw,18px)/1.2 var(--body);color:#C9CDD6;transition:color 300ms var(--ease)}
.dg-node.is-lit .ring{border-color:var(--ice);box-shadow:0 0 0 4px #4162FF26,0 6px 24px -4px #4162FFb3}
.dg-node.is-lit b{color:var(--text)}
.dg-n1{left:65.7%;top:15.9%}.dg-n2{left:65.7%;top:50%}.dg-n3{left:65.7%;top:84.1%}

/* Step sequence (same language): ring, title, one line; joined by a thin rule */
.seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;position:relative}
.seq li{position:relative;display:grid;gap:10px;align-content:start}
.seq li:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(40px,3.6vw,48px) / 2);left:calc(clamp(40px,3.6vw,48px) + 14px);right:-26px;height:1px;background:var(--border)}
.js-motion .seq .ring{transition:border-color 500ms var(--ease) calc(var(--k,0) * 380ms + 200ms),box-shadow 500ms var(--ease) calc(var(--k,0) * 380ms + 200ms)}
.is-in .seq .ring,.seq.is-in .ring{border-color:var(--ice);box-shadow:0 0 0 4px #4162FF1f,0 6px 20px -6px #4162FF99}
.seq li:nth-child(2){--k:1}.seq li:nth-child(3){--k:2}
.js-motion .seq li:not(:last-child)::after{transform-origin:left;transition:transform 700ms var(--ease) calc(var(--k,0) * 380ms + 300ms)}
.js-motion :not(.is-in)>.seq li:not(:last-child)::after{transform:scaleX(0)}
.seq b{margin-top:8px;font:500 clamp(19px,1.7vw,22px)/1.25 var(--display);letter-spacing:-.02em;color:var(--text)}
.seq span:not(.ring){color:var(--muted);font-size:16px;line-height:1.55;max-width:24em}
.seq-compact{grid-template-columns:minmax(0,1fr);gap:0}
.seq-compact li{grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:2px;padding-bottom:28px}
.seq-compact li:last-child{padding-bottom:0}
.seq-compact .ring{grid-row:1/3}
.seq-compact b{margin-top:2px;font-size:clamp(18px,1.5vw,20px)}
.seq-compact li:not(:last-child)::after{top:calc(clamp(40px,3.6vw,48px) + 8px);bottom:8px;left:calc(clamp(40px,3.6vw,48px) / 2);right:auto;width:1px;height:auto}

/* ---------- Platforms strip (platforms.css static layout, restyled for the dark surface) ---------- */
.v2-platforms{--pf-ink:#A9AFBD;--ink-2:#A9AFBD;--muted:#A9AFBD;--white:#E9EBEF;--line:#343F52;--ink:#121722;padding-block:8px clamp(32px,4vw,56px)}
.v2-platforms .pf{border-top-color:#ffffff14;padding-top:22px}
.v2-platforms .pf-title{color:var(--text);font-family:var(--body);font-weight:500;font-size:15px}
.v2-platforms .pf-note{color:#8D93A2}
.v2-platforms .pf-list{gap:4px 28px}
.v2-platforms .pf-group-name{color:#8D93A2}
.v2-platforms .pf-item{height:34px}
.v2-platforms .pf-item:hover,.v2-platforms .pf-item:focus-within{box-shadow:none}

/* ---------- Section shells ---------- */
.v2-section{padding-block:var(--section)}
.v2-rule{position:relative}
.v2-rule::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,transparent,#8CDFFF40 20%,#4162FF80 50%,#936BFF40 80%,transparent)}
.section-head h2,.v2-section>h2,.services h2{font-size:clamp(32px,3.6vw,48px);line-height:1.12}
.section-head p{margin-top:12px;font-size:clamp(17px,1.4vw,19px);color:var(--muted)}

/* Services: three spacious ruled rows (brief §09); each opens to the detail it replaces */
.services{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px clamp(48px,6vw,96px);align-items:start}
.services-intro{position:sticky;top:calc(var(--header) + 40px)}
.services h2{max-width:11em}
.service-rows{border-top:1px solid var(--border)}
.service-row{border-bottom:1px solid var(--border)}
.service-row summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:28px 4px;cursor:pointer;list-style:none;border-radius:8px}
.service-row summary::-webkit-details-marker{display:none}
.service-row summary>.icon{width:24px;height:24px;color:var(--muted)}
.service-row h3{font-size:clamp(22px,2vw,28px);line-height:1.2}
.service-row summary p{margin-top:6px;font-size:17px;color:var(--muted)}
.service-row .mark{position:relative;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;transition:border-color 160ms,background-color 160ms}
.service-row .mark::before,.service-row .mark::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--text);border-radius:2px;transition:transform 220ms var(--ease)}
.service-row .mark::after{transform:rotate(90deg)}
.service-row[open] .mark::after{transform:rotate(0)}
.service-row summary:hover .mark{border-color:var(--control);background:var(--raised)}
.service-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;padding:4px 4px 36px 48px}
.service-body h4{font:500 17px/1.3 var(--body);letter-spacing:0;color:var(--text)}
.service-body p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted)}
.service-body .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.service-body .tags li{padding:4px 10px;border:1px solid var(--border);border-radius:99px;font-size:13px;color:#C9CDD6}
.service-body .more{margin-top:12px;font-size:15px}
.service-plan{grid-column:1/-1}

/* ---------- Products: the proof, large and clear (one capability per visual) ---------- */
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(36px,4vw,56px)}
.section-head .all{border-bottom-color:transparent}
.section-head .all:hover{border-bottom-color:var(--text)}
.product{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px clamp(40px,6vw,96px);align-items:center;padding-block:clamp(28px,3vw,40px)}
.product+.product{border-top:1px solid #ffffff0f}
.product-flip .product-copy{order:2}
.product-icon{width:48px;height:48px;border-radius:12px}
.product h3{margin-top:20px;font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.product p{margin-top:10px;color:var(--muted)}
.product .meta{margin-top:6px;font-size:14px;color:#8D93A2}
.product .link{margin-top:22px}
.product-visual figcaption{margin-top:12px;font-size:13px;color:#8D93A2}
.shot{border-radius:14px;overflow:hidden;border:1px solid #ffffff1f;background:#fff;box-shadow:0 30px 60px -30px #000}
.shot img{width:100%;height:auto}
.product-visual-seq{padding:clamp(24px,3vw,40px);border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:clamp(28px,3vw,40px);padding-top:24px;border-top:1px solid var(--border)}
.also>span{color:var(--muted);font-size:16px}
.also .link{border-bottom-color:transparent;font-size:16px}
.also .link:hover{border-bottom-color:var(--text)}

/* Process (brief §10) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(40px,4vw,56px)}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--spectrum);opacity:.7;transform-origin:left;transition:transform 1400ms var(--ease)}
.js-motion .steps:not(.is-in)::before{transform:scaleX(0)}
.steps li{padding-top:24px}
.step-no{font:500 14px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.steps h3{margin-top:18px;font-size:clamp(22px,2vw,26px);line-height:1.2}
.steps p{margin-top:10px;color:var(--muted);font-size:17px;max-width:16em}

/* ---------- Enquiry: the real multi-step brief, restyled (logic: studio.js) ---------- */
.enquiry{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight)}
.js-motion .enquiry-curve{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:lighten}
.enquiry-curve img{position:absolute;right:0;top:50%;height:120%;width:auto;max-width:none;translate:18% -50%}
.enquiry{background:var(--midnight)}
.enquiry-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px clamp(40px,6vw,96px);align-items:start}
.enquiry-intro{position:sticky;top:calc(var(--header) + 40px)}
.enquiry-intro h2{font-size:clamp(34px,4vw,52px);line-height:1.1;max-width:10.5em}
.enquiry-lede{margin-top:18px;font-size:clamp(17px,1.4vw,19px);color:#C9CDD6;max-width:28em}
.enquiry-support{margin-top:12px;color:var(--muted);font-size:16px}
.routes{display:grid;gap:12px;margin-top:36px;max-width:420px}
.route{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:16px 18px;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;transition:border-color 160ms,background-color 160ms}
a.route:hover{border-color:var(--control);background:var(--raised)}
.route b{font-weight:500}
.route span{grid-column:1;font-size:15px;color:var(--muted)}
.route .icon{grid-column:2;grid-row:1/3;width:18px;height:18px}
.route-static{border-style:dashed}
.direct-email{margin-top:28px;font-size:15px;color:var(--muted)}

.brief-card{position:relative;background:linear-gradient(180deg,#141A27,#10151F);border:1px solid var(--border);border-radius:16px;padding:clamp(22px,3vw,36px);box-shadow:0 30px 60px -36px #000}
.brief-top{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--border)}
.step-navigation{margin:20px 0 4px}
.step-navigation ol{display:flex;gap:6px;flex-wrap:wrap}
.step-navigation button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 10px 0 6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);font-size:14px}
.step-navigation button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--control);font-size:12px}
.step-navigation button b{font-weight:500}
.step-navigation button[aria-current=step]{color:var(--text);border-color:var(--border);background:var(--raised)}
.step-navigation button[aria-current=step] span{background:var(--pearl);border-color:var(--pearl);color:var(--ink)}
.step-navigation button:disabled{opacity:.45;cursor:not-allowed}
.form-step{border:0;margin:0;padding:22px 0 4px;min-width:0}
.form-step legend{font:500 clamp(22px,2vw,26px)/1.25 var(--display);letter-spacing:-.025em;color:var(--text);padding:0}
.step-description{margin-top:8px;color:var(--muted);font-size:16px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 44px 12px 14px;border:1px solid var(--control);border-radius:10px;cursor:pointer;font-size:16px;transition:border-color 160ms,background-color 160ms}
.choice:hover{background:var(--raised)}
.choice input{position:absolute;right:14px;top:50%;translate:0 -50%;width:18px;height:18px;accent-color:var(--ice)}
.choice .icon{color:var(--muted)}
.choice:has(input:checked){border-color:var(--ice);background:#8CDFFF14}
.choice:has(input:checked) .icon{color:var(--ice)}
.choice:has(input:focus-visible){outline:2px solid var(--ice);outline-offset:3px}
.choice-wide{grid-column:1/-1}
.field{display:grid;gap:8px;margin-top:20px;font-size:16px;color:var(--text)}
.field span{color:#FFB4B4}
.field em{font-style:normal;font-size:14px;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--control);border-radius:8px;background:var(--midnight);color:var(--text);font-size:16px}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-color:var(--ice)}
.field [aria-invalid=true]{border-color:#FFB4B4}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.field-error{display:block;margin-top:2px;font-size:14px;color:#FFB4B4}
.field-hint{font-size:14px;color:var(--muted)}
.brief-review{margin-top:18px;display:grid;gap:10px}
.brief-review dl,.brief-review>div{padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--midnight)}
.brief-review button{color:var(--ice);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px}
.consent-field{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:15px;color:#C9CDD6}
.consent-field input{width:18px;height:18px;margin-top:3px;accent-color:var(--ice);flex:none}
.submit-note{margin-top:10px;font-size:14px;color:var(--muted)}
.form-error{margin-top:18px;padding:12px 14px;border:1px solid #FFB4B466;border-radius:8px;background:#FFB4B414;color:#FFD6D6;font-size:15px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.form-actions .microcopy{font-size:13px;color:var(--muted);letter-spacing:.02em}
.form-actions button{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-radius:8px;font-weight:500;font-size:16px}
#brief-next,#brief-submit{margin-left:auto;background:var(--pearl);color:var(--ink);border:1px solid var(--pearl)}
#brief-next:hover,#brief-submit:hover{background:#fff}
#brief-next:disabled,#brief-submit:disabled{opacity:.45;cursor:not-allowed}
.back-button{background:none;border:1px solid var(--control);color:var(--text)}
.back-button:hover{background:var(--raised)}
.form-actions .icon{width:18px;height:18px}
.form-footer{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;color:var(--muted)}
.form-footer .icon{width:16px;height:16px}
.honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.brief-success{text-align:left;padding:12px 0}
.brief-success .success-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#8CDFFF1f;color:var(--ice)}
.brief-success h3{margin-top:18px;font-size:28px}
.brief-success p{margin-top:10px;color:var(--muted)}
.step-track{height:3px;border-radius:3px;background:var(--raised);margin-top:16px;overflow:hidden}
.step-track>span{display:block;height:100%;background:var(--spectrum);transition:width 320ms var(--ease)}

/* ---------- Footer (brief §10) ---------- */
.v2-footer{border-top:1px solid #ffffff12;padding-block:56px 40px}
.ft-top{display:grid;grid-template-columns:auto 1fr auto;gap:32px 48px;align-items:center}
.ft-top img{width:150px;height:auto}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px}
.ft-nav a,.ft-nav button{color:var(--muted);font-size:15px;text-decoration:none;background:none;border:0;padding:6px 0}
.ft-nav a:hover,.ft-nav button:hover{color:var(--text)}
.ft-meta{text-align:right;font-size:14px;line-height:1.6;color:var(--muted)}
.ft-legal{margin-top:40px;padding-top:24px;border-top:1px solid #ffffff0d;font-size:13px;line-height:1.6;color:#8D93A2;max-width:72em}

/* ---------- Reveal (content is visible without JS; 480 ms per brief §07) ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Responsive (brief §11: stack at ~960, one column at ~640) ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .hero-copy{padding-block:40px 28px}
  .hero-grid{display:block;min-height:0}
  .v2-hero{display:flex;flex-direction:column}
  .hero-grid{order:1}.hero-stage{order:2}.hero-foot{order:3}
  .hero-stage{position:relative;width:100%;height:clamp(260px,72vw,440px)}
  .hero-w{width:min(76%,420px)}
  .hero-foot{flex-direction:column;align-items:flex-start;padding-bottom:24px}
  .hero-services a{padding:0 14px}
  .enquiry-curve img{height:70%;top:auto;bottom:0;translate:30% 0;opacity:.7}
  .services,.enquiry-in{grid-template-columns:minmax(0,1fr)}
  .services-intro,.enquiry-intro{position:static}
  .product,.product-flip{grid-template-columns:minmax(0,1fr)}
  .product-flip .product-copy{order:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .ft-top{grid-template-columns:1fr;justify-items:start}
  .ft-nav{justify-content:flex-start}
  .ft-meta{text-align:left}
  .dg{max-width:460px}
}
@media(max-width:760px){
  .seq{grid-template-columns:minmax(0,1fr);gap:0}
  .seq li{grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:2px;padding-bottom:28px}
  .seq li:last-child{padding-bottom:0}
  .seq .ring{grid-row:1/3}
  .seq b{margin-top:2px}
  .seq li:not(:last-child)::after{top:calc(clamp(40px,3.6vw,48px) + 8px);bottom:8px;left:calc(clamp(40px,3.6vw,48px) / 2);right:auto;width:1px;height:auto}
}
@media(max-width:640px){
  body{font-size:17px}
  .hero-actions .btn{width:100%}
  .steps,.choice-grid,.field-row,.service-body{grid-template-columns:minmax(0,1fr)}
  .service-row summary{grid-template-columns:minmax(0,1fr) auto;padding:22px 0}
  .service-row summary>.icon{display:none}
  .service-body{padding:0 0 28px}
}
@media(min-width:961px) and (max-width:1180px){
  .hero-stage{width:52%}
  .hero-copy{max-width:500px}
}
@media(max-width:640px){
  .v2-platforms .pf-group-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .v2-platforms .pf-list{gap:2px 4px}
  .v2-platforms .pf-group{gap:0}
  .v2-platforms .pf-items{gap:2px 4px}
  .v2-platforms .pf-item{height:32px;padding:0 6px}
}
@media(max-width:480px){
  .dg-stage{width:80%}
  .nowrap{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(forced-colors:active){
  .btn-primary,#brief-next,#brief-submit{border:1px solid ButtonText}
}