/* AI Alchemy — authored site styles. No framework or external CSS dependency. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { color-scheme:dark;--bg:#080d21;--bg2:#0e1432;--fg:#f8f7ff;--muted:#d0d4ec;--purple:#a56bff;--violet:#722eff;--blue:#39bdfd;--mint:#58f5c5;--border:rgba(154,142,255,.25);--max:1230px }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:100px }
body { margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg);font-size:18px;line-height:1.6;overflow-x:hidden }
body:before { content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 0 auto;height:1550px;background:radial-gradient(ellipse 700px 390px at -7% 15%,rgba(93,31,204,.27),transparent 71%),radial-gradient(ellipse 600px 340px at 106% 7%,rgba(10,214,181,.21),transparent 72%),radial-gradient(ellipse 730px 380px at 45% 64%,rgba(56,43,133,.13),transparent 73%) }
a { color:inherit;text-decoration:none }
button,input,textarea { font:inherit }
button { cursor:pointer }
button,a,input,textarea { outline-offset:4px }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--mint) }
.container { width:min(calc(100% - 44px),var(--max));margin-inline:auto }
.eyebrow { display:flex;align-items:center;gap:12px;color:#edf0ff;font:700 11px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.24em }
.eyebrow:after { content:"";display:block;flex:none;width:86px;height:1px;background:linear-gradient(90deg,rgba(194,163,255,.8),transparent) }
.eyebrow.cyan { color:#8befff }
.eyebrow.purple { color:#c5adff }
.eyebrow.small { font-size:10px }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:11px;border:1px solid transparent;padding:12px 24px;white-space:nowrap;font-weight:750;font-size:14px;min-height:45px;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s }
.btn:hover { transform:translateY(-2px) }
.btn-primary { color:#fff;background:linear-gradient(115deg,#7d3bf7,#652ee3 76%,#5425c8);border-color:rgba(222,178,255,.3);box-shadow:inset 0 1px rgba(255,255,255,.18),0 10px 28px rgba(105,42,240,.15) }
.btn-primary:hover { box-shadow:0 0 26px rgba(119,67,255,.36) }
.btn-outline { border-color:#8c7abf;background:rgba(8,10,35,.42);color:#fff }
.btn-outline:hover { background:rgba(112,80,208,.14);border-color:#b99aff }
.site-header { padding-top:7px;position:relative;z-index:30 }
.topnav { position:relative;display:flex;align-items:center;height:54px;gap:16px;padding:0 24px 0 28px;border:1px solid rgba(176,137,255,.46);border-right-color:rgba(67,188,255,.34);border-radius:16px;background:linear-gradient(90deg,rgba(40,18,93,.42),rgba(9,19,43,.75));box-shadow:0 8px 30px rgba(0,0,0,.1);backdrop-filter:blur(16px) }
.site-header.is-scrolled { position:sticky;top:0;padding-top:0;z-index:50 }
.site-header.is-scrolled .topnav { border-radius:0 0 16px 16px }
.brand { display:flex;align-items:center;gap:9px;font-weight:850;font-size:22px;letter-spacing:-.055em;white-space:nowrap }
.brand svg { width:39px;height:37px;filter:drop-shadow(0 0 12px rgba(113,74,255,.35)) }
.nav-links { display:flex;align-items:center;gap:34px;margin-left:auto }
.nav-links a:not(.btn) { font-size:13px;font-weight:650;color:#eff1ff;transition:color .2s }
.nav-links a:not(.btn):hover { color:#a7caff }
.nav-links .btn { padding:7px 20px;min-height:38px;font-size:13px }
.menu-button { display:none;background:transparent;border:1px solid #534a81;color:#fff;border-radius:9px;padding:7px 10px;margin-left:auto }
.hero { position:relative;isolation:isolate;overflow:hidden }
.hero:before { position:absolute;content:"";inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse 470px 260px at 5% 50%,rgba(102,28,250,.30),transparent 75%),radial-gradient(ellipse 570px 390px at 85% 13%,rgba(5,194,188,.14),transparent 74%) }
.hero-in { position:relative;min-height:374px;padding-top:30px;padding-bottom:28px }
.hero-copy { position:relative;z-index:4;width:min(61%,690px);padding-top:1px }
.hero h1 { font-size:clamp(44px,4.35vw,63px);line-height:.97;letter-spacing:-.059em;font-weight:880;margin:12px 0 11px;max-width:710px;text-wrap:balance }
.gradient-text { background:linear-gradient(100deg,#aa7aff 7%,#81b6fd 47%,#56efc8 94%);-webkit-background-clip:text;background-clip:text;color:transparent }
.hero-sub { color:#eceaf9;font-weight:440;font-size:18px;line-height:1.5;max-width:615px;margin:12px 0 18px }
.hero-actions { display:flex;gap:17px;flex-wrap:wrap }
.hero-actions .btn { min-width:222px }
.hero-actions .btn-outline { min-width:215px }
.hero-glass { position:absolute;right:-65px;top:7px;width:min(50%,620px);aspect-ratio:1.56;z-index:2;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out }
.hero-glass img { width:100%;height:100%;object-fit:contain;filter:contrast(1.08) saturate(1.08) drop-shadow(0 4px 32px rgba(48,165,243,.1));-webkit-mask-image:radial-gradient(ellipse 67% 66% at 53% 49%,#000 59%,transparent 99%);mask-image:radial-gradient(ellipse 67% 66% at 53% 49%,#000 59%,transparent 99%);animation:float 6.5s ease-in-out infinite }
.hero-glass:before { content:"";position:absolute;inset:16% 12%;z-index:-1;background:radial-gradient(ellipse,rgba(82,29,255,.21),transparent 73%);filter:blur(25px) }
.hero-glass .orbit { position:absolute;z-index:1;inset:4%;width:92%;height:92%;overflow:visible;pointer-events:none }
.hero-glass .orbit ellipse { stroke-dasharray:2 7;stroke-linecap:round;stroke-width:1.8;animation:orbit 38s linear infinite;transform-origin:center }
.hero-wave { position:absolute;z-index:-1;bottom:-6px;left:0;width:100%;height:156px;pointer-events:none;overflow:hidden;opacity:.78 }
.hero-wave svg { position:absolute;width:100%;height:100%;transform-origin:center 80%;animation:wavedrift 12s ease-in-out infinite alternate }
.hero-wave:after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,13,33,.20)) }
.trust-row { position:relative;z-index:4;display:flex;align-items:center;gap:21px;margin-top:23px;width:730px;max-width:80% }
.trust-item { display:flex;align-items:center;gap:13px;min-width:0;flex:1 }
.trust-item:not(:first-child) { border-left:1px solid rgba(169,149,235,.29);padding-left:22px }
.trust-icon { flex:none;width:36px;height:36px;color:#be96ff }
.trust-icon svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round }
.trust-item strong { display:block;color:#f5f4ff;font-size:12.5px;letter-spacing:-.02em;line-height:1.23 }
.trust-item span { display:block;font-size:11.5px;color:#d8d9f2;white-space:nowrap }
.glow-line { height:1px;background:linear-gradient(90deg,rgba(128,65,242,.3),rgba(73,144,255,.62),rgba(91,255,224,.2));box-shadow:0 0 8px rgba(91,160,254,.28) }
.section { position:relative;padding:22px 0 28px }
.section-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.62fr);align-items:center;gap:45px;margin-bottom:15px }
.section-heading h2,.approach-title h2 { font-size:clamp(27px,2.5vw,35px);letter-spacing:-.046em;line-height:.99;font-weight:830;margin:8px 0 0;max-width:480px }
.section-heading p { font-size:18px;color:#d4d8ed;line-height:1.55;margin:7px 0 0;max-width:430px }
.services { padding-top:23px;padding-bottom:27px }
.service-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px }
.service-card { position:relative;isolation:isolate;text-align:left;display:flex;flex-direction:column;overflow:hidden;min-height:145px;padding:14px 19px 15px 25px;border:1px solid var(--tone);border-radius:15px;background:linear-gradient(120deg,rgba(38,30,75,.65),rgba(16,22,52,.93));box-shadow:inset 0 1px rgba(255,255,255,.05);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;color:#fff }
.service-card:before { content:"";position:absolute;inset:-80px -35px 30px 20%;z-index:-1;background:radial-gradient(ellipse at 75% 28%,var(--glow),transparent 61%);opacity:.75;transform:rotate(-18deg);transition:opacity .3s }
.service-card:after { content:"";position:absolute;inset:0;z-index:-1;opacity:.7;background:radial-gradient(ellipse at 100% 100%,var(--edge),transparent 60%) }
.service-card:hover { transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.25),0 0 26px var(--edge) }
.service-card:hover:before { opacity:1 }
.service-card.purple { --tone:#9854e0;--glow:rgba(141,51,255,.44);--edge:rgba(110,29,225,.14) }
.service-card.blue { --tone:#349ff5;--glow:rgba(59,129,255,.49);--edge:rgba(40,111,222,.21) }
.service-card.mint { --tone:#48e2ad;--glow:rgba(35,235,168,.37);--edge:rgba(25,159,139,.2) }
.service-card.cobalt { --tone:#52abff;--glow:rgba(60,134,253,.42);--edge:rgba(39,95,184,.26) }
.service-card svg { width:33px;height:33px;fill:none;stroke:var(--tone);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px }
.service-card h3 { font-size:19px;line-height:1.03;letter-spacing:-.035em;margin:2px 0 4px;font-weight:830;max-width:230px }
.service-card p { font-size:12.5px;line-height:1.38;margin:2px 0 0;color:#edf0fc;max-width:208px;min-height:33px }
.service-card .arrow { position:absolute;right:14px;bottom:14px;border-radius:7px;background:rgba(169,177,252,.15);color:#e5e9ff;font-size:22px;line-height:1;padding:4px 9px 6px;transition:transform .25s,background .25s }
.service-card:hover .arrow { transform:translateX(3px);background:rgba(205,205,255,.25) }
.approach { padding-top:18px;padding-bottom:13px }
.approach-in { display:grid;grid-template-columns:minmax(290px,1.1fr) 2fr;gap:24px;align-items:center }
.approach-title h2 { font-size:clamp(25px,2.3vw,33px) }
.steps { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0 }
.step { position:relative;padding-left:0 }
.step:not(:last-child):after { content:"›";position:absolute;top:4px;right:-5px;font-size:31px;font-weight:200;color:#bd9aff }
.step-icon { width:48px;height:41px;border-radius:11px;display:grid;place-items:center;margin:0 0 5px;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.19),transparent),linear-gradient(125deg,var(--sbg),rgba(11,15,43,.3));border:1px solid var(--stroke);box-shadow:0 0 14px var(--shadow),inset 0 1px rgba(255,255,255,.16) }
.step:nth-child(1) { --sbg:rgba(138,47,247,.56);--stroke:#c17aff;--shadow:rgba(131,48,253,.36) }
.step:nth-child(2) { --sbg:rgba(20,151,244,.45);--stroke:#52c9ff;--shadow:rgba(30,173,250,.22) }
.step:nth-child(3) { --sbg:rgba(8,201,142,.49);--stroke:#46ecbc;--shadow:rgba(26,201,165,.25) }
.step:nth-child(4) { --sbg:rgba(143,47,253,.52);--stroke:#b969ff;--shadow:rgba(138,66,254,.31) }
.step-icon svg { width:25px;height:25px;stroke:#e3d5ff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round }
.step:nth-child(2) .step-icon svg { stroke:#a4eaff }
.step:nth-child(3) .step-icon svg { stroke:#bcffe5 }
.step strong { font-size:15px;letter-spacing:-.02em;line-height:1.2;display:block }
.step p { font-size:11.8px;line-height:1.42;color:#dce0f8;margin:2px 0 0;max-width:145px }
.cta-banner { position:relative;isolation:isolate;min-height:172px;margin-top:19px;margin-bottom:35px;display:grid;grid-template-columns:34% 1fr auto;align-items:center;gap:20px;border:1px solid rgba(160,130,255,.74);border-radius:16px;overflow:hidden;background:linear-gradient(108deg,rgba(160,80,252,.53),rgba(47,23,114,.56) 35%,rgba(14,22,68,.87) 70%,rgba(34,114,213,.42));box-shadow:0 0 35px rgba(112,62,250,.13) }
.cta-banner:before { content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 100% 20%,rgba(29,173,255,.31),transparent 50%),radial-gradient(ellipse at 55% 120%,rgba(147,61,255,.19),transparent 62%) }
.skyline { position:absolute;inset:0 auto 0 0;width:42%;height:100%;padding:10px 0 0 16px;pointer-events:none;will-change:transform;-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent) }
.cta-spacer { min-height:100% }
.cta-content { padding:16px 6px 16px 0 }
.cta-content h2 { font-size:clamp(25px,2.3vw,34px);line-height:1.04;max-width:465px;margin:7px 0 0;letter-spacing:-.048em }
.cta-action { padding-right:62px }
.cta-action .btn { min-width:170px }
.details-section { padding:84px 0 }
.info-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.info-card { padding:28px;border:1px solid rgba(118,112,190,.3);border-radius:17px;background:linear-gradient(130deg,rgba(43,38,96,.4),rgba(10,17,46,.9)) }
.info-card h3 { font-size:22px;letter-spacing:-.035em;margin:7px 0 9px }
.info-card p,.info-card li { color:#d3d8f3;line-height:1.58 }
.info-card ul { margin:8px 0 0;padding-left:18px }
.info-card li { margin:7px 0 }
.contact { border-top:1px solid rgba(140,134,250,.2);background:radial-gradient(ellipse 680px 480px at 75% 20%,rgba(72,39,161,.23),transparent 72%);padding:65px 0 85px }
.contact-in { display:grid;grid-template-columns:.85fr 1.15fr;gap:65px }
.contact-copy h2 { font-size:clamp(34px,4.2vw,52px);line-height:1.02;letter-spacing:-.052em;margin:16px 0 }
.contact-copy p { color:#d9dcf4;max-width:380px }
a.contact-email { color:#9bffdc;text-decoration:underline;text-underline-offset:3px }
a.contact-email:hover { color:#fff }

.brief-form { border:1px solid rgba(151,133,232,.34);border-radius:17px;background:rgba(15,21,52,.8);padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.12) }
.brief-form fieldset { border:0;margin:0;padding:0;min-width:0 }
.brief-form .form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px }
.form-field { display:flex;flex-direction:column;gap:7px;margin-bottom:14px }
.form-field.full { grid-column:1/-1 }
.form-field label { font-size:12px;font-weight:740;letter-spacing:.02em;color:#e5e7ff }
.form-field input,.form-field textarea { border:1px solid rgba(137,129,218,.42);border-radius:9px;background:#0c1435;color:#fff;padding:11px 12px;min-height:45px;width:100% }
.form-field textarea { min-height:90px;resize:vertical }
.form-field ::placeholder { color:#9099bd }
.form-actions { display:flex;align-items:center;flex-wrap:wrap;gap:12px }
.form-note { color:#aeb8db;font-size:12px;margin:8px 0 13px }
.brief-result { margin-top:18px;padding:16px;border:1px solid rgba(72,231,180,.4);background:rgba(38,117,109,.13);border-radius:10px }
.brief-result[hidden] { display:none }
.brief-result h3 { margin:0 0 9px;font-size:16px }
.brief-result pre { white-space:pre-wrap;overflow-wrap:anywhere;color:#e4f4f8;line-height:1.55;font:12px/1.65 ui-monospace,"SFMono-Regular",Consolas,monospace }
.brief-result .btn { min-height:39px;padding:8px 13px }
.status-text { font-size:12px;min-height:1.5em;color:#9bffdc;margin-top:8px }
footer { padding:28px 0;border-top:1px solid rgba(141,130,204,.2);font-size:14px;color:#bdc3df }
.footer-in { display:flex;justify-content:space-between;gap:18px;align-items:center }
.footer-in .brand { font-size:17px }
.footer-in .brand svg { width:24px;height:24px }
.footer-links { display:flex;gap:22px }
.footer-links a:hover { color:#fff }
.dialog-backdrop { position:fixed;inset:0;z-index:99;padding:20px;background:rgba(2,4,21,.83);display:none;align-items:center;justify-content:center;backdrop-filter:blur(7px) }
.dialog-backdrop[aria-hidden="false"] { display:flex }
.dialog { position:relative;width:min(94vw,560px);max-height:85vh;overflow:auto;border-radius:18px;border:1px solid rgba(166,132,255,.65);background:linear-gradient(140deg,#19234c,#0b1230);padding:32px;box-shadow:0 35px 90px rgba(0,0,0,.5) }
.dialog h2 { font-size:27px;letter-spacing:-.035em;line-height:1.15;margin:9px 0 }
.dialog p,.dialog li { color:#d3d8f2 }
.dialog ul { padding-left:19px }
.dialog li { margin:7px 0 }
.dialog-close { position:absolute;right:17px;top:13px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 12px;font-size:18px }
html.js .reveal { opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1) }
html.js .reveal.visible { opacity:1;transform:none }
@keyframes float {
  0%,100% { transform:translateY(0px) rotate(-.5deg) }
  50% { transform:translateY(-9px) rotate(.5deg) }
}
@keyframes orbit {
  to { stroke-dashoffset:-360 }
}
@keyframes wavedrift {
  0% { transform:translateX(-8px) scale(1.01) }
  100% { transform:translateX(8px) scale(1.02) }
}
@media (min-width:1550px) {
  .hero-in { min-height:395px }
  .hero-glass { width:650px;right:-80px;top:2px }
  .hero h1 { font-size:65px }
  .service-card { min-height:150px }
}
@media (max-width:1200px) {
  .nav-links { gap:22px }
}
@media (max-width:1050px) {
  .nav-links { gap:16px }
  .hero-copy { width:64% }
  .hero-glass { width:50%;right:-8%;top:35px }
  .hero h1 { font-size:clamp(40px,5.3vw,58px) }
  .trust-row { max-width:92% }
  .service-grid { grid-template-columns:repeat(2,1fr) }
  .service-card { min-height:164px }
  .approach-in { grid-template-columns:1fr;gap:23px }
  .cta-banner { grid-template-columns:30% 1fr auto }
  .cta-action { padding-right:24px }
}
@media (max-width:760px) {
  .menu-button { display:block }
  .nav-links { position:absolute;display:none;top:calc(100% + 6px);left:0;right:0;flex-direction:column;gap:4px;align-items:stretch;padding:12px;border:1px solid rgba(176,137,255,.5);border-radius:12px;background:#101739;box-shadow:0 25px 55px rgba(0,0,0,.4) }
  .nav-links.is-open { display:flex }
  .nav-links a:not(.btn) { padding:11px 12px }
  .nav-links .btn { justify-content:center }
}
@media (max-width:720px) {
  .container { width:min(calc(100% - 30px),var(--max)) }
  .site-header { padding-top:7px }
  .topnav { padding:0 13px;height:56px }
  .brand { font-size:19px }
  .brand svg { width:30px;height:30px }
  .hero-in { padding-top:26px;padding-bottom:24px;min-height:auto }
  .hero-copy { width:100% }
  .hero h1 { font-size:clamp(43px,10.5vw,64px);max-width:600px;line-height:1.0 }
  body { font-size:16px;line-height:1.6 }
  .hero-sub { font-size:16px;line-height:1.55 }
  .hero-glass { position:relative;width:100%;max-width:560px;right:auto;top:auto;margin:-4px auto -30px;aspect-ratio:1.55;z-index:1 }
  .hero-fallback-label { position:relative;right:auto;bottom:auto;width:100%;max-width:560px;margin:-18px auto 10px;pointer-events:auto }
  .hero-actions { position:relative;z-index:5 }
  .hero-actions .btn { flex:1;min-width:180px }
  .trust-row { margin-top:15px;display:grid;grid-template-columns:1fr;gap:11px;max-width:100%;width:auto }
  .trust-item:not(:first-child) { border-left:0;padding-left:0 }
  .trust-icon { width:30px;height:30px }
  .trust-item strong { font-size:13px }
  .trust-item span { font-size:12px }
  .hero-wave { bottom:185px;opacity:.45 }
  .section-heading { grid-template-columns:1fr;gap:5px;margin-bottom:18px }
  .section-heading p { font-size:16px }
  .service-grid { grid-template-columns:1fr 1fr;gap:12px }
  .service-card { min-height:190px;padding:16px }
  .service-card h3 { font-size:18px }
  .service-card p { font-size:12px }
  .step:not(:last-child):after { right:1px }
  .steps { gap:10px }
  .step p { font-size:11px }
  .cta-banner { grid-template-columns:1fr;gap:0;padding:22px 22px 20px;min-height:220px;align-items:end }
  .skyline { inset:0 0 auto 0;width:100%;height:118px;padding:14px 16px 0;opacity:.9;-webkit-mask-image:none;mask-image:none }
  .cta-banner { padding-top:136px }
  .cta-spacer { display:none }
  .cta-content { padding:0 }
  .cta-content h2 { max-width:440px }
  .cta-action { padding:16px 0 0 }
  .cta-action .btn { width:auto }
  .info-grid,.industry-grid,.contact-in { grid-template-columns:1fr;gap:20px }
  .details-section { padding:45px 0 }
  .contact { padding:40px 0 }
  .footer-in { flex-direction:column;align-items:flex-start }
}
@media (max-width:480px) {
  .industry-card { padding:20px }
  .industry-card h3 { font-size:20px }
  .hero h1 { font-size:clamp(40px,11.3vw,49px) }
  .hero-actions .btn { width:100%;flex:auto }
  .hero-glass { margin:5px -11px -11px;width:calc(100% + 22px) }
  .hero-wave { bottom:220px }
  .services { padding-top:28px }
  .section-heading h2,.approach-title h2 { font-size:29px }
  .service-grid { grid-template-columns:1fr }
  .service-card { min-height:152px }
  .service-card h3 { font-size:19px }
  .service-card p { font-size:13px }
  .steps { grid-template-columns:1fr 1fr;gap:18px 14px }
  .step:not(:last-child):after { display:none }
  .step p { font-size:12px }
  .cta-banner { margin-top:24px }
  .contact-in { gap:14px }
  .brief-form { padding:20px }
  .brief-form .form-grid { grid-template-columns:1fr }
  .footer-links { flex-wrap:wrap }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { animation:none!important;transition:none!important }
  .reveal,html.js .reveal { opacity:1;transform:none }
}

/* ----------------------------------------------------------------------
   3D holo-core: the WebGL canvas is an enhancement, never a requirement.
   The original sharp WebP appears on browsers with WebGL disabled/lost.
   ---------------------------------------------------------------------- */
