/* Cealius liquid edition: every page of cealius.ba and cealius.com.
   References: DAQ Consulting (liquid backdrop, thin + bold type, mono labels, system diagram, page index)
   and Axiom Power (grayscale hardware photography, two-tone headlines, bento, accent block, spec tables).
   Dark and light schemes follow the device; the nav switch overrides it (html[data-theme], remembered).
   Every size is rem; on desktops the root size follows the viewport so the layout is the same on every screen. */

/* ---------- fonts (self-hosted, SIL Open Font License 1.1): Inter variable, IBM Plex Mono ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/inter-latin.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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/wow/fonts/plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/wow/fonts/plex-mono-400-latin.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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/wow/fonts/plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/wow/fonts/plex-mono-500-latin.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}

/* ---------- tokens ---------- */
:root,.dk{
  --bg:#050506;--bg-rgb:5,5,6;--fg-rgb:255,255,255;
  --panel:#0f1013;--card:#0b0c0e;--card2:#131417;--diag:#08090a;--node:#0d0e10;--node-on:#141518;--field:#0a0b0d;--case:rgba(14,15,18,.72);
  --ink:#f3f4f6;--ink2:#a4a8b0;--ink3:#6f747e;--sub:#8d9199;
  --acc:#d6b98c;--acc2:#d6b98c;--acc-ink:#15120d;--on-accent:#0b0b0c;
  --btn-bg:#fff;--btn-ink:#000;--btn-hover:#e9e9e6;
  --photo:grayscale(1) contrast(1.12) brightness(.72);--photo-on:grayscale(1) contrast(1.15) brightness(.88);
  --giant1:#1f2126;--giant2:#0a0a0c;--grid:.035;--shadow:rgba(0,0,0,.5);--err:#f0a896;--err-line:#e08e79;
  --ic:rgba(214,185,140,.08);--ic-line:rgba(214,185,140,.24);
  /* names used by the order form and the dialog rules */
  --text:var(--ink);--body:var(--ink2);--muted:var(--ink3);--accent:var(--acc2);--btn:var(--btn-bg);
  --line:rgba(var(--fg-rgb),.08);--line2:rgba(var(--fg-rgb),.14);--line3:rgba(var(--fg-rgb),.26);--ghost:rgba(var(--fg-rgb),.04);
  color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
  --bg:#f2f2ef;--bg-rgb:242,242,239;--fg-rgb:10,11,13;
  --panel:#fff;--card:#fff;--card2:#f7f7f4;--diag:#fafaf8;--node:#fff;--node-on:#f1f1ee;--field:#fff;--case:rgba(255,255,255,.76);
  --ink:#0b0c0e;--ink2:#4b5059;--ink3:#80858e;--sub:#8b8f96;
  --acc2:#9c7a45;--on-accent:#fff;
  --btn-bg:#0b0c0e;--btn-ink:#fff;--btn-hover:#000;
  --photo:grayscale(1) contrast(1.08) brightness(.86);--photo-on:grayscale(1) contrast(1.1) brightness(.98);
  --giant1:#e2e2de;--giant2:#f2f2ef;--grid:.05;--shadow:rgba(40,30,15,.1);--err:#b3402b;--err-line:#c9553d;
  --ic:rgba(156,122,69,.08);--ic-line:rgba(156,122,69,.26);
  color-scheme:light}}
:root[data-theme=light]{
  --bg:#f2f2ef;--bg-rgb:242,242,239;--fg-rgb:10,11,13;
  --panel:#fff;--card:#fff;--card2:#f7f7f4;--diag:#fafaf8;--node:#fff;--node-on:#f1f1ee;--field:#fff;--case:rgba(255,255,255,.76);
  --ink:#0b0c0e;--ink2:#4b5059;--ink3:#80858e;--sub:#8b8f96;
  --acc2:#9c7a45;--on-accent:#fff;
  --btn-bg:#0b0c0e;--btn-ink:#fff;--btn-hover:#000;
  --photo:grayscale(1) contrast(1.08) brightness(.86);--photo-on:grayscale(1) contrast(1.1) brightness(.98);
  --giant1:#e2e2de;--giant2:#f2f2ef;--grid:.05;--shadow:rgba(40,30,15,.1);--err:#b3402b;--err-line:#c9553d;
  --ic:rgba(156,122,69,.08);--ic-line:rgba(156,122,69,.26);
  color-scheme:light}
:root{--gut:2rem;--max:90rem;--r:.7rem;--sans:'Inter',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;--ease:cubic-bezier(.2,.7,.1,1)}
.dk{color:var(--ink)}

/* ---------- base ---------- */
html{font-size:16px;background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (min-width:1081px){html{font-size:clamp(14px,min(1.1111vw,2vh),40px)}}
@media (min-width:1081px) and (min-aspect-ratio:2/1){html{font-size:clamp(14px,2.2vh,40px)}:root{--max:88rem}}
@media (max-width:760px){:root{--gut:1.25rem}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .6s,color .6s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:var(--bg);padding:.6rem .9rem}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.arw{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .4s var(--ease)}
.ne{width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:1.3;flex:none;transition:transform .4s var(--ease)}
a:hover>.ne,a:hover .foot .ne,a:hover .more .ne{transform:translate(2px,-2px)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.sq{display:inline-block;width:.38rem;height:.38rem;background:var(--acc2);margin-right:.6rem;vertical-align:.12em;flex:none}
.lbl{color:var(--ink3);display:flex;align-items:center;gap:1rem}
.lbl i:not(.sq){display:block;height:1px;width:17rem;max-width:30vw;background:linear-gradient(90deg,rgba(var(--fg-rgb),.16),transparent)}
.sqlbl{gap:0}
main,footer{position:relative;z-index:2}
.solid,.sheet{background:var(--bg);position:relative;transition:background .6s}
.solid::before,.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(var(--fg-rgb),calc(var(--grid)*.8)) 1px,transparent 1px);background-size:calc((100vw - 2*var(--gut))/12) 100%;background-position:var(--gut) 0}
.solid>*,.sheet>*{position:relative}

