/* Elpi Digital v3 — dark green ground, lime ink, Panchang + Switzer (self-hosted, Fontshare). */
@font-face{font-family:"Panchang";src:url("../fonts/panchang-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Panchang";src:url("../fonts/panchang-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-600.woff2") format("woff2");font-weight:600;font-display:swap}
@view-transition{navigation:auto}

:root{
  --bg:#10302a; --surface:#163a33; --step:#1e463e; --deep:#0b231f;
  --ink:#e6f5c4; --muted:#a8c79e; --accent:#e6f5c4; --accent-ink:#10302a;
  --error:#ffd166;
  --ground:var(--bg); --font-display:"Panchang","Arial Black",Impact,sans-serif; --font-text:"Switzer","Helvetica Neue",Arial,sans-serif;
  --display:var(--font-display); --text:var(--font-text);
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.1875rem,1.05rem + .55vw,1.5rem);
  --step-state:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
  --step-head:clamp(1.9rem,1.2rem + 3.6vw,4.6rem);
  --m:clamp(16px,2.2vw,32px);
  --gap:clamp(112px,13vw,200px);
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px;-webkit-tap-highlight-color:rgba(230,245,196,.2);overflow-x:clip}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:var(--step-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1.5px}
h1,h2,h3{margin:0;font-weight:inherit;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.skip{position:fixed;left:var(--m);top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.88;font-kerning:normal}
.h2{font-size:var(--step-head)}
.lead{font-size:var(--step-lead);line-height:1.35}
.muted{color:var(--muted)}
.ln{display:block}

/* buttons: one shape, square corners */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 24px;background:var(--ink);color:var(--bg);font:600 var(--step-body)/1 var(--text);text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease-out),background-color .2s ease,color .2s ease}
.btn:hover{background:#f6fce6}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--inv{background:var(--bg);color:var(--ink)}
.btn--inv:hover{background:#174238}
.btn--step{background:var(--step);color:var(--ink)}
.btn--step:hover{background:#275749}
.btn[disabled]{opacity:.6;cursor:progress}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;transition:text-underline-offset .2s var(--ease-out),color .2s ease}
.tlink:hover{text-underline-offset:.4em}

/* header */
.top{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:calc(env(safe-area-inset-top,0px) + 18px) 18px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1rem}
.brand svg{width:30px;height:30px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a:not(.btn){text-decoration:none;font-weight:500;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{min-height:46px;padding:0 18px}
.menu-btn{display:none;background:var(--ink);color:var(--bg);border:0;font:600 1rem var(--text);min-height:46px;padding:0 18px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{position:fixed;inset:0;z-index:60;overscroll-behavior:contain;background:var(--bg);flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:max(24px,env(safe-area-inset-top)) var(--m) 40px;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
  .nav[data-open]{visibility:visible;opacity:1;transition:opacity .3s ease}
  .nav a:not(.btn){font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(2rem,9vw,3.4rem);line-height:1.05}
  .nav .btn{margin-top:18px}
  .nav-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--m)}
}
@media (min-width:861px){.nav-close{display:none!important}}

/* cookie notice: an in-flow strip at the top, never covering the page */
.cookie{background:var(--surface);color:var(--ink)}
.cookie-in{display:flex;align-items:center;justify-content:space-between;gap:10px 32px;padding-block:calc(env(safe-area-inset-top,0px) + 8px) 8px;flex-wrap:wrap}
.cookie p{font-size:var(--step-small);line-height:1.5;max-width:80ch}
.cookie p b{font-weight:600}
.cookie p a{text-decoration:underline}
.cookie-btns{display:flex;gap:10px;flex:none}
.cookie .btn{min-height:42px;padding:0 16px;font-size:.9375rem}
@media (max-width:860px){.cookie-btns{width:100%}.cookie .btn{flex:1}}

/* ---------------- hero: the ring of example sites, the title under it ---------------- */
.hero{position:relative;overflow:clip;padding-bottom:clamp(40px,5vw,64px)}
.hero-ring{--w:clamp(220px,29vw,470px);--R:calc(var(--w) * 1.36);position:relative;height:clamp(260px,40svh,540px);perspective:1800px;perspective-origin:50% 24%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;margin-top:clamp(0px,1vw,12px)}
.hero-ring.is-drag{cursor:grabbing}
.ring{position:absolute;left:50%;top:43%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1)) rotateX(var(--tilt,-9deg)) rotateY(var(--a,-8deg))}
.ring-card{position:absolute;left:0;top:0;width:var(--w);display:block;transform:translate(-50%,-50%) rotateY(calc(var(--i) * 45deg)) translateZ(var(--R));transform-style:preserve-3d;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ring-face{position:relative;display:block;background:var(--deep);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ring-card::after{content:"";position:absolute;inset:0;background:rgba(230,245,196,.045);transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ring-shade{position:absolute;inset:0;background:#06140f;opacity:var(--shade,0);pointer-events:none}
.ring-card img{width:100%;aspect-ratio:16/10;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.ring-bar,.fc-bar,.pv-bar{display:flex;align-items:center;height:28px;padding:0 12px;background:var(--deep);color:var(--muted);font:500 .8125rem/1 var(--text);white-space:nowrap;overflow:hidden}
.ring-card:focus-visible{outline-offset:6px}
.ring-row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-top:clamp(4px,1vw,12px)}
.ring-cap{font-size:var(--step-small)}
.ring-cap b{font-weight:600}
.motion-btn{background:none;border:0;padding:6px 0;color:var(--ink);font:600 var(--step-small) var(--text);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.motion-btn:hover{text-underline-offset:.4em}
html.paused .mq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.motion-btn{display:none}}
.hero-copy{position:relative;z-index:2;margin-top:clamp(14px,2vw,28px)}
.hero-h{font-size:min(7.3vw,11.6svh);letter-spacing:-.04em;line-height:.86}
.hero-side{display:grid;gap:22px;margin-top:28px;max-width:38rem}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
@media (min-width:1000px){
  .hero-side{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);max-width:none;align-items:end;margin-top:26px}
  .hero-side .lead{grid-column:1/span 6}
  .hero-acts{grid-column:8/-1;justify-content:flex-end}
}
@media (min-width:761px) and (max-width:1100px){.hero-ring{--w:31vw}}
@media (max-width:760px){
  .hero-ring{--w:clamp(180px,52vw,240px);height:clamp(250px,42svh,340px);perspective:1100px}
  .hero-h{font-size:7.85vw}
}

/* marquee of trades with a small picture of each */
.marquee{overflow:clip;margin-top:clamp(40px,5vw,64px);padding-block:clamp(24px,3vw,40px)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq-set{display:flex;flex:none}
.mq-item{display:inline-flex;align-items:center;gap:.35em;padding-right:.45em;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(2.2rem,1.4rem + 3.4vw,5.6rem);line-height:1;white-space:nowrap}
.mq-item img{width:.9em;height:.9em;border-radius:50%;object-fit:cover}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .mq-track{animation-play-state:paused}

/* ---------------- the live thing: type your name, see your site ---------------- */
.build{padding-block:clamp(56px,6vw,96px) var(--gap)}
.statement{font-size:var(--step-state);line-height:1.25;max-width:58ch;font-weight:500;margin-bottom:clamp(56px,6vw,96px)}
.build-top{align-items:end;row-gap:20px;margin-bottom:clamp(36px,4vw,56px)}
.build-h{grid-column:1/span 8}
.build-intro{grid-column:9/-1;max-width:40ch}
@media (max-width:999px){.build-h,.build-intro{grid-column:1/-1}}
.statement .w{transition:color .3s ease}
.build-grid{align-items:start;row-gap:48px}
.build-ui{grid-column:1/span 5;display:grid;gap:26px}
.build-ui > p{max-width:40ch}
.build-stage{grid-column:6/-1;position:sticky;top:max(24px,6svh)}
.b-form{display:grid;gap:22px}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:600;font-size:1rem;padding:0}
.field legend{margin-bottom:10px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--step);border:0;border-radius:0;min-height:56px;padding:12px 16px;width:100%;transition:background-color .2s ease}
input:hover,select:hover,textarea:hover{background:#245246}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e6f5c4' stroke-width='2.4'/%3E%3C/svg%3E");background-position:calc(100% - 18px) 50%;background-repeat:no-repeat;padding-right:46px}
textarea{min-height:120px;resize:vertical}
.b-name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem);min-height:76px}
.b-name::placeholder{font-family:var(--text);text-transform:none;letter-spacing:0;font-weight:500;font-size:1.25rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0}
.chips label{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;background:var(--step);font-weight:500;font-size:1rem;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s var(--ease-out)}
.chips label:hover{background:#275749}
.chips label:active{transform:scale(.96)}
.chips input:checked + label{background:var(--ink);color:var(--bg)}
.chips input:focus-visible + label{outline:3px solid var(--ink);outline-offset:3px}
.b-send{background:var(--surface);padding:clamp(22px,2.4vw,34px);display:grid;gap:14px}
.b-send h3{font-size:var(--step-lead);font-weight:600}
.b-send-form{display:grid;gap:16px;margin-top:6px}
.b-send-form .btn{justify-self:start}
.check{display:grid!important;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-weight:400!important;cursor:pointer}
.check input{width:24px;height:24px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--ink)}
.check a{text-decoration:underline}
.err-msg{display:none;color:var(--error);font-size:.9375rem}
.has-err .err-msg{display:block}
.has-err input:not([type=checkbox]),.has-err textarea{outline:2px solid var(--error);outline-offset:-2px}
.opt{font-weight:400;color:var(--muted)}
.hp{position:absolute;left:-9999px}
.form-done:empty{display:none}
.form-done{background:var(--ink);color:var(--bg);padding:20px 22px}
.form-done h3{font-weight:600;font-size:1.25rem;margin-bottom:4px}

/* the preview: a browser and a phone, tilted in 3D, with the real example site inside */
.pv{position:relative;perspective:1600px;padding:0 11% 12% 0}
.pv-desk{position:relative;background:var(--deep);transform:rotateY(calc(-11deg + var(--ry,0deg))) rotateX(calc(5deg + var(--rx,0deg)));transform-origin:60% 50%;transition:transform .9s var(--ease)}
.pv-url::before{content:"https://";opacity:.55}
.pv-screen{position:relative;overflow:hidden;background:#000}
.pv-desk .pv-screen{aspect-ratio:1280/800}
.pv-phone{position:absolute;right:2%;bottom:0;width:27%;padding:8px;background:#060606;border-radius:30px;transform:translateZ(90px) rotateY(calc(-16deg + var(--ry,0deg) * 1.4)) rotateX(calc(4deg + var(--rx,0deg)));transition:transform .9s var(--ease)}
.pv-phone .pv-screen{aspect-ratio:390/844;border-radius:23px}
.pv-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:#000}
.pv-screen iframe.is-on{opacity:1}
.pv-still{width:100%;height:100%;object-fit:cover}
.pv.is-swap .pv-screen iframe{opacity:0}
.pv-note{margin-top:20px;font-size:var(--step-small);color:var(--muted)}
@media (max-width:999px){
  .build-ui,.build-stage{grid-column:1/-1}
  .build-stage{position:relative;top:auto;order:2}
  .build-ui{display:contents}
  .build-ui > *{grid-column:1/-1}
  .b-send{order:3}
}
@media (max-width:760px){
  .pv{padding:0 14% 26% 0}
  .pv-phone{width:40%;border-radius:22px;padding:6px}
  .pv-phone .pv-screen{border-radius:17px}
  .b-name{min-height:64px}
}

/* ---------------- scene: how guests arrive (fly-through) ---------------- */
.fly{padding-block:var(--gap) 0}
.fly-h{font-weight:600;font-size:var(--step-lead);margin-bottom:28px}
.fly-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px var(--m)}
.fly-item{display:grid;gap:18px;position:relative}
.fly-pic{position:relative;overflow:clip;background:var(--deep)}
.fly-pic img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fly-pic::after{content:"";position:absolute;inset:0;background:rgba(8,26,22,.38)}
.fly-word{position:absolute;left:4%;top:5%;z-index:2;font-size:clamp(2.6rem,6.4vw,6.4rem);color:var(--ink)}
.fly-text{max-width:44ch}
.fly-text b{display:block;font-weight:600;font-size:var(--step-lead);margin-bottom:4px}
@media (max-width:760px){.fly-list{grid-template-columns:1fr}}
.fly.is-live{padding:0}
.fly.is-live .scene-stage{display:grid;grid-template-rows:auto 1fr;perspective:1400px;perspective-origin:50% 45%}
.fly.is-live .fly-h{position:absolute;top:clamp(20px,3vw,36px);left:0;z-index:5;margin:0}
.fly.is-live .fly-list{display:block;position:absolute;inset:0;padding:0;transform-style:preserve-3d}
.fly.is-live .fly-item{position:absolute;left:50%;top:50%;width:min(78vw,128svh,1240px);display:block}
.fly.is-live .fly-word{font-size:clamp(4rem,13vw,13rem);left:50%;top:50%;white-space:nowrap;line-height:.8}
.fly.is-live .fly-text{position:absolute;left:3%;bottom:4%;z-index:3;background:var(--bg);padding:18px 22px;max-width:min(30rem,86%)}
@media (max-width:760px){
  .fly.is-live .fly-item{width:calc(100vw - 2 * max(var(--m),20px))}
  .fly.is-live .fly-pic img{aspect-ratio:4/5}
  .fly.is-live .fly-text{position:relative;left:auto;bottom:auto;margin-top:14px;padding:0;background:none;max-width:none}
  .fly.is-live .fly-word{font-size:clamp(3rem,17vw,5.4rem);top:40%}
}

/* ---------------- how we work ---------------- */
.proces{padding-block:var(--gap)}
.proces-copy{grid-column:1/span 6;display:grid;gap:34px;align-content:start}
.steps{display:grid;gap:26px;counter-reset:s}
.steps li{font-size:var(--step-body);max-width:46ch}
.steps b{display:block;font-weight:600;font-size:var(--step-lead);line-height:1.25;margin-bottom:6px}
.proces-note{max-width:46ch;color:var(--muted)}
.proces-pics{grid-column:8/-1;position:relative;min-height:clamp(460px,48vw,720px);perspective:1400px}
.pp{position:absolute;width:44%;padding:7px;background:#060606;border-radius:28px}
.pp img{width:100%;aspect-ratio:390/844;object-fit:cover;border-radius:21px}
.pp-1{left:0;top:6%;transform:rotateY(18deg) rotateZ(-4deg)}
.pp-2{left:28%;top:0;z-index:2;transform:translateZ(60px)}
.pp-3{right:0;top:12%;transform:rotateY(-18deg) rotateZ(4deg)}
@media (max-width:860px){
  .proces-copy,.proces-pics{grid-column:1/-1}
  .proces-pics{min-height:clamp(380px,110vw,560px);margin-top:48px}
  .pp{width:46%}
  .pp-2{left:27%}
}

/* ---------------- scene: examples (coverflow) ---------------- */
.flow{padding-block:var(--gap) 0}
.flow-head{display:grid;gap:18px;margin-bottom:40px}
.flow-head p{max-width:52ch}
.flow-hint{display:none;color:var(--muted);font-size:var(--step-small)}
.flow.is-rest .flow-hint{display:block}
.flow-view{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.flow-view::-webkit-scrollbar{display:none}
.flow-track{display:flex;gap:clamp(20px,3vw,48px);width:max-content;padding-bottom:12px}
.fc{width:clamp(290px,44vw,720px);scroll-snap-align:center;display:grid;gap:20px;align-content:start}
.fc-pics{position:relative;display:block;padding:0 13% 13% 0;text-decoration:none}
.fc-desk{display:block;background:var(--deep);transition:transform .6s var(--ease)}
.fc-desk img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fc-phone{position:absolute;right:0;bottom:0;width:25%;padding:5px;background:#060606;border-radius:18px;transition:transform .6s var(--ease)}
.fc-phone img{width:100%;aspect-ratio:390/844;object-fit:cover;border-radius:13px}
.fc-pics:hover .fc-desk{transform:translateY(-6px)}
.fc-pics:hover .fc-phone{transform:translateY(-14px) rotate(-2deg)}
.fc-text{display:grid;gap:8px;max-width:40ch}
.fc-text h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);line-height:.95}
.fc-niche{font-weight:600}
.fc-text .tlink{justify-self:start;margin-top:4px}
.flow.is-live{padding:0}
.flow.is-live .scene-stage{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(20px,3svh,40px)}
.flow.is-live .flow-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);align-items:end;margin-bottom:clamp(24px,4svh,48px)}
.flow.is-live .flow-head h2{grid-column:1/span 7}
.flow.is-live .flow-head p{grid-column:8/-1}
.flow.is-live .flow-view{overflow:visible;scroll-snap-type:none}
.flow.is-live .fc{width:clamp(300px,min(40vw,82svh),760px)}

/* ---------------- price: the one field of lime ---------------- */
.price{background:var(--ink);color:var(--bg);padding-block:var(--gap);margin-top:var(--gap)}
.price ::selection{background:var(--bg);color:var(--ink)}
.price :focus-visible{outline-color:var(--bg)}
.price-grid{row-gap:56px}
.price-h{grid-column:1/-1;font-size:clamp(1.8rem,7.3vw,10rem)}
.price-main{grid-column:1/span 6;display:grid;gap:26px;align-content:start}
.incl{display:grid;gap:10px}
.incl li{padding-left:28px;position:relative;font-weight:500}
.incl li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:var(--bg)}
.price-main .btn{justify-self:start}
.price-more{grid-column:8/-1;display:grid;gap:34px;margin:0;align-content:start}
.price-more div{display:grid;gap:4px}
.price-more dt{font-weight:600}
.price-more dd{margin:0;max-width:44ch}
.price-more .fig{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);line-height:1}
.price-more a{text-decoration:underline}
@media (max-width:860px){.price-main,.price-more{grid-column:1/-1}}