.three-hero { isolation: isolate; }
.three-hero #core-canvas {
  display: block;
  position: absolute;
  inset: -7% -9% -10%;
  width: 118%;
  height: 118%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background: transparent;
}
.three-hero.webgl-ready #core-canvas { opacity: 1; }
.three-hero .hero-fallback {
  position: relative;
  z-index: 2;
  transition: opacity .45s ease;
}
.three-hero.webgl-ready .hero-fallback { opacity: 0; }
.hero-fallback-label {
  display: none;
  position: absolute;
  right: max(12px, 4%);
  bottom: 10px;
  z-index: 5;
  width: min(46%, 520px);
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #cfd3ee;
  pointer-events: none;
}
#hero-glass[data-hero-renderer="image-fallback"] ~ .hero-fallback-label,
#hero-glass[data-hero-state="provisional"] ~ .hero-fallback-label {
  display: block;
}
/* The orbit SVG intentionally remains outside the renderer: robust fallback. */
.three-hero .orbit { z-index: 4; opacity: .65; }
.three-hero::after {
  content: "";
  position: absolute;
  inset: 10% 8% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgba(94,57,255,.17) 0%,rgba(21,144,220,.09) 42%,transparent 71%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 1;
}
@media (max-width:720px) {
  .three-hero #core-canvas { inset: -5% -8% -8%;width:116%;height:118%; }
}
@media (prefers-reduced-motion: reduce) {
  .three-hero #core-canvas, .three-hero .hero-fallback { transition: none; }
}