/* ---------- backdrop: liquid canvas + grid lines ---------- */
#liquid{position:fixed;inset:0;width:100vw;height:100lvh;z-index:0;display:block;opacity:0;transition:opacity 1.6s var(--ease)}
html.ready #liquid{opacity:1}
.gridlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(90deg,rgba(var(--fg-rgb),var(--grid)) 1px,transparent 1px),linear-gradient(rgba(var(--fg-rgb),calc(var(--grid)*.85)) 1px,transparent 1px);
  background-size:calc((100vw - 2*var(--gut))/12) 100%,100% 25vh;background-position:var(--gut) 0,0 0;
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.5));mask:linear-gradient(#000,rgba(0,0,0,.5))}

/* ---------- loader (first page of a visit) ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .9s var(--ease),visibility 0s .9s}
.loader img{width:4.2rem;opacity:0;filter:grayscale(1);animation:ldIn 1.1s var(--ease) .1s forwards}
.loader i{position:absolute;left:50%;top:calc(50% + 3.4rem);width:7rem;height:1px;margin-left:-3.5rem;background:rgba(var(--fg-rgb),.12);overflow:hidden}
.loader i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:ldBar 1s var(--ease) .25s forwards}
@keyframes ldIn{from{opacity:0;transform:scale(.92)}to{opacity:.95;transform:none}}
@keyframes ldBar{to{transform:none}}
html.ready .loader,html.seen .loader{opacity:0;visibility:hidden}
html.seen .loader{transition:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:4.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);transition:background .5s,border-color .5s,height .5s;border-bottom:1px solid transparent;color:var(--ink)}
.nav.scrolled{background:rgba(var(--bg-rgb),.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(var(--fg-rgb),.07);height:4rem}
.logo{position:relative;display:block;justify-self:start}
.logo img{height:2.35rem;width:auto}
.logo .ink,.f-brand .ink{display:none}
.links{display:flex;align-items:center;gap:2.1rem;font-size:.9rem;color:rgba(var(--fg-rgb),.78)}
.links>a,.dd-t{transition:color .25s;padding:.6rem 0}
.links>a:hover,.links>a[aria-current],.dd-t:hover,.dd-t.on,.dd.open .dd-t{color:var(--ink)}
.links>a[aria-current]{box-shadow:inset 0 -1px 0 var(--acc2)}
.dd{position:relative}
.dd-t{background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:.45rem}
.dd-t svg{width:.55rem;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7;transition:transform .3s var(--ease)}
.dd.open .dd-t svg{transform:rotate(180deg)}
.dd-m{position:absolute;left:-1.25rem;top:calc(100% + .9rem);width:21rem;background:rgba(var(--bg-rgb),.96);border:1px solid rgba(var(--fg-rgb),.1);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:.3s var(--ease);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dd.open .dd-m{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.dd:hover .dd-m,.dd:focus-within .dd-m{opacity:1;visibility:visible;transform:none}}
.dd-m a{display:block;padding:.8rem 1rem;transition:background .2s}
.dd-m a:hover,.dd-m a[aria-current]{background:rgba(var(--fg-rgb),.05)}
.dd-m b{display:block;font-weight:500;color:var(--ink);font-size:.92rem}
.dd-m span{display:block;color:var(--ink3);font-size:.8rem;margin-top:.15rem}
.nav-r{justify-self:end;display:flex;align-items:center;gap:1.3rem}
.lang{color:var(--ink3);font-size:.66rem;transition:color .25s}.lang:hover{color:var(--ink)}
.theme{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.18);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .3s}
.theme:hover{border-color:rgba(var(--fg-rgb),.5)}
.theme svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.theme .sun{display:none}
.btn-w{display:inline-flex;align-items:center;gap:.75rem;background:var(--btn-bg);color:var(--btn-ink);font-size:.9rem;font-weight:500;padding:.8rem 1.3rem;transition:background .3s,color .3s;white-space:nowrap}
.btn-w:hover{background:var(--acc);color:#0b0b0c}
.burger{display:none;background:none;border:0;width:2.4rem;height:2.4rem;position:relative;cursor:pointer}
.burger i{position:absolute;left:.45rem;right:.45rem;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.burger i:first-child{top:.95rem}.burger i:last-child{top:1.4rem}
.burger.open i:first-child{transform:translateY(.22rem) rotate(45deg)}.burger.open i:last-child{transform:translateY(-.22rem) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:45;background:rgba(var(--bg-rgb),.98);padding:6rem var(--gut) 2rem;display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;color:var(--ink)}
.mnav.open{opacity:1;visibility:visible}
.mnav .f-lbl{margin-bottom:.4rem}
.mnav>a:not(.btn){font-size:2rem;font-weight:300;letter-spacing:-.03em;padding:.6rem 0;border-bottom:1px solid rgba(var(--fg-rgb),.07)}
.mnav>a.sm{font-size:1.35rem;padding:.5rem 0 .5rem 1rem}
.mnav>.btn{margin-top:1.8rem;height:3.25rem}
.mnav .meta{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between;color:var(--ink3);font-size:.62rem}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .logo .plat,:root:not([data-theme=dark]) .f-brand .plat{display:none}:root:not([data-theme=dark]) .logo .ink,:root:not([data-theme=dark]) .f-brand .ink{display:block}
  :root:not([data-theme=dark]) .theme .sun{display:block}:root:not([data-theme=dark]) .theme .moon{display:none}}
:root[data-theme=light] .logo .plat,:root[data-theme=light] .f-brand .plat{display:none}
:root[data-theme=light] .logo .ink,:root[data-theme=light] .f-brand .ink{display:block}
:root[data-theme=light] .theme .sun{display:block}:root[data-theme=light] .theme .moon{display:none}
:root[data-theme=dark] .theme .sun{display:none}:root[data-theme=dark] .theme .moon{display:block}

/* ---------- type ---------- */
.h-xl{font-weight:200;font-size:7.4rem;line-height:1.06;letter-spacing:-.045em;text-transform:uppercase}
.h-xl .thin,.h-xl .bold,.h-cta .thin,.h-cta .bold{display:block}
.h-xl .bold{font-weight:700;letter-spacing:-.05em}
.h-xl.sm{font-size:5.4rem}
.h-l{font-weight:300;font-size:4.6rem;line-height:1;letter-spacing:-.04em}
.h-2t{font-weight:400;font-size:4.2rem;line-height:1.1;letter-spacing:-.035em}
.h-2t span{color:var(--sub)}
.h-2t.sm{font-size:3.3rem}
.lead2{color:var(--ink2);font-size:1.02rem;max-width:26rem;margin-top:1.6rem}
.lead{font-size:1.04rem;line-height:1.65;color:var(--ink2);max-width:36em}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.1rem;padding:0 1.4rem;font:500 .92rem/1 var(--sans);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.btn b{font:inherit}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn.primary:hover{background:var(--acc);color:#0b0b0c}
.btn.ghost{border-color:rgba(var(--fg-rgb),.3);color:var(--ink);background:rgba(var(--bg-rgb),.2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn:hover .arw{transform:translateX(3px)}
.btn.sm{height:2.5rem;padding:0 1rem;font-size:.84rem}
.tlink{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.tlink:hover .arw{transform:translateX(3px)}
.btn-o{display:inline-flex;align-items:center;gap:1.4rem;border:1px solid rgba(var(--fg-rgb),.34);padding:1.15rem 2rem;color:var(--ink);transition:.35s var(--ease);background:rgba(var(--bg-rgb),.2)}
.btn-o:hover{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-t{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink2);padding:1.15rem .4rem;transition:color .3s}
.btn-t:hover{color:var(--ink)}
.btn-l{display:inline-flex;align-items:center;gap:1rem;background:#f1f1ee;color:#0a0a0b;font-weight:500;font-size:.92rem;padding:.55rem .6rem .55rem 1.1rem;border-radius:.35rem;transition:background .3s}
.btn-l i{display:grid;place-items:center;width:1.7rem;height:1.7rem;background:#0a0a0b;border-radius:.25rem}
.btn-l i svg{width:.72rem;fill:none;stroke:#fff;stroke-width:1.4}
.btn-l:hover{background:var(--acc)}

/* ---------- home: hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;padding:7rem 0 5rem}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 25% 55%,rgba(var(--bg-rgb),.62),transparent 70%),linear-gradient(transparent 70%,rgba(var(--bg-rgb),.6))}
.hero>.wrap{position:relative}
.hero .h-xl{margin-top:4vh}
.ln{display:block;overflow:hidden;padding:.1em 0 .08em;margin:-.1em 0 -.08em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
.ln+.ln>span{transition-delay:.12s}
html.ready .ln>span{transform:none}
.ln2{opacity:0;transform:translateY(1rem);transition:opacity 1s var(--ease) .55s,transform 1s var(--ease) .55s}
html.ready .ln2{opacity:1;transform:none}
.hero .lead{color:rgba(var(--fg-rgb),.72);line-height:1.75;max-width:40rem;margin-top:3.2rem;font-size:.8rem}
.hero .lead span{display:block}
html.js [data-fit] .fl{width:max-content;max-width:none;white-space:nowrap}
.hero-cta{display:flex;gap:1.2rem;align-items:center;margin-top:2.6rem}
/* desktop: headline in the middle, lead and buttons sit at the foot of the screen, level with the case-study card */
@media (min-width:1101px){.hero{align-items:stretch;padding-bottom:2rem}.hero>.wrap{display:flex;flex-direction:column}.hero .h-xl{margin-top:auto}.hero .lead{margin-top:auto}}
.hero>.case-card{position:absolute;right:var(--gut);bottom:2rem;width:24rem;display:grid;grid-template-columns:1fr 5.2rem;grid-template-rows:auto 1fr;gap:.55rem 1.1rem;padding:1rem 1rem 1rem 1.2rem;background:var(--case);border:1px solid rgba(var(--fg-rgb),.1);border-radius:.6rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.case-card:hover{border-color:rgba(var(--fg-rgb),.28)}
.case-card .mono{color:var(--ink2);font-size:.62rem;grid-column:1}
.case-card b{font-weight:500;font-size:.88rem;line-height:1.35;grid-column:1}
.case-card .thumb{grid-column:2;grid-row:1/3;border-radius:.35rem;background:var(--img) center/cover;filter:grayscale(1) contrast(1.1) brightness(.9)}
.hero>.scroll-hint{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);color:var(--ink3);font-size:.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.scroll-hint i{width:1px;height:2.6rem;background:linear-gradient(var(--ink2),transparent);animation:hint 2.2s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- home: manifesto ---------- */
.manifesto{height:230vh;position:relative}
.manifesto::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.72) 22%,rgba(var(--bg-rgb),.72) 78%,var(--bg))}
.manifesto .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.m-top{display:flex;justify-content:space-between;align-items:center;color:var(--ink3);margin-bottom:3rem}
.m-top .lbl i{width:18rem}
.ticks{display:flex;gap:2rem}
.ticks em{font-style:normal;display:flex;align-items:center;gap:.9rem;transition:color .5s}
.ticks em::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.6}
.ticks em.on{color:var(--ink)}
.m-text{font-weight:200;font-size:4.35rem;line-height:1.16;letter-spacing:-.03em;text-transform:uppercase;max-width:84rem}
.m-text .w{color:rgba(var(--fg-rgb),.2);transition:color .6s}
.m-text .w.on{color:rgba(var(--fg-rgb),.62)}
.m-text .w.k{font-weight:700;letter-spacing:-.045em}
.m-text .w.k.on{color:var(--ink)}

/* ---------- home: architecture ---------- */
.arch{padding:9rem 0 8rem;border-top:1px solid rgba(var(--fg-rgb),.06)}
.arch .h-l{margin-top:1.4rem}
.arch-grid{display:grid;grid-template-columns:19rem 1fr;gap:4rem;margin-top:3.5rem;align-items:stretch}
.stages{list-style:none;align-self:end;border-left:1px solid rgba(var(--fg-rgb),.1);padding-bottom:1rem}
.stages li{position:relative;padding:.55rem 0 .55rem 1.5rem;cursor:pointer}
.stages li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--ink);transform:scaleY(0);transition:transform .5s var(--ease)}
.stages li.on::before{transform:none}
.stages b{font-weight:500;font-size:1.05rem;color:var(--ink3);transition:color .4s}
.stages li.on b{color:var(--ink)}
.stages p{color:var(--ink2);font-size:.9rem;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.stages li.on p{max-height:6rem;opacity:1;margin-top:.35rem}
.diagram{position:relative;border:1px solid rgba(var(--fg-rgb),.1);background:radial-gradient(ellipse at 50% 40%,rgba(var(--fg-rgb),.035),transparent 60%),var(--diag);min-height:36rem;padding:2rem 2rem 3.5rem;display:grid;grid-template-columns:1fr 1.25fr 1fr;grid-template-rows:auto 1fr;column-gap:4.5rem}
.d-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.8rem}
.d-head b{font-weight:400;font-size:1.45rem;letter-spacing:-.02em}
.d-head b span{color:var(--ink3)}
.legend{display:flex;gap:1rem;align-items:center;color:var(--ink2);font-size:.62rem}
.legend i{display:inline-block;width:.45rem;height:.45rem;background:var(--ink3)}
.legend i.b{background:var(--ink2)}.legend i.c{background:var(--acc2)}
.d-cap{color:var(--ink3);font-size:.6rem;text-align:center}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:rgba(var(--fg-rgb),.16);stroke-width:1}
.wires path.flow{stroke:rgba(var(--fg-rgb),.75);stroke-dasharray:3 38;animation:flow 2.4s linear infinite;opacity:0;transition:opacity .5s}
.wires path.flow.on{opacity:1}
.wires path.flow.acc{stroke:var(--acc2)}
@keyframes flow{to{stroke-dashoffset:-41}}
.col{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;position:relative;z-index:1}
.col.c2{border:1px dashed rgba(var(--fg-rgb),.16);padding:1.4rem;background:rgba(var(--fg-rgb),.012);gap:1.3rem}
.col.c2 .d-cap{margin-bottom:.2rem}
.node{border:1px solid rgba(var(--fg-rgb),.16);background:var(--node);padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:border-color .4s,background .4s,box-shadow .4s;cursor:default}
.node b{font-weight:400;font-size:.92rem;color:rgba(var(--fg-rgb),.8);transition:color .4s}
.node .mono{font-size:.56rem;color:var(--ink3);border:1px solid rgba(var(--fg-rgb),.1);padding:.18rem .4rem;white-space:nowrap}
.node.on{border-color:rgba(var(--fg-rgb),.55);background:var(--node-on);box-shadow:0 0 0 1px rgba(var(--fg-rgb),.06),0 0 2.5rem rgba(var(--fg-rgb),.05)}
.node.on b{color:var(--ink)}
.node.acc.on{border-color:var(--acc2)}
.inspect{position:absolute;left:2rem;bottom:1.4rem;right:2rem;color:var(--ink2);font-size:.62rem;line-height:1.6;min-height:1.2rem}

/* ---------- home: services track ---------- */
.services{position:relative}
.svc-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:3rem}
.svc-head{margin-bottom:2.6rem}
.svc-head .lbl{margin-bottom:1.2rem}
.track{display:flex;gap:2.5rem;padding:0 var(--gut);will-change:transform}
.card-s{flex:0 0 min(58rem,74vw);height:min(27rem,46vh);border:1px solid rgba(var(--fg-rgb),.1);background:var(--card);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;transition:border-color .5s,background .6s}
.card-s.on{border-color:rgba(var(--fg-rgb),.34)}
.c-txt{padding:2.2rem 2.4rem;display:flex;flex-direction:column;position:relative;z-index:1}
.tags{color:var(--ink3);font-size:.6rem;line-height:1.7}
.card-s h3{margin-top:auto;font-weight:300;font-size:2.9rem;letter-spacing:-.035em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.4);transition:color .6s,-webkit-text-stroke-color .6s}
.card-s.on h3{color:var(--ink);-webkit-text-stroke-color:transparent}
.c-p{display:block;color:var(--ink2);font-size:.95rem;margin-top:1rem;max-width:22rem;line-height:1.55}
.more{margin-top:1.8rem;color:var(--ink);display:inline-flex;gap:.7rem;align-items:center;font-size:.62rem}
.c-img{background:var(--img) center/cover;filter:var(--photo);position:relative;transition:filter .8s,transform 1.2s var(--ease);transform:scale(1.04)}
.c-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--card),rgba(var(--bg-rgb),.12) 40%,transparent)}
.card-s.on .c-img{filter:var(--photo-on);transform:none}
.svc-bar{margin-top:2.6rem;display:flex;justify-content:space-between;position:relative;padding-top:1.1rem;color:var(--ink3);font-size:.6rem}
.svc-bar i{position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:rgba(var(--fg-rgb),.1)}
.svc-bar i b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.svc-bar span{transition:color .4s}
.svc-bar span.on{color:var(--ink)}