/* ---------------- faq ---------------- */
.faq{padding-block:var(--gap)}
.faq-h{grid-column:1/span 4;align-self:start;position:sticky;top:32px}
.qs{grid-column:6/-1;display:grid;gap:8px}
details{background:var(--surface)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;font-weight:600;font-size:var(--step-lead);line-height:1.3;transition:background-color .2s ease}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--step)}
.chev{flex:none;width:14px;height:14px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--ease)}
details[open] .chev{transform:rotate(225deg) translate(-3px,0)}
.a{padding:0 24px 24px;max-width:62ch}
details:not([open]) .a{display:none}
.a a{text-decoration:underline}
@media (max-width:860px){.faq-h,.qs{grid-column:1/-1}.faq-h{position:static;margin-bottom:28px}}

/* ---------------- contact ---------------- */
.contact{padding-block:clamp(24px,3vw,48px) clamp(64px,8vw,120px)}
.contact-grid{row-gap:48px}
.contact-intro{grid-column:1/span 5;display:grid;gap:24px;align-content:start}
.ticks{display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--ink)}
.form{grid-column:7/-1;display:grid;gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form > .btn{justify-self:start}
.mail-wrap{margin-top:clamp(72px,9vw,140px)}
.mail{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(1.5rem,6.4vw,7.4rem);text-decoration:none;white-space:nowrap;transition:opacity .2s ease}
.mail:hover{opacity:.82}
.mail-row{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--muted)}
.copy{background:none;border:0;color:var(--ink);font:600 1rem var(--text);text-decoration:underline;text-underline-offset:.25em;cursor:pointer;padding:6px 0}
@media (max-width:860px){
  .contact-intro,.form{grid-column:1/-1}
  .two{grid-template-columns:1fr}
  .mail{white-space:normal;font-size:clamp(1.6rem,9.2vw,3rem)}
  .mail .br{display:block}
}