/* ----------------------------------------------------------------------
   v1.1 — Toronto skyline, step-by-step brief builder, and motion.
   Animated: transform and opacity (reveals, entrance, progress bar),
   SVG stroke-dashoffset (skyline draw), box-shadow/border-color/
   background/color on hovers, a repainted spotlight gradient, and the
   older hero animations (orbit rotation, float, wave drift, beacon, sweep).
   All of it is switched off under prefers-reduced-motion.
   ---------------------------------------------------------------------- */
.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 }
/* Skyline */
.toronto { display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(88,140,255,.35)) }
.toronto .sk { stroke-width:2.2 }
.toronto .dt { stroke-width:1.1;opacity:.5 }
.toronto .cn-beacon { opacity:.9 }
html.js .toronto .sk { stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset 1.5s cubic-bezier(.55,.1,.25,1) calc(var(--i,0) * 38ms) }
html.js .toronto .dt { opacity:0;transition:opacity .9s ease 1.5s }
html.js .toronto .cn-beacon { opacity:0;transition:opacity .6s ease 1.6s }
html.js .toronto.is-drawn .sk { stroke-dashoffset:0 }
html.js .toronto.is-drawn .dt { opacity:.5 }
html.js .toronto.is-drawn .cn-beacon { opacity:.9;animation:beacon 2.4s ease-in-out 2.2s infinite }
@keyframes beacon { 0%,100% { opacity:.9 } 50% { opacity:.2 } }
@media (max-width:720px) { .toronto { height:100% } .toronto .sk { stroke-width:2.6 } }
/* Scroll progress */
.scroll-progress { position:fixed;z-index:120;top:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#9852ff,#4b9eff,#56f4c5);pointer-events:none }
/* Hero entrance */
.hero-copy > *, .trust-row .trust-item { animation:rise .8s cubic-bezier(.2,.8,.2,1) both }
.hero-copy > :nth-child(2) { animation-delay:.08s }
.hero-copy > :nth-child(3) { animation-delay:.16s }
.hero-copy > :nth-child(4) { animation-delay:.24s }
.trust-row .trust-item:nth-child(1) { animation-delay:.34s }
.trust-row .trust-item:nth-child(2) { animation-delay:.42s }
.trust-row .trust-item:nth-child(3) { animation-delay:.5s }
@keyframes rise { from { opacity:0;transform:translateY(16px) } to { opacity:1;transform:none } }
/* Staggered reveals */
html.js .reveal { transition-delay:calc(var(--i,0) * 110ms) }
html.js .reveal.reveal-done { transition-delay:0s }
html.js .service-card.reveal.reveal-done { transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s }
html.js .info-card.reveal.reveal-done, html.js .industry-card.reveal.reveal-done { transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s }
html.js .reveal .eyebrow:after, html.js .eyebrow.reveal:after { transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s }
html.js .reveal.visible .eyebrow:after, html.js .eyebrow.reveal.visible:after { transform:none }
/* Divider lines: draw in, then a soft light sweep */
.glow-line { position:relative;overflow:hidden }
html.js .reveal-line { transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) }
html.js .reveal-line.visible { transform:none }
.glow-line:after { content:"";position:absolute;top:0;bottom:0;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(214,240,255,.95),transparent);transform:translateX(-120%);animation:sweep 5.5s ease-in-out 1.2s infinite }
@keyframes sweep { 0% { transform:translateX(-120%) } 60%,100% { transform:translateX(560%) } }
/* Buttons: shine + arrow nudge */
.btn-primary { position:relative;overflow:hidden;isolation:isolate }
.btn-primary:before { content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-130%) skewX(-18deg);transition:transform .7s ease }
.btn-primary:hover:before { transform:translateX(330%) skewX(-18deg) }
.btn span[aria-hidden="true"] { display:inline-block;transition:transform .2s ease }
.btn:hover span[aria-hidden="true"] { transform:translateX(3px) }
.btn-outline:hover span[aria-hidden="true"]:first-child { transform:translateX(-3px) }
.btn:active { transform:translateY(0) scale(.98) }
.btn-ghost { background:transparent;border-color:transparent;color:#c8cdf0;padding-inline:12px }
.btn-ghost:hover { color:#fff;border-color:rgba(160,150,230,.35) }
/* Cards: lift + pointer spotlight */
.info-card { position:relative;isolation:isolate;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s }
.info-card:hover { transform:translateY(-5px);border-color:rgba(160,140,255,.6);box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 24px rgba(108,80,255,.18) }
.info-card:after, .brief-form:after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(120,160,255,.16),transparent 70%) }
.info-card:hover:after { opacity:1 }
.brief-form { position:relative;isolation:isolate }
.brief-form:hover:after { opacity:.7 }
/* Approach: numbered steps, connecting track, sequential ping */
.steps { position:relative }
.step-num { display:block;font:700 10px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.2em;color:#9aa6d8;margin:0 0 4px }
.step-icon { position:relative;transition:transform .3s cubic-bezier(.2,.8,.2,1) }
.step:hover .step-icon { transform:translateY(-3px) scale(1.06) }
.step-icon:after { content:"";position:absolute;inset:-5px;border-radius:14px;border:1px solid var(--stroke);opacity:0;transform:scale(.9) }
html.js .steps .step { opacity:0;transform:translateY(14px);transition:opacity .55s ease calc(var(--i,0) * 140ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 140ms) }
html.js .steps.visible .step { opacity:1;transform:none }
.steps.visible .step-icon:after { animation:ping 5.6s ease-out infinite;animation-delay:calc(1s + var(--i,0) * 1.4s) }
@keyframes ping { 0% { opacity:0;transform:scale(.9) } 6% { opacity:.9 } 25%,100% { opacity:0;transform:scale(1.35) } }
/* Brief builder */
.brief-progress { margin:0 0 18px }
.brief-progress[hidden] { display:none }
.brief-progress-label { font:700 11px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9bffdc;margin-bottom:9px }
.brief-progress-track { height:6px;border-radius:6px;background:rgba(140,130,230,.2);overflow:hidden }
.brief-progress-fill { display:block;height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#8a46ff,#4b9eff,#56f4c5);transform:scaleX(.333);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1) }
.brief-step[hidden], .brief-steps[hidden], .step-nav[hidden], .btn[hidden] { display:none }
.brief-step { margin-bottom:6px }
.brief-step + .brief-step { margin-top:18px }
.step-title { display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin:0 0 6px;padding:0;color:#fff }
.step-title:focus { outline:none }
.step-title:focus-visible { outline:2px solid var(--mint);outline-offset:4px;border-radius:4px }
.step-hint { color:#b8c0e4;font-size:14px;margin:0 0 14px }
.chip-set { border:0;margin:0 0 18px;padding:0;min-width:0 }
.chips { display:flex;flex-wrap:wrap;gap:10px }
.chip { position:relative;display:inline-flex }
.chip input { position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer }
.chip span { display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid rgba(137,129,218,.5);background:#0c1435;color:#e8eaff;font-size:14px;font-weight:650;transition:transform .18s ease,background .2s,border-color .2s,box-shadow .2s;pointer-events:none }
.chip span:before { content:"+";display:inline-block;font-weight:800;color:#9aa6d8;transition:transform .25s cubic-bezier(.2,.8,.2,1),color .2s }
.chip:hover span { border-color:#b99aff;transform:translateY(-2px) }
.chip input:focus-visible + span { outline:2px solid var(--mint);outline-offset:3px }
.chip input:checked + span { background:linear-gradient(115deg,rgba(125,59,247,.55),rgba(75,158,255,.35));border-color:#b99aff;color:#fff;box-shadow:0 0 18px rgba(119,67,255,.3) }
.chip input:checked + span:before { content:"✓";color:#9bffdc;transform:rotate(360deg) }
.chip input:disabled + span { opacity:.6 }
.step-error { min-height:1.4em;margin:2px 0 0;color:#ffb4c8;font-size:13px }
.field-error { min-height:1.4em;margin:4px 0 0;color:#ffb4c8;font-size:13px;line-height:1.4 } /* one line reserved so fields don't shift */
.form-field input[aria-invalid="true"] { border-color:#ff8fb0 }
.step-nav { justify-content:space-between;margin-top:6px }
.step-nav .btn-primary { margin-left:auto }
.enter-fwd { animation:stepFwd .4s cubic-bezier(.2,.8,.2,1) both }
.enter-back { animation:stepBack .4s cubic-bezier(.2,.8,.2,1) both }
@keyframes stepFwd { from { opacity:0;transform:translateX(24px) } to { opacity:1;transform:none } }
@keyframes stepBack { from { opacity:0;transform:translateX(-24px) } to { opacity:1;transform:none } }
.brief-result h3:focus { outline:none }
@media (max-width:480px) {
  .chip span { font-size:13.5px;padding:9px 14px }
  .step-nav .btn { min-width:0 }
  .step-title { font-size:20px }
}
@media (prefers-reduced-motion:reduce) {
  .scroll-progress { display:none }
  .skyline { transform:none!important }
  html.js .toronto .sk { stroke-dasharray:none;stroke-dashoffset:0 }
  html.js .toronto .dt { opacity:.5 }
  html.js .toronto .cn-beacon { opacity:.9 }
  html.js .reveal-line, html.js .reveal .eyebrow:after, html.js .eyebrow.reveal:after { transform:none }
  html.js .steps .step { opacity:1;transform:none }
  .glow-line:after { display:none }
  .btn:hover, .chip:hover span, .info-card:hover, .industry-card:hover, .service-card:hover, .step:hover .step-icon { transform:none }
}

/* ----------------------------------------------------------------------
   v1.3 — Four industry groups. Card lift/glow matches info-cards.
   Hover animates transform, box-shadow and border-color; off under reduced motion.
   ---------------------------------------------------------------------- */
.industry-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px }
.industry-card { position:relative;isolation:isolate;overflow:hidden;min-width:0;overflow-wrap:break-word;padding:24px 26px 22px;border:1px solid rgba(118,112,190,.3);border-radius:17px;background:linear-gradient(130deg,rgba(43,38,96,.4),rgba(10,17,46,.9));transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s }
.industry-card:hover { transform:translateY(-5px);border-color:rgba(160,140,255,.6);box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 24px rgba(108,80,255,.18) }
.industry-card:after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(120,160,255,.16),transparent 70%) }
.industry-card:hover:after { opacity:1 }
.industry-card h3 { font-size:22px;letter-spacing:-.035em;line-height:1.15;margin:0 0 8px;font-weight:830;max-width:none }
.industry-note { color:#c5cbe8;font-size:14px;line-height:1.45;margin:0 0 14px }
.industry-block { margin:0 0 14px }
.industry-block:last-child { margin-bottom:0 }
.industry-label { font:700 10px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:#c5adff;margin:0 0 6px }
.industry-block + .industry-block .industry-label { color:#8befff }
.industry-block p:not(.industry-label) { color:#d3d8f3;line-height:1.58;margin:0 }

@media (max-width:720px) {
  .industry-grid { grid-template-columns:minmax(0,1fr);gap:20px }
}
@media (max-width:480px) {
  .industry-card { padding:20px }
  .industry-card h3 { font-size:20px }
}