/* ---------- home: hosting (the photograph is a dark window in both schemes) ---------- */
.hosting{position:relative;background:var(--bg);padding-bottom:8rem;overflow:hidden;transition:background .6s}
.h-win{position:relative;overflow:hidden;background:#050506}
.h-photo{position:absolute;left:0;right:0;top:-10vh;height:120vh;background:var(--img) 60% 50%/cover;filter:grayscale(1) contrast(1.15) brightness(.78)}
.h-win::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050506 8%,rgba(5,5,6,.55) 45%,rgba(5,5,6,.15)),linear-gradient(transparent 55%,rgba(5,5,6,.9))}
.h-copy{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:5rem;padding-bottom:7rem;z-index:1}
.h-copy .h-2t{margin-top:1.6rem;font-size:5.6rem;line-height:1.06}
.h-btns{display:flex;gap:1.4rem;align-items:center;margin-top:2.4rem}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(15rem,auto);gap:.9rem;margin-top:-6rem;z-index:2}
.b-card{background:var(--panel);border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.05);transition:background .6s,border-color .4s}
a.b-card:hover{border-color:rgba(var(--fg-rgb),.2)}
.b-card.big{grid-column:span 2;grid-row:span 2}
.b-card.photo{grid-column:span 2;grid-row:span 2;background:var(--img) center/cover;background-color:#222;background-blend-mode:luminosity;border:0;color:#f3f4f6}
.b-card.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(10,10,12,.92))}
.b-card.photo>*{position:relative}
.b-card.photo>.tr{position:absolute}
.b-card.photo .b-txt{color:#a4a8b0}.b-card.photo .b-txt b{color:#fff}.b-card.photo .tr,.b-card.photo .foot{color:#a4a8b0}
.num{display:flex;align-items:flex-end;gap:1rem;margin-top:auto;flex-wrap:wrap}
.num b{font-weight:300;font-size:7.5rem;line-height:.8;letter-spacing:-.06em}
.num span{color:var(--ink2);font-size:1.4rem;line-height:1.1;font-weight:300;letter-spacing:-.02em}
.b-txt{color:var(--ink2);font-size:.9rem;line-height:1.5;margin-top:auto;max-width:24rem}
.b-card.big .b-txt{margin-top:2.2rem}
.b-card.big .num{padding-top:1.6rem}
.b-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.b-card.photo::after{content:"";position:absolute;inset:0 0 auto;height:6rem;background:linear-gradient(rgba(10,10,12,.7),transparent)}
.b-card.photo>.tr{z-index:1;color:#d0d3d8!important}
.b-txt b{display:block;color:var(--ink);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:.45rem}
.tr{position:absolute;right:1.6rem;top:1.7rem;color:var(--ink3);font-size:.6rem;text-align:right;max-width:60%}
.b-card .ic,.p-card .ic{width:2.6rem;height:2.6rem;padding:.6rem;border:1px solid rgba(var(--fg-rgb),.1);border-radius:.45rem;fill:none;stroke:var(--acc2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.foot{margin-top:1.4rem;color:var(--ink2);font-size:.6rem;display:flex;gap:.6rem;align-items:center}
.foot em{font-style:normal;opacity:.5}

/* ---------- home: statement on the accent colour ---------- */
.statement{background:var(--bg);padding:2rem .75rem;position:relative;z-index:2;transition:background .6s}
.st-box{background:var(--acc);color:var(--acc-ink);border-radius:1rem;padding:7rem 2.6rem 3.4rem;min-height:66vh;display:flex;flex-direction:column}
.lbl.dark{color:rgba(21,18,13,.6)}
.lbl.dark .sq{background:var(--acc-ink)}
.st-text{font-weight:400;font-size:4.5rem;line-height:1.08;letter-spacing:-.03em;margin-top:auto;max-width:82rem}
.st-text .w{color:rgba(21,18,13,.22);transition:color .5s}
.st-text .w.on{color:var(--acc-ink)}
.st-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:5rem;padding-top:1.4rem;border-top:1px solid rgba(21,18,13,.2);color:rgba(21,18,13,.62);font-size:.62rem}
.st-facts b{display:block;color:var(--acc-ink);font-weight:500;margin-bottom:.35rem}

/* ---------- home: origin of the name ---------- */
.origin{padding:9rem 0 8rem}
.or-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem;align-items:center}
.swap{display:flex;font-weight:200;font-size:9.5rem;line-height:.9;letter-spacing:-.05em;margin-top:2.2rem;user-select:none}
.swap span{display:inline-block;will-change:transform}
.swap .x{font-weight:600;color:var(--acc2);letter-spacing:-.05em}
.or-txt{font-size:1.5rem;line-height:1.4;font-weight:300;letter-spacing:-.015em;max-width:34rem;margin-top:2.6rem;color:var(--ink)}
.or-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1.2rem 2.6rem;margin-top:3rem;padding-top:1.3rem;border-top:1px solid rgba(var(--fg-rgb),.1);color:var(--ink3);font-size:.6rem;line-height:1.7}
.or-meta b{display:block;color:var(--ink);font-weight:500}
.or-meta span:last-child{grid-column:1/-1;max-width:34rem}
.or-map{position:relative;border:1px solid rgba(var(--fg-rgb),.1);background:var(--diag);aspect-ratio:1;transition:background .6s}
.or-map canvas{position:absolute;inset:0;width:100%;height:100%}
.or-map figcaption{position:absolute;left:1.2rem;right:1.2rem;bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink3);font-size:.56rem}
.or-map .sc{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.or-map .sc i{display:block;height:.35rem;width:var(--sc,4rem);border:1px solid var(--ink3);border-top:0}

/* ---------- home: references ---------- */
.refs{padding:9rem 0 6rem}
.refs-grid{display:grid;grid-template-columns:26rem 1fr;gap:5rem}
.refs-l{position:sticky;top:7rem;align-self:start}
.refs-l .h-2t{margin-top:1.6rem}
.r-list{list-style:none;margin-top:3.5rem;border-top:1px solid rgba(var(--fg-rgb),.1);max-width:21rem}
.r-list li{padding:.85rem 0;border-bottom:1px solid rgba(var(--fg-rgb),.1);color:var(--ink3);font-size:.64rem;display:flex;align-items:center;transition:color .4s}
.r-list li::before{content:"";height:.38rem;background:var(--acc2);margin-right:0;transform:scale(0);width:0;transition:.4s var(--ease)}
.r-list li.on{color:var(--ink)}
.r-list li.on::before{transform:none;width:.38rem;margin-right:.7rem}
.refs-l .all{margin-top:1.4rem;padding-left:0}
.refs-r{display:flex;flex-direction:column;gap:1rem}
.r-card{position:relative;border-radius:.8rem;background:var(--panel);border:1px solid rgba(var(--fg-rgb),.06);padding:2rem;display:flex;flex-direction:column;overflow:hidden;min-height:31rem;transition:border-color .4s,background .6s}
.r-card:hover{border-color:rgba(var(--fg-rgb),.2)}
.r-shot{display:block;border-radius:.45rem;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.1);aspect-ratio:16/8.4;background:rgba(var(--fg-rgb),.05);margin-bottom:2rem;margin-top:2.2rem}
.r-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.95)}
.r-card:hover .r-shot img{transform:scale(1.025);filter:none}
.r-card h3{font-weight:500;font-size:1.55rem;letter-spacing:-.02em;line-height:1.2}
.r-card p{color:var(--ink2);font-size:.92rem;margin-top:.6rem;max-width:36rem}
.r-card.case{background:var(--img) center/cover;background-color:#1a1b1e;background-blend-mode:luminosity;justify-content:flex-end;min-height:26rem;border:0;color:#f3f4f6}
.r-card.case::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,12,.35),rgba(10,10,12,.93) 75%)}
.r-card.case>*{position:relative}
.r-card.case>.tr{position:absolute}
.r-card.case h3{color:#fff}.r-card.case p,.r-card.case .foot,.r-card.case .tr{color:#a4a8b0}

/* ---------- home: process ---------- */
.process{padding:8rem 0 10rem;border-top:1px solid rgba(var(--fg-rgb),.06)}
.pr-grid{display:grid;grid-template-columns:26rem 1fr;gap:5rem}
.pr-l .h-2t{margin-top:1.6rem}
.pr-cards{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(var(--fg-rgb),.1);border-radius:.8rem;overflow:hidden;background:var(--panel);transition:background .6s}
.p-card{padding:2rem;position:relative;min-height:17rem;display:flex;flex-direction:column;border-right:1px solid rgba(var(--fg-rgb),.1);border-bottom:1px solid rgba(var(--fg-rgb),.1)}
.p-card:nth-child(2n){border-right:0}.p-card:nth-child(n+3){border-bottom:0}
.p-card b{margin-top:auto;font-weight:500;font-size:1.2rem;letter-spacing:-.01em}
.p-card p{color:var(--ink2);font-size:.9rem;margin-top:.5rem;max-width:22rem}

/* ---------- closing invitation (every page) ---------- */
.cta{min-height:100svh;display:flex;align-items:center;padding:8rem 0;position:relative}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--bg),rgba(var(--bg-rgb),0) 22%)}
.cta-grid{display:grid;grid-template-columns:1fr 24rem;gap:4rem;align-items:center}
.h-cta{font-weight:300;font-size:6rem;line-height:1.08;letter-spacing:-.045em}
.h-cta .bold{font-weight:600;letter-spacing:-.05em}
.cta-r p{color:rgba(var(--fg-rgb),.8);font-size:1.02rem;line-height:1.55}
.btn-split{display:grid;grid-template-columns:1fr 4.6rem;border:1px solid rgba(var(--fg-rgb),.5);margin-top:2rem;height:4.6rem;transition:border-color .3s;background:rgba(var(--bg-rgb),.25)}
.btn-split span{display:flex;align-items:center;padding:0 1.6rem;font-weight:500;font-size:1.02rem}
.btn-split i{display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-ink);transition:background .3s,color .3s}
.btn-split i .ne{width:.9rem;height:.9rem}
.btn-split:hover{border-color:var(--ink)}
.btn-split:hover i{background:var(--acc);color:#0b0b0c}
.cta-r .mail{margin-top:1.4rem}
.cta-r .mail a{color:var(--ink2);font-size:.64rem}.cta-r .mail a:hover{color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{background:rgba(var(--bg-rgb),.92);border-top:1px solid rgba(var(--fg-rgb),.1);overflow:hidden;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.f-cols{display:grid;grid-template-columns:1fr .9fr 1.5fr 1fr}
.f-cols>div{padding:3rem 2rem 3rem 0;border-right:1px solid rgba(var(--fg-rgb),.1);display:flex;flex-direction:column;gap:1.05rem;align-items:flex-start}
.f-cols>div+div{padding-left:2rem}
.f-cols>div:last-child{border-right:0}
.f-lbl{color:var(--ink3);font-size:.6rem;margin-bottom:.6rem}
.f-cols a.mono{color:rgba(var(--fg-rgb),.78);font-size:.66rem;transition:color .3s}
.f-cols a.mono:hover{color:var(--ink)}
.f-brand img{width:9rem;height:auto}
.f-claim{font-size:1.45rem;letter-spacing:-.02em;font-weight:300;margin-top:.4rem}
.f-claim b{font-weight:600}
.f-txt{color:var(--ink2);font-size:.9rem;max-width:25rem}
.cp{color:var(--ink3);font-size:.6rem;margin-top:auto;line-height:1.7}
.giant{font-weight:600;font-size:25vw;line-height:.74;letter-spacing:-.06em;text-align:center;color:transparent;background:linear-gradient(var(--giant1),var(--giant2) 85%);-webkit-background-clip:text;background-clip:text;margin-top:1rem;margin-bottom:-4.2vw;user-select:none}

/* ---------- sub-page hero ---------- */
.sub-hero{position:relative;min-height:84svh;display:flex;flex-direction:column;justify-content:flex-end;padding:9rem 0 0}
.sub-hero.short{min-height:66svh}
.sub-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--bg-rgb),.82),rgba(var(--bg-rgb),.45) 60%,rgba(var(--bg-rgb),.3)),linear-gradient(rgba(var(--bg-rgb),.2),rgba(var(--bg-rgb),0) 30%,rgba(var(--bg-rgb),.55) 80%,var(--bg))}
.sub-hero>.wrap{position:relative}
.sh-in{padding-bottom:4rem}
.sub-hero:has(.facts) .sh-in{padding-bottom:3rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;color:var(--ink3);font-size:.62rem;margin-bottom:2.6rem}
.crumbs a{color:var(--ink2)}.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.sub-hero .lbl{color:var(--ink2);margin-bottom:1.6rem}
.h-sub{font-weight:300;font-size:6rem;line-height:1.08;letter-spacing:-.045em;max-width:15em}
.h-sub .bold{font-weight:600;letter-spacing:-.05em}
.sub-hero.short .h-sub{font-size:5rem}
.sub-hero .lead{margin-top:2rem;max-width:38em;color:rgba(var(--fg-rgb),.76)}
.sub-hero .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(var(--fg-rgb),.14)}
.facts>div{display:flex;gap:.8rem;align-items:flex-start;padding:1.4rem 1.2rem 1.9rem 0}
.facts>div+div{padding-left:1.2rem;border-left:1px solid rgba(var(--fg-rgb),.08)}
.facts .i{color:var(--acc2);width:1.2rem;height:1.2rem;margin-top:.1rem}
.facts b{display:block;font:500 .92rem/1.3 var(--sans);color:var(--ink)}
.facts span span{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);line-height:1.6}
.js .rise{opacity:0;transform:translateY(1.4rem);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
html.ready .rise{opacity:1;transform:none}

/* ---------- sections ---------- */
.sheet{padding:7rem 0;border-top:1px solid rgba(var(--fg-rgb),.07)}
.sub-hero+.sheet{border-top:0;padding-top:6rem}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:end;margin-bottom:3.4rem}
.sec-head h2{margin-top:1.3rem;font-weight:300;font-size:3.6rem;line-height:1.02;letter-spacing:-.04em;max-width:14em}
.sec-head .lead,.sec-head .side{justify-self:end}
.sec-head .side{max-width:32em}.sec-head .side .tlink{margin-top:1.2rem}

