/* CAPACORE: "Descent". Landing page (one screen, a scene) and contact page (the surface, calm). */
/* fallbacks sized to Barlow, so little moves when the web fonts arrive. size-adjust values are measured (Chromium, Barlow against the Arial and
   Arial Narrow metric-compatible faces: headline weight and the capitals of buttons and labels each get their own); Barlow's ascent is 100%, descent 20% */
@font-face{font-family:"BC fbn";font-weight:700;src:local("Arial Narrow"),local("Liberation Sans Narrow");size-adjust:99%;ascent-override:101%;descent-override:20.2%;line-gap-override:0%}
@font-face{font-family:"BC fbn";font-weight:500 600;src:local("Arial Narrow"),local("Liberation Sans Narrow");size-adjust:82%;ascent-override:122%;descent-override:24.4%;line-gap-override:0%}
@font-face{font-family:"BC fb";font-weight:700;src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:81%;ascent-override:123.5%;descent-override:24.7%;line-gap-override:0%}
@font-face{font-family:"BC fb";font-weight:500 600;src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:67%;ascent-override:149%;descent-override:29.9%;line-gap-override:0%}
@font-face{font-family:"B fb";font-weight:400;src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:95%;ascent-override:105%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"B fb";font-weight:500 600;src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:92%;ascent-override:108.7%;descent-override:21.7%;line-gap-override:0%}
:root{--navy:#082D4A;--blue:#2563EB;--lb:#93C5FD;--ink:#050d16;--paper:#F3F6FA;--mute:#A9BDD3;--pad:max(clamp(20px,4.4vw,64px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--cond:"Barlow Condensed","BC fbn","BC fb",sans-serif;--body:Barlow,"B fb",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:#050d16;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
:focus-visible{outline:2px solid var(--lb);outline-offset:3px}

/* ---------- shared pieces ---------- */
.logo{display:block;line-height:0;border-radius:3px}
.logo img{display:block;width:clamp(164px,13.2vw,196px);height:auto}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;white-space:nowrap;border:0;border-radius:2px;font:600 15px/1 var(--cond);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s ease,box-shadow .18s ease,transform .16s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(4,16,40,.35)}
.btn-solid::after{content:"";width:7px;height:7px;margin:0 2px 0 12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn-ghost{color:#E6EEF8;background:rgba(5,13,22,.42);box-shadow:inset 0 0 0 1px rgba(147,197,253,.4)}
@media (hover:hover){
  .btn-solid:hover{background:#2E6BEE}
  .btn-solid:hover::after{transform:translateX(3px) rotate(45deg)}
  .btn-ghost:hover{background:rgba(8,45,74,.7);box-shadow:inset 0 0 0 1px var(--lb)}
}

/* ---------- landing: one fixed stage, the page never scrolls ---------- */
.home{overflow:hidden;overscroll-behavior:none}
html:has(.home){overflow:hidden;overscroll-behavior:none}
.stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#050d16;touch-action:pinch-zoom}
/* before the scene script takes over: the dusk sky and the ground of the opening shot, so nothing flashes (a return visit opens underground) */
.js:not(.rm):not(.rv) .stage{background:linear-gradient(180deg,#06192f 0,#061a31 1.2%,#0a2f56 25.3%,#16508b 43.8%,#3f7cc0 56.7%,#86b6ec 66%,#0a1e33 66%,#081827 70%,#050d16 100%)}
.scene,.fallback,.shade{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-user-select:none;user-select:none}
.scene .ly{position:absolute;left:0;top:0;will-change:transform}
.scene canvas{position:absolute;display:block;max-width:none}
.scene .stg{left:0;top:0;opacity:0;transition:opacity .28s ease}
.scene{isolation:isolate}
.scene .rope{transform-origin:50% 100%;will-change:transform;animation:sway 4.7s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-.085deg)}to{transform:rotate(.11deg)}}
/* the visitor's cap lamp: a pool of lit rock that follows the pointer or the finger (drawn by scene.js) */
.scene .cap{left:0;top:0;pointer-events:none;opacity:0;transition:opacity .45s ease;will-change:transform,opacity}
.scene .cap.on{opacity:1}
/* static picture of the settled level: JavaScript off, or reduced motion until the canvas is ready. 36 m by 40 m at the scale the scene would use */
.fallback svg{--k:max(100vw / 1440,100vh / 1600,.525px);position:absolute;display:block;width:calc(1440 * var(--k));height:calc(1600 * var(--k));left:calc(69vw - 993.6 * var(--k));top:calc(47vh - 752 * var(--k))}
.js .fallback{display:none}
.shade{pointer-events:none;background:linear-gradient(180deg,rgba(2,8,15,.62) 0,rgba(2,8,15,0) 17%),linear-gradient(0deg,rgba(2,8,15,.72) 0,rgba(2,8,15,.3) 30%,rgba(2,8,15,0) 52%),radial-gradient(125% 95% at 55% 42%,rgba(2,6,12,0) 58%,rgba(2,6,12,.5) 100%)}

.top{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,3.4vh,34px) var(--pad) 0}
.nav{display:flex;align-items:center;gap:10px}
.copy{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:clamp(66px,10.4vh,104px);pointer-events:none;transition:opacity .2s ease}
.hl{margin:0;font:700 clamp(40px,min(5.75vw,10.2vh),104px)/.94 var(--cond);letter-spacing:-.012em;color:var(--paper)}
.l1,.l2{display:table}
.l2{color:var(--lb)}
.nb{white-space:nowrap}
.mv{will-change:transform,opacity}
/* the headline arrives in two beats. Line one comes up dim in the rock as the cage goes underground and is lit when the level arrives;
   line two is part of the rock face and rides in with the level (scene.js moves it and fades it up) */
.js .l1{opacity:0;color:#72869C;translate:0 16px}
.js.go .l1{opacity:1;translate:0 0;transition:opacity .55s ease,translate .7s cubic-bezier(.2,.7,.2,1),color .7s ease}
.js.in .l1{color:var(--paper)}
.js .l2{opacity:0}
/* a return visit opens on the level: line one is simply there */
.js.rv .l1{color:var(--paper);translate:none}
.js.rv.go .l1{transition:opacity .25s ease}
.js.rm .l1{opacity:1;translate:none;color:var(--paper)}
.js.rm .l2{opacity:1}
/* winder depth indicator, and the way into the product: the bank at the top, four named levels below it, the marker rides with the cage.
   Each level is a control (details and summary, so it works without the script) that opens a card about what the platform does there;
   with the script the marker and the cage in the shaft ride to the chosen level (main.js and scene.js).
   The gauge's height is capped with a percentage of the stage, not with vh: on Android the stage is shorter than 100vh while the address bar shows */
.gauge{position:absolute;z-index:6;right:calc(var(--pad) + 5px);bottom:clamp(66px,10.4vh,104px);width:1px;height:min(clamp(196px,24vh,228px),100% - 150px);background:rgba(147,197,253,.4);opacity:0;transition:opacity .8s ease .3s}
.live .gauge,html:not(.js) .gauge{opacity:1}
.gauge::before{content:"";position:absolute;right:-6px;top:0;width:13px;height:1px;background:rgba(147,197,253,.75)}
.gauge b{position:absolute;left:-4px;top:-4.5px;width:9px;height:9px;background:var(--lb);transform:rotate(45deg);will-change:transform;pointer-events:none}
html:not(.js) .gauge b{top:auto;bottom:-4.5px}
/* a slow ring on the marker says the gauge can be worked; it stops once a level has been opened */
.gauge b::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 0 0 1px var(--lb);opacity:0;animation:ping 3.4s ease-out 5s infinite}
.gauge.used b::after{animation:none}
@keyframes ping{0%{transform:scale(1);opacity:.75}45%,100%{transform:scale(3.4);opacity:0}}
/* each level's hit area is a quarter of the gauge tall, centred on its tick, and reaches left over its name */
.lv summary{position:absolute;right:-22px;top:calc(var(--i)*25% - 12.5%);height:25%;display:flex;align-items:center;justify-content:flex-end;padding:0 22px 0 10px;list-style:none;cursor:pointer;border-radius:2px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.lv summary::-webkit-details-marker{display:none}
.lv summary:focus-visible{outline-offset:-3px}
.lv summary i{position:absolute;right:22px;top:50%;width:9px;height:1px;background:rgba(147,197,253,.75);transition:width .18s ease,background-color .18s ease}
.lv summary span{margin-right:9px;padding:4px 6px;border-radius:2px;background:rgba(5,13,22,.62);font:600 12px/1 var(--cond);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;color:#B6C8DB;transition:color .18s ease}
.lv[open] summary i{width:13px;height:2px;margin-top:-.5px;background:#fff;box-shadow:0 0 10px rgba(147,197,253,.85)}
.lv[open] summary span{color:#fff}
/* the card: a small drawing, a word, a sentence, three points, and the way on */
.card{position:absolute;z-index:1;right:112px;bottom:0;width:min(324px,100vw - 2*var(--pad) - 44px);padding:16px 18px 10px;border-radius:2px;background:rgba(4,13,24,.95);box-shadow:inset 0 0 0 1px rgba(147,197,253,.26),0 24px 60px -24px rgba(0,0,0,.85);animation:pop .26s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.pic{display:block;width:min(190px,100% - 40px);height:auto;margin:0 0 11px;overflow:visible}
.pic .s{fill:none;stroke:rgba(147,197,253,.5);stroke-width:1}
.pic .f{fill:rgba(147,197,253,.5)}
.pic .h{fill:var(--paper)}
.pic .w{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the drawings assemble once as the card opens: columns rise, bars run out, lines are drawn */
.lv[open] .pic .r,.lv[open] .pic .q{transform-box:fill-box;transform-origin:50% 100%;animation:grow .5s cubic-bezier(.2,.8,.2,1) calc(var(--d)*65ms + .1s) both}
.lv[open] .pic .q{transform-origin:0 50%;animation-name:run}
.lv[open] .pic .w{stroke-dasharray:1;animation:draw .9s ease .15s both}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes run{from{transform:scaleX(0)}}
@keyframes draw{from{stroke-dashoffset:1}}
.card h2{margin:0;font:600 26px/1.05 var(--cond);letter-spacing:.005em;color:var(--paper)}
.card p{margin:6px 0 0;font:400 15px/1.5 var(--body);color:#C7D6E6}
.pts{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:4px}
.pts li{position:relative;padding-left:19px;font:500 14px/1.35 var(--body);color:var(--paper)}
.pts li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--lb)}
.act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px;margin-top:4px}
.card a,.nx{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1 var(--cond);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--lb);transition:color .18s ease}
.card a::after,.nx::after{content:"";width:6px;height:6px;margin-left:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
/* the next level is the one above: its arrow points up the shaft */
.nx{display:none;padding:0;border:0;background:none;color:#B6C8DB;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nx::after{transform:rotate(-45deg);margin-top:3px}
.card .since{margin:2px 0 0;padding-top:8px;border-top:1px solid rgba(147,197,253,.16);font:400 12.5px/1.4 var(--body);letter-spacing:.01em;color:#9DB1C7}
.x{display:none;position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;border-radius:2px;background:none;color:#B6C8DB;cursor:pointer;-webkit-tap-highlight-color:transparent}
.x::before,.x::after{content:"";position:absolute;left:15px;top:21px;width:14px;height:2px;background:currentColor;transform:rotate(45deg)}
.x::after{transform:rotate(-45deg)}
/* the close and next buttons belong to the script: they show only once main.js has wired the gauge */
.gauge.on .x{display:block}
.gauge.on .nx{display:inline-flex}
@media (hover:hover){
  .lv:not([open]) summary:hover i{width:13px;background:var(--paper)}
  .lv:not([open]) summary:hover span{color:var(--paper)}
  .card a:hover,.x:hover,.nx:hover{color:var(--paper)}
  .card a:hover::after{transform:translateX(3px) rotate(45deg)}
  .nx:hover::after{transform:translateY(-3px) rotate(-45deg)}
}
.foot{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:clamp(14px,3vh,30px);margin:0;font:400 13px/1.3 var(--body);letter-spacing:.02em;color:#8A9FB6}
.js .foot{opacity:0}
.js.set .foot{opacity:1;transition:opacity .6s ease .15s}
.js.rm .foot,.js.rm .gauge{opacity:1}
/* safety net: if the page script never arrives, the words still come up (late) over the opening sky */
.js:not(.live) .l1,.js:not(.live) .l2,.js:not(.live) .foot,.js:not(.live) .gauge{animation:late .5s ease 7s forwards}
.js:not(.live) .l1{animation-name:late1}
@keyframes late{to{opacity:1}}
@keyframes late1{to{opacity:1;color:#F3F6FA;translate:0 0}}

@media (min-width:700px){
  .js.rm:not(.live) .fallback{display:block}
}
/* upright tablets: a larger headline for the taller frame */
@media (min-width:700px) and (max-aspect-ratio:1/1){
  .hl{font-size:clamp(40px,min(9.2vw,8vh),104px)}
}
@media (max-width:699px){
  .fallback svg{left:calc(70vw - 993.6 * var(--k))}
  .gauge{bottom:calc(118px + env(safe-area-inset-bottom,0px));height:clamp(164px,53% - 130px,204px)}
  .lv summary span{font-size:11px;letter-spacing:.14em;margin-right:7px}
  .card{right:34px;bottom:-8px}
  .logo img{width:164px}
  .nav{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(44px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .btn{min-height:48px}
  .home .btn-ghost{background:rgba(5,13,22,.66)}
  .copy{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .hl{font-size:clamp(34px,min(11.8vw,6.3vh),56px)}
  .l1 .nb,.l2 .nb{display:block}
  .foot{bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:12px}
  html:not(.js) .shade{background:linear-gradient(180deg,rgba(2,8,15,.62) 0,rgba(2,8,15,0) 17%),linear-gradient(0deg,rgba(2,8,15,.94) 0,rgba(2,8,15,.86) 30%,rgba(2,8,15,0) 46%)}
}
/* short, wide windows (a phone on its side, heavy zoom): the two actions stay in the header and the headline keeps to two lines */
@media (max-width:699px) and (min-width:440px) and (max-height:480px){
  .home .nav{position:static;display:flex;gap:8px}
  .home .btn{min-height:44px;padding:0 15px;font-size:14px}
  .copy{bottom:44px}
  .gauge{bottom:44px;height:min(204px,100% - 124px)}
  .card{bottom:0}
  .hl{font-size:clamp(26px,min(6.6vw,9.4vh),40px)}
  .l1 .nb,.l2 .nb{display:inline}
  .foot{bottom:12px}
}
/* a window too short to hold the page scrolls, so that nothing is ever out of reach */
@media (max-height:239px),(max-width:439px) and (max-height:429px){
  html:has(.home),.home{overflow-y:auto}
  .gauge{display:none}
  .stage{position:relative;height:430px;touch-action:auto}
  .home .nav{position:absolute;top:338px;bottom:auto}
}
@media (min-width:440px) and (max-height:239px){
  .stage{height:240px}
  .home .nav{position:static}
}
@media (max-height:299px){
  .gauge{display:none}
}
/* as the window gets shorter the card sheds its drawing, then its last line, so that it stands below the level, not on it. The three points carry
   the information: they stay, in a tighter setting, until the window is under 480 px tall */
@media (max-height:739px),(max-width:699px) and (max-height:799px){
  .pic{display:none}
}
@media (max-height:659px),(max-width:699px) and (max-height:699px){
  .card .since{display:none}
}
@media (max-height:599px){
  .card{padding:12px 16px 4px}
  .card h2{font-size:22px}
  .card p{margin-top:4px;font-size:14px;line-height:1.42}
  .pts{margin-top:6px;gap:2px}
  .pts li{font-size:13px}
  .act{margin-top:0}
}
@media (max-height:479px){
  .pts{display:none}
}
@media (max-width:1119px){
  .stage:has(.lv[open]) .copy{opacity:0}
  .pop .copy{opacity:0}
}
@media (max-width:699px){
  .gauge:has(.lv[open]) .lv summary span{opacity:0}
  .pop .gauge .lv summary span{opacity:0}
}
/* the narrowest phones: the two actions share one line, so the next button says only Next */
@media (max-width:379px){
  .nx span{display:none}
  .card a,.nx{letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- contact: the surface at the headgear, calm ---------- */
.contact{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;background:#030915}
.surface{position:absolute;left:0;right:0;bottom:0;height:max(520px,min(100vh,63vw));overflow:hidden;pointer-events:none}
.surface svg{display:block;width:100%;height:100%}
.surface::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#030915 0,rgba(3,9,21,0) 22%)}
/* the page opens as the cage comes up to the bank: the sheaves run down with it, the lamps strike circuit by circuit, then dusk turns slowly to night */
.shv,.cg{animation:spin 3.4s cubic-bezier(.12,.6,.2,1) both}
.shr{animation-name:spinr}
.cg{animation-name:rise}
@keyframes spin{from{transform:rotate(-300deg)}}
@keyframes spinr{from{transform:rotate(300deg)}}
@keyframes rise{from{transform:translateY(64px)}}
.lk{animation:strike .8s steps(1,end) both}
.k1{animation-delay:.3s}
.k2{animation-delay:.6s}
.k3{animation-delay:.9s}
@keyframes strike{0%{opacity:0}30%{opacity:1}44%{opacity:.15}58%{opacity:.9}70%{opacity:.4}82%{opacity:1}}
.ngt,.st{animation:night 48s steps(48,end) 5s both}
.st{animation-name:stars}
@keyframes night{to{opacity:.8}}
@keyframes stars{from{opacity:.6}}
@keyframes veil{to{color:rgba(7,32,58,.9)}}
.contact .top{position:relative}
.cwrap{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,440px) minmax(0,480px);justify-content:space-between;align-items:start;gap:40px;padding:clamp(26px,6.5vh,76px) var(--pad) clamp(120px,17vh,170px)}
.ch{margin:0;font:700 clamp(52px,6.4vw,96px)/.92 var(--cond);letter-spacing:-.012em}
.lede{margin:16px 0 0;max-width:24em;font:400 clamp(16px,1.25vw,18px)/1.5 var(--body);color:#C7D6E6}
.person{margin:clamp(24px,4.4vh,40px) 0 0;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.ini{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(147,197,253,.6);background:rgba(4,14,26,.55);font:600 16px/1 var(--cond);letter-spacing:.1em;color:var(--lb)}
.who h2{margin:0;font:600 25px/1.1 var(--cond);letter-spacing:.005em}
.role{margin:3px 0 0;font:400 15px/1.4 var(--body);font-variant-ligatures:none;color:#B6C8DB}
.links{margin:2px 0 0;display:flex;flex-wrap:wrap;column-gap:22px}
.links a{display:inline-flex;align-items:center;min-height:44px;font:500 16px/1.2 var(--body);color:var(--paper);text-decoration:none;background:linear-gradient(var(--lb),var(--lb)) 0 calc(50% + 13px)/100% 1px no-repeat;transition:color .18s ease}
.where{margin:clamp(18px,3.4vh,30px) 0 0;padding-left:64px;font:400 14px/1.4 var(--body);letter-spacing:.02em;color:#A9BDD3}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;padding:clamp(20px,2.2vw,30px);background:rgba(4,13,24,.9);box-shadow:inset 0 0 0 1px rgba(147,197,253,.22),0 24px 60px -30px rgba(0,0,0,.8)}
.f{display:grid;gap:7px;min-width:0}
.f-wide{grid-column:1/-1}
.f label{font:600 13px/1.2 var(--cond);letter-spacing:.15em;text-transform:uppercase;color:#B6C8DB}
.f input,.f textarea{width:100%;min-height:46px;padding:11px 13px;border:0;border-radius:2px;background:#081a2c;box-shadow:inset 0 0 0 1px rgba(147,197,253,.3);font:400 16px/1.4 var(--body);color:var(--paper);transition:box-shadow .16s ease,background-color .16s ease;-webkit-appearance:none;appearance:none}
.f textarea{min-height:124px;resize:vertical}
.f input:hover,.f textarea:hover{box-shadow:inset 0 0 0 1px rgba(147,197,253,.6)}
.f input:focus,.f textarea:focus{outline:2px solid var(--lb);outline-offset:1px;background:#0a2036}
.send{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.send .btn{min-height:48px}
.note{margin:0;font:400 13px/1.45 var(--body);color:#A9BDD3}
.legal{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(14px,2.6vh,26px);margin:0;font:400 13px/1.3 var(--body);letter-spacing:.02em;color:#9DB1C7}
.btn-back::before{content:"";width:7px;height:7px;margin:0 12px 0 2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.links a:hover{color:var(--lb)}.btn-back:hover::before{transform:translateX(-3px) rotate(45deg)}}
/* two columns: the words stand in the lower sky left of the tower, where the dusk is brightest. A veil of navy holds the sky back behind them, so every
   line keeps its contrast on any part of the scene. It is a blurred rectangle (the shadow of a box parked off-screen to the left): its top edge follows
   the scene (24vw above the foot of the page, under the Southern Cross), its bottom edge follows the last line of words, so it is only there where words
   meet bright sky, and it deepens with the night. --it mirrors the header and the padding above the words, --cb the padding below them, --vh the page's
   minimum height; --s is the softness of the edge. The query is the exact opposite of the one-column one below, so no window width falls between them */
@media not all and (max-width:1039px){
  .contact:not(.nf) .ch{white-space:nowrap}
  .intro{position:relative}
  .intro::before{content:"";position:absolute;z-index:-1;pointer-events:none;--s:clamp(30px,2.8vw,46px);--vh:100vh;--it:calc(clamp(16px,3.4vh,34px) + clamp(52px,4.2vw,62px) + clamp(26px,6.5vh,76px));--cb:clamp(120px,17vh,170px);left:-4000px;right:calc(2000px - 2*var(--s));bottom:calc(-2*var(--s) - 4px);height:max(0px,24vw + 2*var(--s) + 4px - max(var(--vh) - var(--it) - 100%,var(--cb)));color:rgba(8,45,74,.9);box-shadow:2000px 0 calc(2*var(--s)) currentColor;animation:veil 48s steps(48,end) 5s both}
  @supports (height:100dvh){.intro::before{--vh:100dvh}}
}
/* two columns need room: below that the Southern Cross would stand among the words */
@media (max-width:1279px){
  .contact:not(.nf) .sx{display:none}
}
/* one column: the surface becomes a panorama across the top of the page, under the header, and the words follow it */
@media (max-width:1039px){
  .contact:not(.nf) .surface{top:0;bottom:auto;height:clamp(236px,44vw,372px)}
  .contact:not(.nf) .surface::after{background:linear-gradient(180deg,#030915 0,rgba(3,9,21,0) 26%,rgba(3,9,21,0) 84%,#030915 100%)}
  .cwrap{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:calc(clamp(236px,44vw,372px) - 62px);padding-bottom:84px}
  .where{padding-left:0}
  .nf .cwrap{padding-top:clamp(26px,6.5vh,76px);padding-bottom:clamp(330px,52vw,420px)}
  .nf .surface{height:max(520px,min(86vh,80vw))}
}
@media (max-width:699px){
  .contact .nav{position:static;display:flex;gap:6px}
  .contact .btn{min-height:44px;padding:0 13px;font-size:14px;letter-spacing:.12em}
  .contact .btn-ghost{padding:0 8px;background:none;box-shadow:none}
  .contact .btn-solid::after{display:none}
  .contact .logo img{width:160px}
  .contact .top{gap:8px}
  .btn-back::before{margin-right:8px}
  .form{grid-template-columns:1fr;padding:18px}
  .send{grid-template-columns:1fr}
  .nf .cwrap{padding-bottom:350px}
}

@media (max-width:379px){.contact .btn{letter-spacing:.06em;padding:0 10px}.contact .btn-ghost{padding:0 6px}}
@media (max-width:339px){.contact .btn{padding:0 9px}.contact .btn-ghost{padding:0 3px}.contact .btn-back::before{display:none}.contact .logo img{width:160px}}

/* ---------- not found: the same surface, the cage at the bank ---------- */
.nf .cwrap{display:block;max-width:660px}
.nf .back{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.nf .back .btn{pointer-events:auto}