:root{--canvas:#211815;--cream:#fff0da;--soft:#ebd0be;--orange:#ffa77d;--line:#765444;--sans:"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;background:var(--canvas);color:var(--cream);font:16px/1.5 var(--sans)}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button,textarea{font:inherit}
button{cursor:pointer;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffbc8e;outline-offset:4px}
.wrap{width:min(100% - 96px,1440px);margin-inline:auto}
.meta{font:650 10px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px}
.wordmark{display:flex;align-items:center;gap:11px;font-weight:710;letter-spacing:-.035em;font-size:17px;white-space:nowrap}
.mark{width:33px;height:33px;display:grid;place-items:center;border:1px solid #c8a896;color:#ffad84}
.mast-note{color:#dabfae;font:11px var(--mono)}
.mast nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:650}
.rewire{--ground:#342019;--glow:#a8502e;--signal:#ffb38b;--stage-line:#724a37;--panel:#2b1e19;--live:#ffc098}
.stage{
  position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
  min-height:clamp(520px,66vh,680px);border:1px solid var(--stage-line);
  background:var(--ground);transition:background .65s,border-color .65s;
}
.rewire[data-done=true]{--ground:#112b27;--glow:#3c8071;--signal:#c7f2d0;--stage-line:#4d796b;--panel:#1a2c26;--live:#c6f2d2}
.stage-copy{padding:clamp(25px,4vw,64px);padding-right:0;position:relative;z-index:2}
.stage-copy .meta{color:var(--signal)}
.stage-copy h1{
  margin:19px 0 20px;line-height:.9;font-size:clamp(63px,7.25vw,116px);
  font-weight:580;letter-spacing:-.071em;
}
.stage-copy h1 em{font-family:Baskerville,Georgia,serif;font-weight:400;letter-spacing:-.058em;color:var(--signal);white-space:nowrap}
.lede{max-width:407px;color:var(--soft);font-size:18px;line-height:1.52}
[data-done=true] .lede{color:#dcebe1}
.compare{margin-top:24px}
.compare p{margin-top:8px;color:var(--soft);font-size:12px}
[data-done=true] .compare p{color:#cee0d6}
.state-switch{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:48px;
  padding:6px 10px;border:1px solid var(--stage-line);border-radius:5px;
  background:#1a120e4a;font-size:13px;font-weight:650;color:var(--soft);
}
.state-switch:hover{border-color:var(--signal)}
.state-switch .current-label,[data-done=true] .state-switch .future-label{color:var(--cream)}
[data-done=true] .state-switch .current-label{color:#c1d5c9;font-weight:500}
.state-switch .future-label{font-weight:500}
[data-done=true] .state-switch .future-label{font-weight:650}
.switch-track{
  display:inline-flex;align-items:center;width:42px;height:24px;flex:none;padding:3px;
  border:1px solid var(--signal);border-radius:20px;color:var(--signal);background:#130d0b49;
}
.switch-track i{display:block;width:16px;height:16px;border-radius:50%;background:currentColor;transition:transform .34s cubic-bezier(.2,.75,.3,1)}
[aria-checked=true] .switch-track i{transform:translateX(18px)}
.art{
  position:absolute;inset:0 0 0 42%;overflow:hidden;z-index:-1;
  background:radial-gradient(ellipse at 69% 53%,var(--glow),transparent 74%),var(--ground);
}
.art::before,.art::after{content:"";position:absolute;inset:0;pointer-events:none}
.art::before{background-image:linear-gradient(#fff0d315 1px,transparent 1px),linear-gradient(90deg,#fff0d315 1px,transparent 1px);background-size:24px 24px}
.art::after{background:linear-gradient(90deg,var(--ground),transparent 35%);z-index:2}
.orbital{
  position:absolute;inset:50% auto auto 62%;width:min(63%,490px);aspect-ratio:1;
  transform:translate(-50%,-50%);border:1px solid #ffddb970;border-radius:50%;
  box-shadow:0 0 0 28px #ffddb920,0 0 0 60px #ffddb912,0 0 0 96px #ffddb90b;
}
.axis{position:absolute;width:100%;height:100%;inset:0;opacity:.87}
.route{fill:none;stroke:var(--live);stroke-width:1.15;stroke-dasharray:4 4;opacity:.22;vector-effect:non-scaling-stroke;transition:stroke .4s,opacity .4s}
.route.connected{opacity:.92;stroke-dasharray:none;stroke-width:1.5}
.slip{
  position:absolute;left:44%;top:var(--top);width:39%;min-height:20%;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(9px,1.38vw,22px);color:#31201b;background:var(--paper);
  border:1px solid #30201880;box-shadow:5px 12px 24px #140b086e;
  transform:translate(var(--x),var(--y)) rotate(var(--tilt));transition:transform .62s cubic-bezier(.2,.8,.3,1),background .45s;
}
.slip[data-wired=true]{transform:none;height:22%;background:var(--wired);color:#203a2f}
.slip .meta{font-size:clamp(8px,.75vw,11px);letter-spacing:.06em}
.slip strong{display:block;font-size:clamp(22px,3.18vw,49px);font-weight:730;letter-spacing:-.065em;line-height:.94;text-wrap:balance}
.slip .lines{display:grid;gap:4px;width:62%;margin-top:2px}
.lines i{height:1px;background:currentColor;opacity:.25}
.lines i:last-child{width:72%}
.slip[data-wired=true] .lines{display:none}
.slip[data-wired=true] strong{font-size:clamp(20px,2.64vw,42px)}
.slip-a{--top:14%;--x:-31%;--y:-2%;--tilt:-12deg;--paper:#f4dfba;--wired:#e9f0d9}
.slip-b{--top:39%;--x:24%;--y:-5%;--tilt:12deg;--paper:#f3a17b;--wired:#b9dfc2}
.slip-c{--top:64%;--x:-13%;--y:-5%;--tilt:-5deg;--paper:#da7f67;--wired:#91c3aa}
.art-index{position:absolute;right:6%;bottom:6%;color:var(--signal)}
.cross{position:absolute;font:19px var(--mono);color:var(--signal)}
.cross-a{top:12%;right:8%}
.cross-b{bottom:14%;left:26%}
.campaign-note{
  display:flex;align-items:center;gap:16px 23px;justify-content:space-between;min-height:54px;
  padding:10px 14px;border:1px solid var(--stage-line);border-top:0;
  background:var(--panel);color:#f1d9cb;font-size:13px;transition:background .65s,border-color .65s;
}
.campaign-note .meta{flex:none;color:var(--signal)}
[data-done=true] .campaign-note{color:#e0eee3}
.work{padding-block:95px 80px}
.work .meta,.contact .meta{color:var(--orange)}
.work h2,.contact h2{font-size:clamp(44px,6vw,84px);font-weight:550;line-height:.98;letter-spacing:-.065em;margin:14px 0 23px}
.work>p:not(.meta){max-width:590px;color:var(--soft);font-size:18px}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:37px}
.services article{border-top:1px solid var(--line);padding-top:15px}
.services h3{font-size:23px;letter-spacing:-.04em;margin:7px 0 5px}
.services p:not(.meta){font-size:15px;color:var(--soft);max-width:335px}
.use-cases{padding-bottom:80px}
.use-cases .meta{color:var(--orange)}
.use-cases h2{font-size:clamp(39px,5vw,69px);font-weight:550;line-height:.99;letter-spacing:-.06em;margin:12px 0 14px}
.use-cases .intro{font-size:16px;color:var(--soft);max-width:525px}
.use-list{margin-top:29px;border-top:1px solid var(--line)}
.use-list details{border-bottom:1px solid var(--line)}
.use-list summary{
  display:grid;grid-template-columns:200px minmax(0,1fr) 30px;align-items:center;gap:15px;
  min-height:65px;padding:12px 7px;list-style:none;cursor:pointer;
}
.use-list summary::-webkit-details-marker{display:none}
.use-list summary:hover{background:#ffdac60a}
.use-list summary:focus-visible{outline-offset:-3px}
.use-title{font-size:21px;font-weight:660;letter-spacing:-.025em;line-height:1.25}
.use-icon{
  display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;
  font:17px var(--mono);color:var(--orange);
}
.use-icon::before{content:"+"}
.use-list details[open] .use-icon::before{content:"−"}
.use-body{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;
  padding:2px 44px 21px 222px;
}
.use-body h3{font-size:14px;margin:0 0 3px;font-weight:720}
.use-body p{max-width:545px;font-size:15px;color:var(--soft)}
.contact{padding:59px 0 65px;background:#2d201b;border-block:1px solid #604333}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start;gap:clamp(24px,5vw,76px)}
.contact h2{margin-bottom:17px}
.contact p:not(.meta){max-width:410px;color:var(--soft);margin-bottom:15px}
.cta{display:inline-flex;align-items:center;gap:17px;min-height:47px;background:#ffb086;color:#2e1b13;border:1px solid #ffb086;padding:8px 15px;font-size:14px;font-weight:740}
.cta:hover{filter:brightness(.91)}
.footer{display:flex;justify-content:space-between;gap:14px;padding-block:19px;color:#d9bcaa;font-size:12px}


@media(max-width:1020px){
  .wrap{width:calc(100% - 58px)}
  .stage-copy h1{font-size:clamp(57px,8vw,93px)}
  .stage{min-height:480px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 30px)}
  .mast{min-height:62px;gap:10px}
  .wordmark{font-size:14px;gap:7px}
  .mark{width:25px;height:25px}
  .mast nav{font-size:12px}
  .mast-note,.mast nav .section-link{display:none}
  .stage{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .stage-copy{padding:25px 16px 0}
  .stage-copy h1{font-size:clamp(47px,10.7vw,76px);margin:13px 0 12px;line-height:.91}
  .lede{font-size:16px}
  .compare{margin-top:17px}
  .art{position:relative;inset:auto;z-index:0;min-height:clamp(250px,63vw,330px)}
  .art::after{background:linear-gradient(180deg,var(--ground),transparent 32%);z-index:-1}
  .orbital{left:57%;width:57%}
  .slip{left:33%;width:50%;min-height:21%;padding:8px;gap:5px}
  .slip strong,.slip[data-wired=true] strong{font-size:clamp(17px,4.2vw,28px)}
  .slip[data-wired=true]{height:auto}
  .slip .meta{font-size:8px}
  .slip .lines{margin-top:0}
  .art-index{font-size:8px;bottom:2.5%;right:5%}
  .cross{font-size:14px}
  .cross-b{left:13%}
  .campaign-note{align-items:start;flex-direction:column;gap:4px;padding:10px 12px;font-size:12px}
  .work{padding-block:56px}
  .use-cases{padding-bottom:56px}
  .use-list{margin-top:23px}
  .use-list summary{grid-template-columns:minmax(0,1fr) 28px;gap:4px 9px;padding:13px 5px}
  .use-label{grid-column:1;grid-row:1}
  .use-title{grid-column:1;grid-row:2;font-size:18px}
  .use-icon{grid-column:2;grid-row:1/3}
  .use-body{grid-template-columns:1fr;gap:13px;padding:2px 5px 16px}
  .services{grid-template-columns:1fr;gap:19px;margin-top:27px}
  .contact .wrap{grid-template-columns:1fr;gap:13px}
  .contact{padding-block:42px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
[hidden]{display:none!important}
.enquiry-form{position:relative;min-width:0}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:5px;margin-bottom:14px}
.field label{color:var(--cream);font-size:13px;font-weight:650}
.field label span{color:#dfc3b2;font-weight:400}
.field input,.field select,.field textarea{
  width:100%;min-height:45px;padding:10px 11px;background:#221713;color:var(--cream);
  border:1px solid #a07964;border-radius:3px;font:inherit;font-size:16px;
}
.field textarea{resize:vertical}
.field textarea::placeholder{color:#c8ad9d}
.contact .form-note{font-size:12px;max-width:none;margin:0 0 10px}
.form-note a,.footer a:hover{text-decoration:underline;text-underline-offset:3px}
.preview-notice{font-weight:650}
.contact .form-status{margin:11px 0 0;font-size:14px;max-width:none}
.form-status[data-state=error]{color:#ffbc9f}
.form-status[data-state=success]{color:#d1f0d1}
.cta:disabled{opacity:.68;cursor:wait}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.footer div{display:flex;gap:20px}
.prose{max-width:760px;padding-block:clamp(34px,7vw,95px)}
.prose h1{font-size:clamp(42px,8vw,82px);line-height:.98;letter-spacing:-.06em;margin:10px 0 21px}
.prose h2{font-size:23px;margin:24px 0 7px}
.prose p{color:var(--soft);max-width:62ch;margin-bottom:12px}
.prose .cta{margin-top:15px}
@media(max-width:520px){.field-pair{grid-template-columns:1fr;gap:0}.footer div{gap:12px}}


.mobile-nav,.mobile-mast-note,.availability-short{display:none}
.company-details{display:grid;gap:3px;line-height:1.45}
.company-details strong{color:var(--cream)}
.skip-link{position:fixed;top:10px;left:10px;z-index:40;transform:translateY(-160%);background:#ffe2c9;color:#2a1b16;padding:8px 12px;font-weight:720}
.skip-link:focus{transform:none}
.contact-email{display:inline-flex;align-items:center;gap:7px;min-height:38px;color:var(--orange);font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
  .homepage{--mobile-nav:65px;--mobile-header:60px;padding-bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom))}
  html:has(.homepage){scroll-padding-top:calc(70px + env(safe-area-inset-top));scroll-padding-bottom:calc(75px + env(safe-area-inset-bottom))}
  .homepage .mast{position:sticky;top:0;z-index:20;width:100%;min-height:calc(var(--mobile-header) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;background:#211815f5;border-bottom:1px solid #684a3b;backdrop-filter:blur(10px)}
  .homepage .mast nav{display:none}
  .homepage .wordmark{font-size:14px}
  .mobile-mast-note{display:inline-flex;align-items:center;gap:5px;color:#f1ccb4;font:10px/1.2 var(--mono);white-space:nowrap}
  .mobile-mast-note::before{content:"";width:6px;height:6px;border-radius:50%;background:#c3e6bd}
  .homepage .rewire{width:100%;margin:0}
  .homepage .stage{border-inline:0}
  .homepage .stage-copy{padding:25px 18px 0}
  .homepage .stage-copy h1{font-size:clamp(44px,11vw,75px);margin:12px 0 13px}
  .homepage .stage-copy .meta{font-size:9px;letter-spacing:.075em}
  .homepage .lede{font-size:15px;max-width:34em}
  .homepage .compare{margin-top:16px}
  .homepage .state-switch{
    display:grid;grid-template-columns:1fr auto 1fr;width:min(100%,345px);min-height:48px;
    padding-inline:12px;border-radius:7px;background:#1e1310a6;
  }
  .homepage .compare p{font-size:11px;margin-top:6px}
  .homepage .art{min-height:clamp(230px,59vw,330px)}
  .homepage .art-index{bottom:2%}
  .homepage .campaign-note{padding:9px 17px 11px;border-inline:0}
  .homepage .work{padding-block:43px 47px}
  .homepage .work h2,.homepage .contact h2{font-size:clamp(40px,10.2vw,69px)}
  .homepage .work>p:not(.meta){font-size:16px}
  .homepage .services{gap:17px;margin-top:24px}
  .homepage .services article{padding-top:12px}
  .homepage .use-list summary{min-height:66px}
  .homepage .contact .contact-email{margin-bottom:8px}
  .homepage .contact{padding-block:37px 44px}
  .homepage .contact .wrap{gap:20px}
  .homepage .cta{min-height:49px}
  .homepage .enquiry-form .cta{width:100%;justify-content:space-between}
  .homepage .contact .form-status{scroll-margin-bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom))}
  .mobile-nav{
    position:fixed;z-index:30;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:calc(var(--mobile-nav) + env(safe-area-inset-bottom));padding:4px 9px calc(5px + env(safe-area-inset-bottom));
    border-top:1px solid #795745;background:#211815f5;backdrop-filter:blur(12px);
  }
  .mobile-nav a{
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:49px;
    border-radius:7px;color:#e7c8b6;font-size:11px;font-weight:610;line-height:1.15;text-decoration:none;
  }
  .mobile-nav svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.55;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav a[aria-current]{background:#4a3025;color:#ffe2c7}
  .mobile-nav a:focus-visible{outline-offset:-3px}
  .homepage:has(.enquiry-form :is(input,select,textarea):focus) .mobile-nav{visibility:hidden}
}
@media(max-width:350px){
  .homepage .mast{padding-inline:12px}
  .mobile-mast-note{font-size:9px}
  .availability-full{display:none}
  .availability-short{display:inline}
}

@media(max-width:550px){.homepage .footer{flex-direction:column;align-items:start}}