/* feature cards: one bordered block with hairline cells (Axiom) */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(var(--fg-rgb),.1);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:background .6s}
.feat .card{padding:2rem;min-height:16rem;display:flex;flex-direction:column;border-right:1px solid rgba(var(--fg-rgb),.1);border-bottom:1px solid rgba(var(--fg-rgb),.1);margin:0 -1px -1px 0}
.card .ic{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid rgba(var(--fg-rgb),.1);border-radius:.45rem;color:var(--acc2)}
.card .ic .i{width:1.2rem;height:1.2rem}
.card h3{margin:auto 0 .5rem;padding-top:2rem;font-size:1.2rem;font-weight:500;letter-spacing:-.01em}
.card p{color:var(--ink2);font-size:.92rem;line-height:1.6;max-width:30em}
.card p a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(var(--fg-rgb),.3);text-underline-offset:3px}

/* phases */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(var(--fg-rgb),.2)}
.steps>div{padding:1.8rem 1.8rem 0 0}
.steps>div+div{padding-left:1.8rem;border-left:1px solid rgba(var(--fg-rgb),.1)}
.steps b{display:block;margin:1.2rem 0 .5rem;font-size:1.2rem;font-weight:500;letter-spacing:-.015em}
.steps p{font-size:.9rem;line-height:1.6;color:var(--ink2)}

/* offer strip */
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding:1.1rem 1.4rem;margin-bottom:1rem;border:1px solid rgba(var(--fg-rgb),.12);border-left:2px solid var(--acc2);background:var(--panel)}
.offer p{font-size:.92rem;color:var(--ink2)}.offer b{color:var(--ink);font-weight:500}

/* plans (Axiom panels) */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:2rem 1.8rem 1.8rem;border-radius:var(--r);background:var(--panel);border:1px solid rgba(var(--fg-rgb),.08);transition:background .6s,border-color .4s}
.plan:hover{border-color:rgba(var(--fg-rgb),.2)}
.plan.pop{border-color:var(--acc2);box-shadow:0 0 0 1px var(--acc2) inset}
.badge{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--on-accent);background:var(--acc2);padding:.35rem .55rem;white-space:nowrap}
.plan .badge{position:absolute;top:1.7rem;right:1.6rem}
.plan h3{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.plan .who{margin-top:.3rem;font-size:.84rem;color:var(--ink3);max-width:20em}
.plan .price{margin:2.2rem 0 .3rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.plan .price b{font-weight:300;font-size:3.6rem;line-height:1;letter-spacing:-.05em;color:var(--ink)}
.plan .price span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.plan .pm{font-size:.8rem;color:var(--ink3)}
.plan ul{list-style:none;margin:1.6rem 0 1.8rem;padding-top:1.3rem;border-top:1px solid rgba(var(--fg-rgb),.1);display:grid;gap:.6rem}
.plan li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--ink2)}
.plan li .i{width:1rem;height:1rem;color:var(--acc2);margin-top:.18rem}
.plan .btn{margin-top:auto;width:100%;justify-content:space-between}
.fine{margin-top:1.6rem;font-size:.84rem;line-height:1.7;color:var(--ink3);max-width:62em}
.fine a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sec-links{display:flex;flex-wrap:wrap;gap:.9rem 2rem;margin-top:1.8rem}

/* spec table (Axiom) */
.tbl{overflow-x:auto;border:1px solid rgba(var(--fg-rgb),.1);border-radius:var(--r);background:var(--panel);transition:background .6s}
.cmp{width:100%;border-collapse:collapse;min-width:40rem;font-size:.95rem}
.cmp th,.cmp td{padding:1.1rem 1.6rem;text-align:left;border-bottom:1px solid rgba(var(--fg-rgb),.08)}
.cmp thead th{font-weight:500;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);padding-top:1.6rem;padding-bottom:1.6rem;white-space:nowrap}
.cmp thead .badge{margin-left:.7rem;vertical-align:middle}
.cmp tbody th{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink3)}
.cmp td{color:var(--ink)}
.cmp td b{font-weight:300;font-size:1.5rem;letter-spacing:-.03em}
.cmp .ok{width:1.15rem;height:1.15rem;color:var(--acc2)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .hl{background:rgba(var(--fg-rgb),.025)}
.cmp .acts-row td{padding-top:1.4rem;padding-bottom:1.6rem}

/* project screenshots */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.shot{position:relative;display:flex;flex-direction:column;border-radius:.8rem;background:var(--panel);border:1px solid rgba(var(--fg-rgb),.06);padding:1.6rem;overflow:hidden;transition:border-color .4s,background .6s}
.shot:hover{border-color:rgba(var(--fg-rgb),.2)}
.shot .tr{right:1.6rem;top:1.6rem}
.shot .frame{display:block;margin-top:2.2rem;border-radius:.45rem;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.1);background:rgba(var(--fg-rgb),.05)}
.shot img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.95)}
.shot:hover img{transform:scale(1.025);filter:none}
.shot .meta{display:flex;flex-direction:column;margin-top:1.6rem;flex:1}
.shot b{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.shot .desc{margin-top:.6rem;font-size:.9rem;line-height:1.6;color:var(--ink2)}
.shot .foot{margin-top:auto;padding-top:1.4rem}

/* case cards with photographs (Axiom) */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:.9rem}
.cases.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.case{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:24rem;padding:2rem;border-radius:.8rem;overflow:hidden;background:var(--img) center/cover;background-color:#1a1b1e;background-blend-mode:luminosity;color:#f3f4f6}
.case::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,12,.3),rgba(10,10,12,.94) 78%);transition:background .5s}
.case:hover::before{background:linear-gradient(rgba(10,10,12,.15),rgba(10,10,12,.9) 78%)}
.case>*{position:relative}
.case>.tr{position:absolute;color:#a4a8b0}
.case h3{color:#fff;font-size:1.55rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.case p{color:#b4b8bf;font-size:.92rem;margin-top:.6rem;max-width:34em}
.case .foot{color:#a4a8b0}
.case.wide{min-height:22rem;margin-bottom:1.5rem}
.case.wide .c-body{max-width:44rem}

/* invitation band on the accent colour (Axiom block) */
.cta-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem 3rem;padding:4rem 2.6rem 2.6rem;border-radius:1rem;background:var(--acc);color:var(--acc-ink);min-height:22rem}
.cta-band h2{color:var(--acc-ink);font-weight:400;font-size:3.2rem;line-height:1.05;letter-spacing:-.035em;max-width:14em;margin-top:5rem}
.cta-band .lead{color:rgba(21,18,13,.72);margin-top:1rem}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:.7rem}
.cta-band .btn.primary{background:#0b0c0e;color:#fff}.cta-band .btn.primary:hover{background:#000}
.cta-band .btn.ghost{border-color:rgba(21,18,13,.4);color:var(--acc-ink);background:transparent}.cta-band .btn.ghost:hover{border-color:var(--acc-ink)}

/* FAQ */
.faq-wrap{max-width:60rem;margin-left:0}
.faq{border-top:1px solid rgba(var(--fg-rgb),.14)}
.faq details{border-bottom:1px solid rgba(var(--fg-rgb),.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.6rem 0;font-size:1.25rem;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{position:relative;width:1rem;height:1rem;flex:none}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--acc2);transition:transform .35s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details p{padding:0 3rem 1.7rem 0;color:var(--ink2);font-size:1rem;line-height:1.7;max-width:46em}
.faq details p a,.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(var(--fg-rgb),.3);text-underline-offset:3px}

/* prose: legal texts and case studies */
.prose{max-width:46rem;color:var(--ink2);font-size:1.02rem;line-height:1.75}
.prose .meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:2rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(var(--fg-rgb),.1)}
.prose h2{font-size:1.6rem;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:2.8rem 0 .8rem;color:var(--ink)}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin-bottom:1rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.4rem}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.65rem .75rem;border-bottom:1px solid rgba(var(--fg-rgb),.1)}
.legal-grid{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:5rem;align-items:start}
.toc{position:sticky;top:6rem;display:grid;gap:.1rem;border-left:1px solid rgba(var(--fg-rgb),.1)}
.toc p{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 .8rem 1.1rem}
.toc a{position:relative;color:var(--ink3);padding:.35rem 0 .35rem 1.1rem;font-size:.84rem;line-height:1.35;transition:color .2s}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--ink)}