/* ---------------- footer: the name returns at full width ---------------- */
.foot{background:var(--deep);padding-top:clamp(64px,7vw,104px);overflow:clip}
.foot-cols{row-gap:36px}
.foot-cols > div{grid-column:span 3;display:grid;gap:8px;align-content:start}
.foot-cols h2{font-weight:600;font-size:1rem;color:var(--muted);margin-bottom:4px}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{text-decoration:underline}
.foot-cols button{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.foot-cols button:hover{text-decoration:underline}
.foot-mark{padding:clamp(48px,8vw,120px) var(--m) 0}
.foot-word{display:block;width:100%;height:auto;fill:var(--ink);transform-origin:50% 100%}
.legal{font-size:var(--step-small);color:var(--muted);padding-block:24px calc(env(safe-area-inset-bottom,0px) + 28px);max-width:110ch}
.legal a{text-decoration:underline}
@media (max-width:860px){.foot-cols > div{grid-column:span 6}}

/* ---------------- legal pages ---------------- */
.doc{padding-block:clamp(56px,8vw,112px) var(--gap)}
.doc h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(2rem,7vw,6.4rem)}
.doc .meta{margin-top:24px;color:var(--muted);font-size:var(--step-small)}
.doc .meta a{text-decoration:underline}
.doc-body{margin-top:72px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m)}
.doc-nav{grid-column:1/span 3;position:sticky;top:24px;align-self:start;display:grid;gap:6px}
.doc-nav a{text-decoration:none;padding:6px 0;opacity:.85}
.doc-nav a:hover{opacity:1;text-decoration:underline}
.doc-text{grid-column:5/span 7;max-width:68ch}
.doc-text h2{font-size:var(--step-lead);font-weight:600;line-height:1.25;margin:56px 0 14px}
.doc-text h2:first-child{margin-top:0}
.doc-text p,.doc-text li{margin:0 0 12px}
.doc-text li{padding-left:22px;position:relative}
.doc-text li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ink)}
.doc-text a:not(.btn){text-decoration:underline}
.doc-text table{width:100%;border-collapse:collapse;margin:8px 0 18px}
.doc-text th,.doc-text td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--step);vertical-align:top}
.doc-text th{font-weight:600}
.table-wrap{overflow-x:auto}
.doc-form{margin-top:24px;background:var(--surface);padding:24px;display:grid;gap:18px}
.doc-form .btn{justify-self:start}
@media (max-width:860px){.doc-nav{display:none}.doc-text{grid-column:1/-1}.doc-body{margin-top:48px}}

/* ---------------- motion: entrances only for what the script marks; content is visible without it ---------------- */
.js.motion .rv{clip-path:inset(0 0 100% 0);transform:translateY(28px)}
.js.motion .rv.in{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js.motion .rv.done{clip-path:none}
.js.motion .hero-h .ln{overflow:clip;padding-bottom:.04em}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .mq-track{animation:none;flex-wrap:wrap;width:auto}
  .mq-set[aria-hidden]{display:none}
  .mq-set{flex-wrap:wrap}
  .js .rv{opacity:1!important;transform:none!important}
}