/* problem / solution (DAQ current / target) */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.pair .card{padding:2.2rem;border-radius:var(--r);background:var(--panel);border:1px solid rgba(var(--fg-rgb),.08);min-height:18rem}
.pair .card:last-child{border-color:rgba(var(--fg-rgb),.4)}
.pair .card h3{padding-top:0;margin:0 0 1.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink3);display:flex;align-items:center}
.pair .card:last-child h3{color:var(--ink)}
.pair .card:last-child h3::before{content:"";width:.38rem;height:.38rem;background:var(--acc2);margin-right:.6rem}
.pair .card p{font-size:1.15rem;line-height:1.6;color:var(--ink);font-weight:300;letter-spacing:-.005em}
.pair .card:first-child p{color:var(--ink2)}
.links-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.links-row a{display:inline-flex;align-items:center;gap:.6rem;height:2.6rem;padding:0 1rem;border:1px solid rgba(var(--fg-rgb),.16);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink);transition:border-color .25s,background .25s}
.links-row a:hover{border-color:var(--ink)}
.links-row .arw{width:.85rem;height:.85rem}

/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:1rem;align-items:start}
.contact-side{display:grid;gap:.9rem}
.contact-side .card{padding:1.8rem;border-radius:var(--r);background:var(--panel);border:1px solid rgba(var(--fg-rgb),.08)}
.contact-side .card h3{padding-top:1.4rem;margin-top:0}
.contact-side .card p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.contact-side ol{list-style:none;display:grid;gap:.8rem;margin-top:.9rem}
.contact-side li{display:flex;gap:.75rem;font-size:.92rem;color:var(--ink2);line-height:1.55}
.contact-side li::before{content:"";flex:none;width:.38rem;height:.38rem;margin-top:.55rem;background:var(--acc2)}

/* page index (DAQ "on this page") */
.ptoc{position:fixed;right:var(--gut);top:50%;transform:translateY(-50%);z-index:30;width:13rem;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.ptoc.show{opacity:1;visibility:visible}
.ptoc p{color:var(--ink3);font-size:.58rem;margin-bottom:.9rem}
.ptoc a{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;color:var(--ink3);font-size:.6rem;transition:color .3s}
.ptoc a::before{content:"";width:1rem;height:1px;background:currentColor;opacity:.6;transition:width .4s var(--ease)}
.ptoc a:hover,.ptoc a.on{color:var(--ink)}
.ptoc a.on::before{width:1.8rem;opacity:1}
@media (min-width:1280px){.has-ptoc main .sheet>.wrap{padding-right:calc(var(--gut) + 15rem)}}
@media (max-width:1279px){.ptoc{display:none}}

/* ---------- contact dialog ---------- */
.ce-dialog{margin:auto;width:min(44rem,calc(100% - 1.5rem));max-height:calc(100dvh - 1.5rem);overflow:auto;padding:3rem;border:1px solid rgba(var(--fg-rgb),.14);background:var(--panel);color:var(--ink);box-shadow:0 3rem 8rem var(--shadow)}
.ce-dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ce-dialog[open]:not(.inline){animation:up .45s var(--ease)}
.ce-dialog-close{position:absolute;top:1.2rem;right:1.2rem;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--fg-rgb),.16);background:none;cursor:pointer}
.ce-dialog-close::before,.ce-dialog-close::after{content:"";position:absolute;left:.7rem;right:.7rem;top:calc(50% - .75px);height:1.5px;background:var(--ink)}
.ce-dialog-close::before{transform:rotate(45deg)}.ce-dialog-close::after{transform:rotate(-45deg)}
.ce-dialog .kicker{color:var(--ink3);font-size:.62rem;display:flex;align-items:center}
.ce-dialog h2{margin:1.1rem 0 .7rem;font-size:2.6rem;font-weight:300;line-height:1.05;letter-spacing:-.04em}
.ce-dialog .dlg-sub{color:var(--ink2);font-size:1rem}
.ce-dialog .topics{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 1.5rem;border:0}
.ce-dialog .topics label{cursor:pointer}
.ce-dialog .topics input{position:absolute;opacity:0;pointer-events:none}
.ce-dialog .topics span{display:inline-block;padding:.6rem 1rem;border:1px solid rgba(var(--fg-rgb),.16);font-size:.88rem;color:var(--ink2);transition:all .25s}
.ce-dialog .topics input:checked+span{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.ce-dialog .topics input:focus-visible+span{outline:2px solid var(--acc2);outline-offset:3px}
.ce-dialog .row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ce-dialog .field{display:block;margin-bottom:.9rem}
.ce-dialog .field span{display:block;margin-bottom:.55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink3)}
.ce-dialog input:not([type=radio]):not([type=checkbox]),.ce-dialog textarea{width:100%;padding:.9rem 1rem;border:1px solid rgba(var(--fg-rgb),.16);background:var(--field);color:var(--ink);font:400 1rem/1.4 var(--sans);resize:vertical;transition:border-color .25s;border-radius:0}
.ce-dialog input:focus,.ce-dialog textarea:focus{outline:none;border-color:var(--ink)}
.ce-dialog [aria-invalid=true]{border-color:var(--err-line)!important}
.ce-dialog .err{display:block;margin-top:.4rem;font-size:.84rem;font-style:normal;color:var(--err)}
.ce-dialog .err:empty{display:none}
.hp{position:absolute!important;left:-9999px}
.ce-dialog .check{display:flex;gap:.65rem;align-items:flex-start;margin-top:.4rem;font-size:.9rem;color:var(--ink2);cursor:pointer}
.ce-dialog .check input{margin-top:.25rem;accent-color:var(--acc2);width:1rem;height:1rem}
.ce-dialog .dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1.6rem}
.ce-dialog .dlg-alt{font-size:.9rem;color:var(--ink3)}.ce-dialog .dlg-alt a{color:var(--ink)}
.ce-dialog .dlg-trust{margin-top:1.3rem;padding-top:1rem;border-top:1px solid rgba(var(--fg-rgb),.1);font-size:.84rem;color:var(--ink3)}
.ce-dialog .dlg-trust a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.ce-dialog .form-status{margin-top:.75rem;font-size:.9rem;color:var(--err)}
.ce-dialog .dlg-done{text-align:center;padding:2rem 0 .4rem}
.ce-dialog .dlg-check{width:4rem;height:4rem;fill:none;stroke:var(--acc2);stroke-width:1.5;margin:0 auto}
.ce-dialog .dlg-done p{color:var(--ink2);margin:.5rem 0 1.5rem}
.dlg-open body{overflow:hidden}
.ce-dialog.inline{position:static;display:block;width:100%;max-height:none;margin:0;box-shadow:none;border-color:rgba(var(--fg-rgb),.1);border-radius:var(--r)}
.ce-dialog.inline .ce-dialog-close,.ce-dialog.inline .dlg-done .btn{display:none}

/* ---------- order form (markup and scripts from the existing site) ---------- */
.order-sheet{padding-top:4rem}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 23rem;gap:3rem;align-items:start}
.oform{min-width:0}
.ostep{display:flex;align-items:center;gap:.8rem;margin:2.8rem 0 1.1rem;font-size:1.5rem;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.ostep:first-child{margin-top:0}
.ostep i{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--ic-line);color:var(--acc2);font:500 .7rem/1 var(--mono);font-style:normal}
#order-form .seg{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid rgba(var(--fg-rgb),.14);background:var(--panel);margin-bottom:1rem}
#order-form .seg label{cursor:pointer}
#order-form .seg input{position:absolute;opacity:0;pointer-events:none}
#order-form .seg span{display:inline-block;padding:.65rem 1.1rem;font:500 .86rem/1 var(--sans);color:var(--ink2);transition:all .25s}
#order-form .seg input:checked+span{background:var(--btn-bg);color:var(--btn-ink)}
#order-form .seg input:focus-visible+span{outline:2px solid var(--acc2);outline-offset:2px}
.plans-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.popt{cursor:pointer}
.popt input,.picker input{position:absolute;opacity:0;pointer-events:none}
.po{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.2rem 1.2rem 1.1rem;border-radius:var(--r);border:1px solid rgba(var(--fg-rgb),.14);background:var(--panel);transition:border-color .25s,box-shadow .25s,background .25s}
.popt:hover .po{border-color:rgba(var(--fg-rgb),.3)}
.popt input:checked+.po{border-color:var(--acc2);box-shadow:0 0 0 1px var(--acc2) inset}
.popt input:focus-visible+.po{outline:2px solid var(--acc2);outline-offset:2px}
.po-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.po-head b{font-size:1.1rem;font-weight:500;color:var(--ink)}
.po-head i{font:500 .52rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--on-accent);background:var(--acc2);padding:.32rem .45rem}
.po-price strong{font-size:1.7rem;font-weight:300;letter-spacing:-.04em;color:var(--ink)}
.po-price small{margin-left:.25rem;font-size:.8rem;color:var(--ink3)}
.po-spec{font-size:.82rem;color:var(--ink3);line-height:1.45}
.osmall{font-size:.84rem;color:var(--ink3);line-height:1.6}
.ofield{display:block;margin-bottom:.9rem}
.ofield>span{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;margin-bottom:.55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink3)}
.ofield>span small{font-family:var(--sans);font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--ink3)}
.ofield input,.ofield select{width:100%;height:3.1rem;padding:0 1rem;border:1px solid rgba(var(--fg-rgb),.16);background:var(--field);color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .25s;appearance:none;-webkit-appearance:none;border-radius:0}
.ofield select{background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 55%,calc(100% - .94rem) 55%;background-size:.31rem .31rem;background-repeat:no-repeat;padding-right:2.5rem}
.ofield input:focus,.ofield select:focus{outline:none;border-color:var(--ink)}
.ofield [aria-invalid=true],.ofield .invalid{border-color:var(--err-line)!important}
.oerr{display:block;margin-top:.4rem;font-size:.82rem;font-style:normal;color:var(--err)}
.oerr:empty{display:none}
.orow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ochk{display:flex;gap:.65rem;align-items:flex-start;margin:.8rem 0 .4rem;font-size:.88rem;line-height:1.55;color:var(--ink2);cursor:pointer}
.ochk input{margin-top:.25rem;accent-color:var(--acc2);width:1rem;height:1rem;flex:none}
.ochk a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.picker{display:grid;gap:.7rem}
.picker.two{grid-template-columns:1fr 1fr}
.picker label{cursor:pointer}
.pk{display:block;height:100%;padding:1.05rem 1.2rem;border-radius:var(--r);border:1px solid rgba(var(--fg-rgb),.14);background:var(--panel);transition:border-color .25s,box-shadow .25s}
.pk b{display:block;font:500 .95rem/1.3 var(--sans);color:var(--ink)}
.pk small{display:block;margin-top:.2rem;font-size:.82rem;color:var(--ink3)}
.picker input:checked+.pk{border-color:var(--acc2);box-shadow:0 0 0 1px var(--acc2) inset}
.picker input:focus-visible+.pk{outline:2px solid var(--acc2);outline-offset:2px}
.osubmit{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid rgba(var(--fg-rgb),.1)}
.osubmit .button{display:inline-flex;align-items:center;gap:.8rem;height:3.4rem;padding:0 1.6rem;border:0;background:var(--btn-bg);color:var(--btn-ink);font:500 .96rem/1 var(--sans);cursor:pointer;transition:background .3s,color .3s}
.osubmit .button:hover{background:var(--acc);color:#0b0b0c}
.osubmit .button b{font:inherit}
.osubmit .button:disabled{opacity:.55;cursor:wait}
.osubmit .osmall{margin-top:.9rem}
.ostatus{margin-top:.75rem;font-size:.88rem;color:var(--err)}
.ostatus:empty{display:none}
.summary{position:sticky;top:6rem;padding:2rem;border-radius:var(--r);background:var(--panel);border:1px solid rgba(var(--fg-rgb),.14)}
.summary h2{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink3);margin-bottom:1.4rem}
.summary dl{display:grid;gap:.9rem}
.summary .row{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}
.summary dt{color:var(--ink3)}.summary dd{color:var(--ink);text-align:right;font-weight:500;overflow-wrap:anywhere}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(var(--fg-rgb),.1)}
.summary .total span{font-size:.88rem;color:var(--ink3)}
.summary .total b{font-size:2.3rem;font-weight:300;letter-spacing:-.04em;color:var(--ink)}
.summary .vat{margin-top:.65rem;font-size:.78rem;color:var(--ink3)}
.summary ul{list-style:none;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(var(--fg-rgb),.1);display:grid;gap:.5rem}
.summary li{display:flex;gap:.55rem;font-size:.82rem;color:var(--ink2);line-height:1.45}
.summary li::before{content:"";flex:none;width:.35rem;height:.35rem;margin-top:.45rem;background:var(--acc2)}
.odone{padding:2rem;border-radius:var(--r);background:var(--panel);border:1px solid rgba(var(--fg-rgb),.14)}
.odone h2,.odone h3{font-size:1.8rem;font-weight:400;margin-bottom:.75rem}
.odone p{color:var(--ink2);margin-bottom:.75rem}
.odone h2:focus{outline:0}
.odone .dlg-check{display:block;width:3.25rem;height:3.25rem;fill:none;stroke:var(--acc2)!important;stroke-width:1.5;margin:0 0 1.5rem}
.odone .bank{display:grid;gap:.45rem;margin:1.25rem 0;padding:1.1rem 1.3rem;border:1px solid var(--line2);border-radius:.6rem;font-size:.95rem;color:var(--ink2)}
.odone .bank b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.oembedded[hidden]{display:none}
.stripe-module-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.4rem}
.stripe-lock{display:grid;place-items:center;flex:0 0 2.4rem;height:2.4rem;border:1px solid var(--ic-line);color:var(--acc2);font-weight:700}
.oembedded .stripe-step{margin:0}
.oembedded .stripe-intro{max-width:40rem;margin:.3rem 0 0}
.ce-payment-stage{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border:1px solid rgba(var(--fg-rgb),.14);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ce-card-side{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;padding:2.75rem 2rem;background:radial-gradient(circle at 50% 35%,var(--ic),transparent 55%),var(--card2)}
.ce-payment-visual{width:min(100%,22rem);perspective:1200px}
.ce-card-flip{position:relative;width:100%;aspect-ratio:1.62/1;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.ce-card-flip.is-flipped{transform:rotateY(180deg)}
.ce-card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:1.25rem;padding:1.5rem;color:#f5f1e8;box-shadow:0 1.75rem 3rem -1.5rem rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) inset}
.ce-card-front{background:radial-gradient(circle at 18% 0,rgba(214,185,140,.28),transparent 40%),linear-gradient(145deg,#1b1a17 0,#0f0f10 60%,#1a1813 100%)}
.ce-card-back{transform:rotateY(180deg);background:linear-gradient(145deg,#141414,#1d1b17);display:flex;flex-direction:column}
.ce-card-top,.ce-card-bottom{display:flex;align-items:flex-start;justify-content:space-between}
.ce-card-top b{letter-spacing:.24em;font-size:.875rem}
.ce-contactless{font-weight:700;letter-spacing:-.2em;transform:rotate(90deg);opacity:.75}
.ce-chip{width:2.625rem;height:2rem;margin-top:1.5rem;border-radius:.5rem;background:linear-gradient(135deg,#e5cf98,#a88a52 55%,#f1dfb0);box-shadow:inset 0 0 0 1px rgba(68,47,0,.18)}
.ce-card-number{margin-top:1.25rem;font:600 1.1875rem/1.1 var(--mono);letter-spacing:.12em}
.ce-card-bottom{margin-top:1.5rem;align-items:end}
.ce-card-bottom span{display:grid;gap:.1875rem}
.ce-card-bottom small{font-size:.5rem;letter-spacing:.13em;opacity:.58}
.ce-card-bottom b{font-size:.6875rem;letter-spacing:.08em}
.ce-card-bottom strong{font-size:1.25rem;font-style:italic;letter-spacing:-.06em}
.ce-card-stripe{height:3.25rem;background:#050505;margin:1rem -1.5rem 1.375rem}
.ce-card-back-row{display:flex;align-items:center;gap:.75rem}
.ce-card-back-row span{font-size:.5625rem;letter-spacing:.14em;opacity:.6}
.ce-card-back-row b{margin-left:auto;width:4.5rem;padding:.625rem .75rem;border-radius:.375rem;background:#f5f1e8;color:#1a1a1a;text-align:right;letter-spacing:.22em}
.ce-card-back-copy{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:1.125rem}
.ce-card-back-copy b{letter-spacing:.22em}
.ce-card-back-copy small{max-width:11rem;text-align:right;line-height:1.35;opacity:.68}
.ce-card-flip-toggle{border:1px solid rgba(var(--fg-rgb),.16);background:var(--panel);color:var(--ink2);padding:.5rem .75rem;font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
.ce-card-flip-toggle:hover{border-color:var(--acc2);color:var(--ink)}
.ce-method-visual{min-height:15rem;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;padding:2rem;text-align:center;background:var(--panel);border:1px solid rgba(var(--fg-rgb),.14)}
.ce-method-visual[hidden]{display:none}
.ce-method-visual span{display:grid;place-items:center;min-width:5.375rem;min-height:4rem;padding:.625rem 1.125rem;border-radius:1rem;font:800 1.5rem/1 var(--sans)}
.ce-method-visual strong{font-size:1.75rem;letter-spacing:-.035em;color:var(--ink)}
.ce-method-visual small{max-width:15rem;color:var(--ink3);line-height:1.5}
.ce-trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem}
.ce-trust-badges span{padding:.4375rem .625rem;border:1px solid rgba(var(--fg-rgb),.16);background:var(--panel);color:var(--ink3);font-size:.6875rem}
.ce-payment-form{padding:2.25rem 2rem;background:var(--panel)}
.ce-pay-title{margin-bottom:1.375rem}
.ce-pay-title h3{font-size:1.375rem;margin-bottom:.375rem}
.ce-pay-title p{color:var(--ink3);font-size:.8125rem;line-height:1.55}
.stripe-amount-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:.9375rem 1rem;border:1px solid rgba(var(--fg-rgb),.14);background:var(--card2);color:var(--ink3);font-size:.8125rem}
.stripe-amount-row b{color:var(--ink);font-size:1.375rem;letter-spacing:-.03em}
.stripe-pay-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:1rem 1.125rem;border:0;background:var(--btn-bg);color:var(--btn-ink);font:500 .9375rem/1.2 var(--sans);cursor:pointer;transition:opacity .2s,background .3s}
.stripe-pay-button:hover:not(:disabled){background:var(--acc);color:#0b0b0c}
.stripe-pay-button:disabled{opacity:.48;cursor:not-allowed}
.stripe-pay-button.is-loading span::after{content:'…'}
.stripe-element-error{min-height:1.25rem;margin-top:.625rem;color:var(--err);font-size:.8125rem}
.stripe-safe-note{margin-top:.8125rem;text-align:center;color:var(--ink3);font-size:.75rem}
.thanks{max-width:46rem}
.thanks h2{font-weight:300;font-size:3rem;letter-spacing:-.04em;line-height:1.05}
.thanks .lead{margin:1.2rem 0 1.5rem}
.thanks p a{color:var(--ink)}

/* ---------- motion ---------- */
@keyframes up{from{opacity:0;transform:translateY(1.75rem)}to{opacity:1;transform:none}}
[data-rv],.js .reveal{opacity:0;transform:translateY(1.6rem);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms),border-color .4s,background-color .6s}
[data-rv].in,.js .reveal.in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .links,.lang{display:none}
  .burger{display:block}
  .nav{grid-template-columns:1fr auto}
  .arch-grid,.refs-grid,.pr-grid,.or-grid{grid-template-columns:1fr;gap:2.5rem}
  .refs-l{position:static}
  .stages{align-self:start}
  .bento{grid-template-columns:1fr 1fr}
  .cta-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts>div:nth-child(3){padding-left:0;border-left:0}.facts>div:nth-child(n+3){border-top:1px solid rgba(var(--fg-rgb),.08)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps>div:nth-child(3){padding-left:0;border-left:0}.steps>div:nth-child(n+3){margin-top:1.6rem;border-top:1px solid rgba(var(--fg-rgb),.1)}
  .plans,.work,.feat,.cases.three{grid-template-columns:1fr 1fr}
  .order-grid{grid-template-columns:1fr}.summary{position:static;order:-1}
  .legal-grid{grid-template-columns:1fr;gap:2rem}.toc{display:none}
  .contact-grid{grid-template-columns:1fr}
  .ce-payment-stage{grid-template-columns:1fr}
  .h-sub{font-size:4.6rem}.sub-hero.short .h-sub{font-size:4rem}
  .swap{font-size:8rem}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  .nav{height:4rem}
  .nav .btn-w{display:none}
  .nav-r{gap:.8rem}
  .logo img{height:2rem}
  .h-xl{font-size:13.2vw}
  .h-xl.sm{font-size:11.5vw}
  .hero{align-items:center;padding:5.5rem 0 8.5rem}
  .hero .lead{margin-top:2rem;font-size:.72rem;letter-spacing:.03em}
  .hero-cta{flex-wrap:wrap;gap:.4rem}
  .hero>.case-card{left:var(--gut);right:var(--gut);width:auto;bottom:1.2rem;grid-template-columns:1fr 3.6rem;padding:.8rem}
  .case-card b{font-size:.8rem}
  .hero>.scroll-hint{display:none}
  .manifesto{height:auto}
  .manifesto .pin{position:relative;height:auto;padding:6rem 0}
  .m-top{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .m-top .lbl i{width:6rem}
  .ticks{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:.4rem;font-size:.54rem;letter-spacing:.08em}
  .ticks em{gap:.4rem;white-space:nowrap}
  .ticks em::before{width:.55rem}
  .m-text{font-size:6.6vw;line-height:1.22}
  .m-text .jl{display:block;white-space:nowrap;text-align:justify;text-align-last:justify;letter-spacing:calc(-.03em + var(--t,0em));word-spacing:calc(var(--t,0em)*2)}
  .m-text .jl .w.k{letter-spacing:calc(-.045em + var(--t,0em))}
  .m-text .jl.last{text-align-last:left}
  .arch{padding:6rem 0}
  .h-l{font-size:2.6rem}
  .diagram{grid-template-columns:1fr;grid-template-rows:auto;padding:1.2rem 1.2rem 5rem;min-height:0;row-gap:1.4rem;column-gap:0}
  .d-head{flex-direction:column;gap:.8rem;margin-bottom:0}
  .col{gap:.6rem}
  .wires{display:none}
  .inspect{left:1.2rem;right:1.2rem}
  .services{height:auto!important}
  .svc-pin{position:relative;height:auto;padding:6rem 0 3rem}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;gap:.9rem;padding-bottom:.5rem;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card-s{flex:0 0 86vw;height:auto;grid-template-columns:1fr;grid-template-rows:12rem auto;scroll-snap-align:center}
  .card-s .c-img{grid-row:1}
  .card-s .c-img::after{background:linear-gradient(transparent 40%,var(--card))}
  .card-s .c-txt{grid-row:2;padding:1.4rem}
  .card-s h3{font-size:2rem;margin-top:1.4rem;color:var(--ink);-webkit-text-stroke:0}
  .svc-bar{display:none}
  .h-copy .h-2t{font-size:2.9rem}
  .h-photo{height:120svh}
  .h-win::after{background:linear-gradient(transparent 20%,rgba(5,5,6,.75) 55%,#050506)}
  .h-copy{justify-content:flex-end;padding-bottom:4rem}
  .h-btns{flex-wrap:wrap}
  .b-acts .btn{flex:1 1 100%}
  .bento{grid-template-columns:1fr;margin-top:1rem}
  .b-card.big,.b-card.photo{grid-column:auto;grid-row:auto;min-height:20rem}
  .num b{font-size:5.4rem}
  .bento{padding:0 .6rem}
  .st-box{padding:5rem 1.4rem 2rem;min-height:0}
  .st-text{font-size:1.9rem;margin-top:3rem}
  .st-facts{grid-template-columns:1fr;gap:1.2rem;margin-top:3rem}
  .origin{padding:6rem 0}
  .swap{font-size:19vw}
  .or-txt{font-size:1.2rem}
  .or-meta{grid-template-columns:1fr 1fr}
  .h-2t,.h-2t.sm{font-size:2.4rem}
  .refs{padding:6rem 0 4rem}
  .r-list{display:none}
  .r-card{padding:1.3rem;min-height:0}
  .r-shot{margin-top:2rem;margin-bottom:1.3rem}
  .r-card.case{min-height:22rem}
  .tr{right:1.3rem;top:1.4rem}
  .pr-cards{grid-template-columns:1fr}
  .p-card{border-right:0!important;border-bottom:1px solid rgba(var(--fg-rgb),.1)!important;min-height:14rem}
  .p-card:last-child{border-bottom:0!important}
  .cta{min-height:auto;padding:7rem 0}
  .h-cta{font-size:13vw}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-cols>div{padding:2rem 1rem 2rem 0!important;border-right:0;border-bottom:1px solid rgba(var(--fg-rgb),.1)}
  .f-cols>div+div{padding-left:0!important}
  .f-brand{grid-column:1/-1;order:-1}
  .sub-hero{min-height:88svh;padding-top:7rem}.sub-hero.short{min-height:66svh}
  .h-sub,.sub-hero.short .h-sub{font-size:11vw}
  .sub-hero .acts .btn{flex:1 1 100%}
  .facts{grid-template-columns:1fr}
  .facts>div,.facts>div+div{padding:1.1rem 0;border-left:0;border-top:1px solid rgba(var(--fg-rgb),.08)}
  .facts>div:first-child{border-top:0}
  .sheet{padding:4.5rem 0}.sub-hero+.sheet{padding-top:4rem}
  .sec-head{grid-template-columns:1fr;gap:1.2rem}.sec-head .lead,.sec-head .side{justify-self:start}
  .sec-head h2{font-size:2.3rem}
  .plans,.work,.cases,.cases.three,.feat,.pair{grid-template-columns:1fr}
  .feat .card{min-height:0}
  .plan{padding:1.6rem 1.3rem}
  .steps{grid-template-columns:1fr}.steps>div,.steps>div+div{padding:1.3rem 0 0;border-left:0;margin-top:0}.steps>div+div{border-top:1px solid rgba(var(--fg-rgb),.1);margin-top:1.3rem}
  .hide-phone{display:none}
  .faq summary{font-size:1.08rem}.faq details p{padding-right:0}
  .cta-band{padding:3rem 1.4rem 1.6rem;min-height:0}.cta-band h2{font-size:2.2rem;margin-top:2.5rem}.cta-band .acts .btn{flex:1 1 100%}
  .case{min-height:20rem;padding:1.4rem}
  .ce-dialog{padding:2rem 1.25rem}.ce-dialog .row2{grid-template-columns:1fr}.ce-dialog h2{font-size:2rem}
  .plans-pick,.picker.two,.orow{grid-template-columns:1fr}
  .ce-card-side{padding:1.5rem 1rem}.ce-payment-form{padding:1.5rem 1.125rem}
}
@media (hover:none) and (pointer:coarse){.nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-rv],.js .reveal,.ln2,.js .rise{opacity:1!important;transform:none!important}
  .ln>span{transform:none}
}

/* bento: reseller card shows our reseller panel (demo data); the dark and light screenshots follow the theme */
.b-card.pv{grid-column:span 2;grid-row:span 2;padding:0;background:var(--panel)}
.pv-win{position:absolute;left:1.8rem;top:4.4rem;width:calc(100% + 1rem);border-radius:.55rem;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.12);background:var(--bg);box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.22);transition:transform .9s cubic-bezier(.2,.7,.1,1),border-color .4s}
.pv-win img{display:block;width:100%;height:auto}
.pv-l{display:none!important}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .pv-d{display:none!important}:root:not([data-theme=dark]) .pv-l{display:block!important}}
:root[data-theme=light] .pv-d{display:none!important}:root[data-theme=light] .pv-l{display:block!important}
a.b-card.pv:hover .pv-win{transform:translate(-.4rem,-.3rem);border-color:rgba(var(--fg-rgb),.22)}
.b-card.pv::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 52%,var(--panel) 76%);pointer-events:none}
.b-card.pv>.b-txt,.b-card.pv>.foot{position:relative;z-index:1}
.b-card.pv>.tr{z-index:1}
.b-card.pv>.b-txt{margin:auto 1.8rem 0}
.b-card.pv>.foot{margin:1.4rem 1.8rem 1.8rem}
@media (max-width:760px){.b-card.pv{grid-column:auto;grid-row:auto;min-height:0}.b-card.pv::after{display:none}.pv-win{position:relative;left:auto;top:auto;display:block;width:165%;height:13.5rem;margin:3.8rem 0 0 1.3rem;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}.b-card.pv>.b-txt{margin:1.2rem 1.3rem 0}.b-card.pv>.foot{margin:1.2rem 1.3rem 1.5rem}}

/* offer note (home hosting window, software page hero): software or app development includes hosting and a domain for the first year */
.gift{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;padding:.62rem 1.05rem;border:1px solid rgba(214,185,140,.5);border-radius:999px;background:rgba(214,185,140,.09);color:var(--ink);font-size:.88rem;line-height:1.4;max-width:100%}
.gift .sq{flex:0 0 auto}
.h-copy .gift{margin-top:1.4rem}
.h-copy .gift+.h-btns{margin-top:1.8rem}
@media (max-width:760px){.gift{border-radius:.8rem;align-items:flex-start;font-size:.84rem}.gift .sq{margin-top:.4rem}}

/* statement: the services run as a large moving line across the champagne block (no empty top half) */
.st-box{min-height:0;padding:3.2rem 2.6rem 3.4rem}
.st-marq{margin:3.2rem -2.6rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.st-row{display:flex;align-items:center;width:max-content;font-size:8.4rem;font-weight:600;letter-spacing:-.055em;line-height:1.08;color:var(--acc-ink);animation:stm 52s linear infinite;will-change:transform}
.st-row>*{margin-right:2.6rem;flex:0 0 auto}
.st-row .o{color:transparent;-webkit-text-stroke:1.5px var(--acc-ink);font-weight:500}
.st-row i{width:1rem;height:1rem;border-radius:.16rem;background:var(--acc-ink)}
.statement:hover .st-row{animation-play-state:paused}
@keyframes stm{to{transform:translateX(-50%)}}
.st-box .st-text{margin-top:3.6rem}
@media (prefers-reduced-motion:reduce){.st-row{animation:none}}
@media (max-width:760px){.st-box{padding:2.4rem 1.4rem 2.2rem}.st-marq{margin:2.2rem -1.4rem 0}.st-row{font-size:3.4rem;animation-duration:34s}.st-row>*{margin-right:1.3rem}.st-row i{width:.55rem;height:.55rem}.st-row .o{-webkit-text-stroke-width:1px}.st-box .st-text{margin-top:2.4rem}}

/* footer: client sign-in links under the brand */
.f-brand .f-sub{margin-top:1.2rem}

/* sub-page heroes: content sits under the navigation, the next section follows directly (no empty band above the title) */
.sub-hero,.sub-hero.short{min-height:0;padding-top:clamp(8.5rem,20vh,11rem)}
.sub-hero .sh-in{padding-bottom:3.2rem}
.sub-hero+.sheet{padding-top:3.6rem}
@media (max-width:760px){.sub-hero,.sub-hero.short{min-height:0;padding-top:7.2rem}.sub-hero .sh-in{padding-bottom:2.4rem}.sub-hero+.sheet{padding-top:2.8rem}}
.gift{align-self:flex-start;width:fit-content}
.f-brand a.mono{display:inline-flex;align-items:center;gap:.5rem}
.f-brand a.mono .ne{width:.6rem;height:.6rem;flex:0 0 auto}

/* payment card: turns towards the side that was clicked (--rot accumulates ±180deg), slight tilt towards the pointer */
.ce-payment-visual{perspective:1400px}
.ce-card-flip{cursor:pointer;transform:rotateX(var(--tx,0deg)) rotateY(calc(var(--rot,0deg) + var(--ty,0deg)));transition:transform .8s cubic-bezier(.2,.75,.2,1);outline:none}
.ce-card-flip.is-flipped{transform:rotateX(var(--tx,0deg)) rotateY(calc(var(--rot,180deg) + var(--ty,0deg)))}
.ce-card-flip:focus-visible .ce-card-face{box-shadow:0 0 0 2px var(--acc),0 1.75rem 3rem -1.5rem rgba(0,0,0,.7)}
.ce-card-flip:active .ce-card-face{filter:brightness(1.06)}
.ce-card-hint{margin:0;font:500 .6rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-align:center;max-width:22rem}
@media (prefers-reduced-motion:reduce){.ce-card-flip{transition-duration:.01s}}

/* Stripe express buttons (Link, Google Pay, Apple Pay, PayPal, Klarna) above the card fields */
.stripe-express{margin:0 0 .4rem}
.stripe-or{display:flex;align-items:center;gap:.9rem;margin:.9rem 0 1.1rem;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.stripe-or::before,.stripe-or::after{content:"";flex:1;height:1px;background:rgba(var(--fg-rgb),.12)}


/* landscape phones (low and wide screens): nothing is pinned to the screen height, headings scale with the height, the hero fits the first screen.
   cealius-wow.js treats the same media query as a phone for the manifesto and the services track. */
@media (orientation:landscape) and (max-height:540px){
  html{scroll-padding-top:4rem}
  .nav,.nav.scrolled{height:3.5rem}
  .logo img{height:1.9rem}
  .nav .btn-w{height:2.4rem}

  .mnav{padding:4.2rem var(--gut) 1rem;display:block;columns:2;column-gap:2.5rem}
  .mnav>a:not(.btn){display:block;break-inside:avoid}
  .mnav>a.sm{font-size:1.1rem;padding:.42rem 0 .42rem 1rem}
  .mnav>a:not(.btn):not(.sm){font-size:1.5rem;padding:.4rem 0}
  .mnav>a.sm+a:not(.sm){-webkit-column-break-before:always;break-before:column}
  .mnav>.btn{display:flex;margin-top:1rem;height:3rem}
  .mnav .meta{column-span:all;margin-top:1rem;padding-top:.8rem}

  .h-xl{font-size:min(8.4vw,16.5vh)}
  .h-xl.sm{font-size:min(7vw,14vh)}
  .h-l{font-size:min(5.2vw,10.5vh)}
  .h-2t,.h-2t.sm{font-size:min(4.6vw,9.5vh)}
  .h-cta{font-size:min(7vw,13vh)}
  .h-sub,.sub-hero.short .h-sub{font-size:min(6.6vw,12.5vh)}

  .hero{display:block;min-height:0;padding:5rem 0 1.6rem}
  .hero .h-xl,.hero .lead{margin-top:0}
  .hero .lead{margin-top:1.1rem;font-size:.72rem;line-height:1.7}
  .hero-cta{margin-top:1.1rem;gap:.4rem;flex-wrap:wrap}
  .hero-cta .btn-o{padding:.95rem 1.6rem}
  .hero-cta .btn-t{padding:.95rem .4rem}
  .hero>.case-card{position:relative;left:auto;right:auto;bottom:auto;margin:1.6rem var(--gut) 0;width:min(26rem,calc(100% - 2*var(--gut)));grid-template-columns:1fr 3.6rem;padding:.8rem}
  .hero>.scroll-hint{display:none}

  .manifesto{height:auto}
  .manifesto .pin{position:relative;height:auto;padding:4.5rem 0 4rem}
  .m-top{margin-bottom:2rem;gap:1.5rem}
  .m-top .lbl i{width:6rem}
  .ticks{gap:1.1rem;font-size:.56rem;letter-spacing:.1em}
  .ticks em{gap:.5rem;white-space:nowrap}
  .ticks em::before{width:.8rem}
  .m-text{font-size:min(4.3vw,8.6vh);line-height:1.2}
  .m-text .jl{display:block;white-space:nowrap;text-align:justify;text-align-last:justify;letter-spacing:calc(-.03em + var(--t,0em));word-spacing:calc(var(--t,0em)*2)}
  .m-text .jl .w.k{letter-spacing:calc(-.045em + var(--t,0em))}
  .m-text .jl.last{text-align-last:left}

  .arch,.origin{padding:4.5rem 0}
  .arch-grid{margin-top:2rem}
  .diagram{min-height:0}

  .services{height:auto!important}
  .svc-pin{position:relative;height:auto;padding:4.5rem 0 3rem}
  .svc-head{margin-bottom:1.8rem}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;gap:.9rem;padding-bottom:.5rem;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card-s{flex:0 0 min(40rem,78vw);height:min(17rem,64vh);scroll-snap-align:center}
  .c-txt{padding:1.4rem 1.5rem}
  .card-s h3{font-size:min(2.2rem,8vh);color:var(--ink);-webkit-text-stroke:0}
  .c-p{font-size:.86rem;margin-top:.6rem}
  .more{margin-top:1rem}
  .svc-bar{display:none}

  .h-copy{min-height:0;padding-top:5rem;padding-bottom:7.5rem}
  .h-copy .h-2t{font-size:min(5.4vw,11vh)}
  .h-photo{top:-10vh;height:150vh}

  .st-box{padding:2.6rem 1.6rem 2.4rem}
  .st-marq{margin:2.2rem -1.6rem 0}
  .st-row{font-size:min(9vw,17vh)}
  .st-text{font-size:min(3.8vw,8vh)}
  .st-box .st-text{margin-top:2.4rem}
  .st-facts{margin-top:2.4rem}

  .swap{font-size:min(10vw,22vh)}
  .or-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:2.5rem}
  .or-map{max-height:78vh;aspect-ratio:1;justify-self:end;width:100%;max-width:78vh}
  .or-txt{font-size:1.15rem;margin-top:1.6rem}
  .or-meta{margin-top:1.8rem}

  .refs{padding:4.5rem 0 3rem}
  .refs-l{position:static}
  .refs-r{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
  .refs-r>:last-child:nth-child(odd){grid-column:1/-1}
  .r-card{min-height:0;padding:1.4rem}
  .r-shot{margin-top:2rem;margin-bottom:1.2rem}
  .r-card h3{font-size:1.2rem}
  .r-card p{font-size:.85rem}
  .r-card.case{min-height:15rem}
  .process{padding:4.5rem 0 5rem}
  .p-card{min-height:12rem}

  .cta{min-height:0;padding:5rem 0}
  .cta-grid{gap:2.5rem}

  .sub-hero,.sub-hero.short{min-height:0;padding-top:5.5rem}
  .sub-hero .sh-in{padding-bottom:2.2rem}
  .crumbs{margin-bottom:1.4rem}
  .sub-hero .lbl{margin-bottom:1rem}
  .sub-hero .lead{margin-top:1.2rem}
  .sub-hero .acts{margin-top:1.4rem}
  .sub-hero+.sheet{padding-top:3rem}
  .sheet{padding:4.5rem 0}
  .sec-head{margin-bottom:2.4rem}
  .sec-head h2{font-size:min(4.4vw,9vh)}
  .cta-band{min-height:0;padding:3rem 2rem 2rem}
  .cta-band h2{font-size:min(4.4vw,9vh)}
  .case,.case.wide{min-height:17rem}

  .ce-dialog{max-height:calc(100dvh - 1rem);padding:1.8rem 1.6rem}
  /* small landscape phones (also under the 760 px phone rules): two columns and buttons side by side */
  .plans,.work,.feat,.cases,.cases.three,.pair,.pr-cards,.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-card{border-bottom:1px solid rgba(var(--fg-rgb),.1)!important}
  .p-card:nth-child(odd){border-right:1px solid rgba(var(--fg-rgb),.1)!important}
  .p-card:nth-child(n+3){border-bottom:0!important}
  .sub-hero .acts .btn,.cta-band .acts .btn,.b-acts .btn{flex:0 0 auto}
  .card-s{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .card-s .c-img,.card-s .c-txt{grid-row:auto}
  .card-s .c-img::after{background:linear-gradient(90deg,var(--card),rgba(var(--bg-rgb),.12) 40%,transparent)}
  .card-s h3{margin-top:auto}
  .num b{font-size:min(5.4rem,15vh)}
}

/* narrow tablets and landscape phones (761 to 960 px): the system diagram and the approach ticks fit the width */
@media (max-width:1100px){.arch-grid{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:761px) and (max-width:960px){.diagram{column-gap:1.6rem;padding:1.6rem 1.4rem 3.5rem}
.node{padding:.75rem .8rem;gap:.6rem}
.col.c2{padding:1rem}
.m-top{flex-direction:column;align-items:flex-start;gap:1.2rem}
}
@media (min-width:761px) and (max-width:1100px) and (min-height:541px){.m-text{font-size:min(4.35rem,6.2vw,7.4vh)}
}