/* ================= tokens ================= */
:root{
  --bg:#121212;--bg-2:#0e0e0e;--ink:#f2f2f2;--muted:rgba(242,242,242,.6);--faint:rgba(242,242,242,.32);--line:rgba(255,255,255,.12);
  --accent:#d9ff3d;--accent-ink:#0f1400;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,3vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
html[data-theme=light]{color-scheme:light;--bg:#f4f4f2;--bg-2:#ececea;--ink:#121212;--muted:rgba(18,18,18,.62);--faint:rgba(18,18,18,.38);--line:rgba(18,18,18,.14);--accent:#b8e000;--accent-ink:#0f1400}
html[data-theme=light] .menu-pill,html[data-theme=light] .np,html[data-theme=light] .pillbtn{background:#121212;color:#f4f4f2}
html[data-theme=light] .np .dot,html[data-theme=light] .menu-pill .dot{background:#f4f4f2}
html[data-theme=light] .menu-pill .x::before,html[data-theme=light] .menu-pill .x::after{background:#f4f4f2}
html[data-theme=light] .np:hover,html[data-theme=light] .np.is-cur{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
html[data-theme=light] .pillbtn i{background:#f4f4f2;color:#121212}
html[data-theme=light] #curtain{background:#f4f4f2}
html[data-theme=light] .aurora{opacity:.55}
html[data-theme=light] #hero .veil{background:radial-gradient(ellipse at 50% 55%,transparent 25%,rgba(244,244,242,.92) 75%)}
html[data-theme=light] #hero .reel{background:rgba(18,18,18,.06);border-color:rgba(18,18,18,.18)}
html[data-theme=light] #case .frame{background:#e6e6e3}
html[data-theme=light] #case .cap span{color:rgba(18,18,18,.7)}
html[data-theme=light] #team .ava{background:linear-gradient(160deg,#e9e9e6,#dcdcd8)}
html[data-theme=light] #team .ava b{color:rgba(18,18,18,.1)}
html[data-theme=light] #studio .glyph{color:#d6d6d2}
html[data-theme=light] #studio .lead{color:rgba(18,18,18,.5)}
html[data-theme=light] #modal .panel{background:#fff}
html[data-theme=light] #modal input,html[data-theme=light] #modal textarea{background:#f4f4f2}
html[data-theme=light] #modal{background:rgba(244,244,242,.6)}
html[data-theme=light] .menu-pill:hover .dot,html[data-theme=light] .np:hover .dot{background:var(--accent)}
html[data-theme=light] header.site,html[data-theme=light] .side{mix-blend-mode:normal}
html[data-theme=light] #values.lime .v-sticky{color:#121212}
.theme-btn{display:inline-flex;align-items:center;gap:8px;color:var(--muted);transition:color .3s}
.theme-btn:hover{color:var(--ink)}
.theme-btn i{width:12px;height:12px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .5s var(--ease)}
html[data-theme=light] .theme-btn i{transform:rotate(180deg)}
header .right{justify-self:end;display:inline-flex;align-items:center;gap:22px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:16px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:99px}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= curtain ================= */
#curtain{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;transition:transform .9s var(--ease-out),opacity .6s}
#curtain.away{transform:translateY(-100%);opacity:0;pointer-events:none}
#curtain .wm{font:500 clamp(48px,9vw,120px)/1 var(--sans);letter-spacing:-.05em;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
#curtain.show .wm{opacity:1;transform:none}
.flip{display:inline-block;transform:scaleX(-1)}

/* ================= header ================= */
header.site{position:fixed;inset-inline:0;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gutter);mix-blend-mode:difference;pointer-events:none}
header.site>*{pointer-events:auto}
header .book{justify-self:start;display:inline-flex;align-items:center;gap:8px}
header .book .u{border-bottom:1px solid currentColor;padding-bottom:2px;transition:border-color .3s}
header .book:hover .u{border-color:var(--accent)}
header .logo{justify-self:center;font:600 20px/1 var(--sans);letter-spacing:-.04em}
header .clock{display:inline-flex;gap:10px;color:var(--muted)}
header .clock b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.side{position:fixed;top:50%;transform:translateY(-50%);z-index:100;mix-blend-mode:difference}
.side.l{left:var(--gutter)}.side.r{right:var(--gutter)}
.menu-pill{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#111;border-radius:99px;padding:9px 16px;transition:transform .35s var(--ease)}
.menu-pill:hover{transform:scale(1.05)}
.menu-pill i{width:7px;height:7px;border-radius:50%;background:#111;transition:background .3s}
.menu-pill:hover i{background:var(--accent)}
@media (max-width:760px){header.site{grid-template-columns:1fr auto 1fr}header .clock{display:none}header .right{gap:0}.side.l{display:none}.side.r{top:auto;bottom:22px;transform:none}}

/* ================= reveal utils ================= */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.w{display:inline-block;opacity:.14;transform:translateY(.35em);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.w.on{opacity:1;transform:none}
.scrub .w{transition:opacity .25s linear;transform:none}
.line{height:1px;background:var(--line)}

/* ================= aurora ================= */
.aurora{position:absolute;inset:-20%;z-index:0;filter:blur(80px);opacity:.38;pointer-events:none}
.aurora i{position:absolute;width:55%;height:55%;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){left:5%;top:10%;background:radial-gradient(circle,rgba(70,60,140,.9),transparent 65%)}
.aurora i:nth-child(2){right:0;top:20%;background:radial-gradient(circle,rgba(120,50,80,.85),transparent 65%);animation-delay:-7s}
.aurora i:nth-child(3){left:30%;bottom:-5%;background:radial-gradient(circle,rgba(217,255,61,.45),transparent 65%);animation-delay:-14s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,-8%) scale(1.15)}100%{transform:translate(-10%,10%) scale(.95)}}

/* ================= hero ================= */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--gutter) 0;overflow:hidden;isolation:isolate}
#hero .veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 55%,transparent 25%,rgba(18,18,18,.9) 75%)}
#hero .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px;margin-bottom:auto;margin-top:auto}
#hero h1{font:400 clamp(44px,7.4vw,118px)/1 var(--sans);letter-spacing:-.045em;max-width:14ch}
#hero .lead{max-width:52ch;color:var(--muted);font-size:clamp(15px,1.2vw,18px)}
#hero .reel{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:99px;padding:12px 18px;transition:background .3s,transform .3s var(--ease)}
#hero .reel::before{content:"";width:0;height:0;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
#hero .reel:hover{background:rgba(255,255,255,.16);transform:scale(1.04)}
#hero .scrollfor{position:absolute;left:50%;bottom:26vh;transform:translateX(-50%);z-index:2;color:var(--faint)}
#hero .wordmark{position:relative;z-index:2;width:100%;text-align:center;font:500 clamp(84px,18.5vw,300px)/.82 var(--sans);letter-spacing:-.06em;white-space:nowrap;margin-bottom:-.1em;color:var(--ink);will-change:transform}
#hero .wordmark .flip{color:var(--accent)}

/* ================= featured cases (sticky swap, kompakt) ================= */
#case{position:relative}
#case .track{height:300svh}
#case .sticky{position:sticky;top:0;height:100svh;overflow:hidden}
#case .head{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:0;padding:0 var(--gutter);transition:opacity .5s}
#case .head h2{font:400 clamp(34px,4.7vw,68px)/1.05 var(--sans);letter-spacing:-.04em}
#case.showing .head{opacity:.12}
#case .wrap{position:absolute;left:50%;top:50%;width:min(47vw,675px);aspect-ratio:9/8;transform:translate(-50%,-50%);z-index:1}
#case .frame{position:absolute;inset:0;overflow:hidden;background:#1a1a1a;opacity:0;transform:scale(1.1);transition:opacity .55s var(--ease),transform .9s var(--ease);pointer-events:none}
#case .frame.on{opacity:1;transform:none;pointer-events:auto}
#case .frame.out{opacity:0;transform:scale(.94)}
#case .frame .img{position:absolute;inset:0;background-size:cover;background-position:center}
#case .frame a{position:absolute;inset:0}
#case .cap{position:absolute;left:-36px;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;gap:24px;opacity:0;transition:opacity .4s .2s;pointer-events:none}
#case .cap.on{opacity:1}
#case .cap b{font:400 24px/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
#case .cap span{color:rgba(255,255,255,.75);text-align:right}
#case .counter{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);color:var(--faint);z-index:2}
#case .allwork{position:absolute;right:var(--gutter);bottom:26px;z-index:2}
.pillbtn{display:inline-flex;align-items:center;gap:14px;background:#fff;color:#121212;border-radius:99px;padding:6px 6px 6px 22px;font:400 18px/1 var(--sans);letter-spacing:-.01em;transition:transform .4s var(--ease)}
.pillbtn i{width:36px;height:36px;border-radius:50%;background:#121212;color:#fff;display:grid;place-items:center;font-style:normal;font-size:14px;transition:transform .4s var(--ease),background .3s}
.pillbtn:hover{transform:scale(1.03)}.pillbtn:hover i{background:var(--accent);color:var(--accent-ink);transform:translateX(3px)}
@media (max-width:760px){#case .track{height:260svh}#case .wrap{width:80vw;top:46%}#case .cap{left:0;top:auto;bottom:-58px;transform:none;flex-direction:column;align-items:flex-start;gap:6px}#case .cap span{text-align:left}#case .allwork{right:auto;left:var(--gutter);bottom:22px}#case .counter{left:auto;right:var(--gutter);transform:none;bottom:36px}}

/* ================= statement (scrub) ================= */
#statement{padding:20vh var(--gutter);max-width:1100px;margin:0 auto;text-align:center}
#statement p{font:400 clamp(30px,4.6vw,72px)/1.05 var(--sans);letter-spacing:-.04em}
#statement .small{margin-top:40px;color:var(--muted);font-size:clamp(15px,1.2vw,19px);max-width:56ch;margin-inline:auto;letter-spacing:0;line-height:1.5}
#statement .small .w{opacity:.14}

/* ================= services ================= */
#services{padding:0 var(--gutter) 16vh}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:22px}
.sec-head h2{font:400 clamp(28px,3.4vw,52px)/1 var(--sans);letter-spacing:-.04em}
.sec-head .mono{color:var(--faint)}
.svc li{border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:80px 1fr 1fr 48px;gap:24px;align-items:center;padding:34px 0;transition:padding .45s var(--ease)}
.svc a:hover{padding-left:18px}
.svc .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.svc h3{font:400 clamp(26px,3.2vw,48px)/1 var(--sans);letter-spacing:-.035em;transition:color .3s}
.svc a:hover h3{color:var(--accent)}
.svc p{color:var(--muted);font-size:15px;max-width:44ch}
.svc .arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.svc a:hover .arr{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}
.svc .arr svg{width:16px;height:16px}
@media (max-width:760px){.svc a{grid-template-columns:44px 1fr 40px}.svc p{grid-column:2;margin-top:-8px}.svc .arr{width:36px;height:36px}}

/* ================= values (färgskifte, ett ord i taget) ================= */
#values{position:relative}
#values .v-track{height:520svh}
#values .v-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:110px var(--gutter) 40px;color:var(--ink);transition:color .4s}
#values .v-bg{position:absolute;inset:0;background:var(--accent);opacity:var(--bg,0);pointer-events:none;z-index:0}
#values .v-sticky>*:not(.v-bg){position:relative;z-index:1}
#values.lime .v-sticky{color:#121212}
#values .v-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
#values .v-top .mono{opacity:.55}
#values .v-stage{position:relative;display:grid;place-items:center;text-align:center}
#values .v-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0 var(--gutter);opacity:0;transform:translateY(60px) scale(.96);filter:blur(10px);transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s var(--ease);pointer-events:none}
#values .v-item.on{opacity:1;transform:none;filter:none}
#values .v-item.past{transform:translateY(-60px) scale(1.02)}
#values .v-item h3{font:400 clamp(44px,9vw,150px)/.95 var(--sans);letter-spacing:-.05em;max-width:12ch}
#values .v-item p{max-width:46ch;font-size:clamp(15px,1.3vw,20px);opacity:.7}
#values .v-num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 clamp(200px,42vw,640px)/1 var(--sans);letter-spacing:-.06em;opacity:.05;pointer-events:none;font-variant-numeric:tabular-nums}
#values .v-prog{display:flex;align-items:center;gap:16px}
#values .v-prog i{flex:1;height:1px;background:currentColor;opacity:.2;position:relative}
#values .v-prog i::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:calc(var(--p,0)*100%);background:currentColor;opacity:1}
#values .v-prog .mono{opacity:.6}
@media (max-width:760px){#values .v-track{height:460svh}#values .v-sticky{padding-top:90px}}

/* ================= testimonials (minimal) ================= */
#voices{padding:0 var(--gutter) 16vh}
#voices .sec-head h2{font-size:clamp(20px,1.8vw,26px)}
#voices .stage{position:relative;min-height:9rem;max-width:56ch}
#voices blockquote{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
#voices blockquote.on{opacity:1;transform:none;pointer-events:auto}
#voices q{display:block;font:400 clamp(16px,1.25vw,19px)/1.5 var(--sans);letter-spacing:-.01em;color:var(--muted);quotes:"“" "”"}
#voices q::before{content:"”";display:inline-block;font:italic 400 1.4em/0 var(--serif);color:var(--accent);margin-right:.35em;vertical-align:-.15em}
#voices q::after{content:none}
#voices .who{margin-top:14px;color:var(--faint)}
#voices .nav{display:flex;gap:6px;margin-top:22px}
#voices .nav button{width:22px;height:2px;border-radius:99px;background:var(--line);transition:background .3s}
#voices .nav button.on{background:var(--accent)}
@media (max-width:760px){#voices .stage{min-height:12rem}}

/* ================= clients marquee ================= */
#clients{padding:0 0 18vh;overflow:hidden}
#clients .row{display:flex;align-items:center;gap:36px;white-space:nowrap;animation:marq 40s linear infinite;width:max-content;padding:8px 0}
#clients .row i{font-size:10px}
#clients .row span{font:400 clamp(16px,1.6vw,22px)/1 var(--sans);letter-spacing:-.01em;color:var(--faint);transition:color .3s}
#clients .row span:hover{color:var(--ink)}
#clients .row i{color:var(--accent);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}
#clients .cap{padding:0 var(--gutter) 24px;color:var(--faint)}

/* ================= team ================= */
#team{padding:0 var(--gutter) 18vh}
#team .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#team article{border-top:1px solid var(--line);padding-top:22px}
#team .ava{aspect-ratio:4/5;border-radius:6px;background:linear-gradient(160deg,#1b1b1b,#2a2a2a);display:grid;place-items:center;margin-bottom:18px;overflow:hidden;position:relative}
#team .ava b{font:500 clamp(60px,8vw,120px)/1 var(--sans);letter-spacing:-.06em;color:rgba(255,255,255,.08)}
#team .ava::after{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,255,61,.18),transparent 65%)}
#team h3{font:400 24px/1.1 var(--sans);letter-spacing:-.03em}
#team .role{color:var(--accent);margin:6px 0 12px}
#team p{color:var(--muted);font-size:15px}
#team a{display:inline-block;margin-top:12px;color:var(--faint);border-bottom:1px solid var(--line)}
@media (max-width:760px){#team .grid{grid-template-columns:1fr}}

/* ================= studio / cta (Uncommon) ================= */
#studio{position:relative;padding:0 var(--gutter) 8vh;overflow:hidden;min-height:100svh}
#studio h2{font:400 clamp(30px,4.7vw,68px)/1.1 var(--sans);letter-spacing:-.04em;max-width:18ch}
#studio .lead{font:400 clamp(30px,4.7vw,68px)/1.1 var(--sans);letter-spacing:-.04em;color:rgba(242,242,242,.55);max-width:18ch;margin:0 0 18vh}
#studio .lead .w{opacity:.18}
#studio .big{display:inline-flex;align-items:center;gap:16px;font:400 clamp(30px,3.4vw,48px)/1 var(--sans);letter-spacing:-.03em;border-bottom:1px solid var(--ink);padding-bottom:10px;transition:border-color .3s,color .3s;text-align:left}
#studio .big:hover{border-color:var(--accent);color:var(--accent)}
#studio .big .arr{font-family:var(--mono);font-size:.7em;color:var(--ink)}
#studio .hours{margin-top:26px;color:var(--faint)}
#studio .glyph{position:absolute;right:-6vw;top:-2vh;writing-mode:vertical-rl;font:500 clamp(240px,34vw,520px)/.78 var(--sans);letter-spacing:-.06em;color:#c5c5c5;pointer-events:none;user-select:none;will-change:transform;z-index:0;white-space:nowrap}
#studio>*:not(.glyph){position:relative;z-index:1}
footer.site{position:relative;padding:4vh var(--gutter) 40px}
footer .cols{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:40px;align-items:end;padding-top:20vh}
footer .badgecol{justify-self:end}
footer .cols>div:first-child{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
footer .badge{display:inline-grid;border:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
footer .badge span{padding:8px 12px;border-bottom:1px solid var(--line)}
footer .badge div{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
footer .badge div>*{padding:10px 12px;border-bottom:0}
footer .badge div>*+*{border-left:1px solid var(--line)}
footer .badge .g{font-size:20px;line-height:1;color:var(--accent)}
footer .badge .v{writing-mode:vertical-rl;transform:rotate(180deg);padding:6px}
footer ul li{margin:4px 0}
footer ul a{font-size:18px;letter-spacing:-.01em;border-bottom:1px solid var(--line);transition:border-color .3s}
footer ul a:hover{border-color:var(--accent)}
footer .mail{display:inline-block;margin-top:22px;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;border-bottom:1px solid var(--ink)}
footer .ack{color:var(--muted);font-size:14px;max-width:40ch}
footer .ack b{display:block;color:var(--ink);font-weight:500;margin-bottom:6px}
footer .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;color:var(--faint)}
footer .legal a{border-bottom:1px solid transparent}footer .legal a:hover{border-color:var(--accent)}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}footer .badgecol{justify-self:start}#studio .glyph{font-size:44vw;top:auto;bottom:-6vh;right:-10vw}#studio .lead{margin-bottom:10vh}}
@media (max-width:600px){footer .cols{grid-template-columns:1fr}}

/* ================= menu strip (Uncommon-mekanik) ================= */
.side.r{mix-blend-mode:normal}
#navStrip{display:flex;align-items:center;gap:6px}
#strip{display:flex;align-items:center;gap:6px;overflow:hidden;padding:4px 0 4px 6px;margin-right:-6px}
.np,.menu-pill{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-width:88px;height:24px;padding:0 9px;border-radius:12px;background:#fff;color:#121212;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .6s cubic-bezier(.165,.84,.44,1),color .6s cubic-bezier(.165,.84,.44,1),box-shadow .4s}
.menu-pill{transform:none}
.menu-pill:hover{transform:none}
.np{will-change:transform;transform:translateX(calc(var(--n)*110%));transition:transform .55s cubic-bezier(.165,.84,.44,1) calc(var(--n)*45ms)}
#navStrip.open .np{transform:none;transition-delay:calc(var(--i)*55ms)}
.np.is-cur{box-shadow:inset 0 0 0 1px rgba(18,18,18,.35)}
.mask{display:inline-block;overflow:hidden;height:12px;line-height:12px;vertical-align:top}
.mask span{display:block;transition:transform .5s cubic-bezier(.165,.84,.44,1)}
.mask .clone{transform:translateY(110%);margin-top:-12px}
.np:hover .mask span:first-child,.menu-pill:hover .mask span:first-child{transform:translateY(-110%)}
.np:hover .mask .clone,.menu-pill:hover .mask .clone{transform:translateY(0)}
.np .dot,.menu-pill .dot{width:8px;height:8px;border-radius:50%;background:#121212;transition:background .6s cubic-bezier(.165,.84,.44,1),transform .4s var(--ease)}
.np:hover{box-shadow:inset 0 0 0 1px rgba(18,18,18,.3)}
.np:hover .dot{background:var(--accent);transform:scale(1.25)}
.menu-pill .x,.menu-pill:hover .x{background:transparent;border-radius:0}
.menu-pill .x{position:absolute;right:9px;top:50%;width:8px;height:8px;transform:translateY(-50%) rotate(45deg) scale(0);transition:transform .4s var(--ease)}
.menu-pill .x::before,.menu-pill .x::after{content:"";position:absolute;background:#121212;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px}
.menu-pill .x::after{transform:rotate(90deg)}
#navStrip.open .menu-pill .dot{transform:scale(0)}
#navStrip.open .menu-pill .x{transform:translateY(-50%) rotate(45deg) scale(1)}
#navStrip.open .menu-pill .mask span:first-child{transform:translateY(-110%)}
#navStrip.open .menu-pill .mask .clone{transform:translateY(0)}
@media (hover:none){.np:hover .mask span:first-child,.menu-pill:hover .mask span:first-child{transform:none}.np:hover .mask .clone,.menu-pill:hover .mask .clone{transform:translateY(110%)}.np:hover .dot,.menu-pill:hover .dot{background:#121212;transform:none}.np:hover{box-shadow:none}}
#navStrip.open .menu-pill:hover .mask span:first-child{transform:translateY(-110%)}
@media (max-width:760px){
  #navStrip{flex-direction:column;align-items:flex-end}
  #strip{flex-direction:column;align-items:flex-end;padding:6px 0 0;margin:0;pointer-events:none}
  .np{pointer-events:auto;transform:translateY(calc(100% + 10px));opacity:0;transition:transform .45s cubic-bezier(.165,.84,.44,1) calc(var(--n)*30ms),opacity .3s ease calc(var(--n)*30ms)}
  #navStrip.open .np{transform:none;opacity:1;transition-delay:calc(var(--i)*55ms)}
  #navStrip:not(.open) #strip{pointer-events:none}
}

/* ================= booking modal ================= */
#modal{position:fixed;inset:0;z-index:160;display:none;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(16px);opacity:0;transition:opacity .35s var(--ease)}
#modal.open{display:flex}#modal.show{opacity:1}
#modal .panel{position:relative;width:100%;max-width:560px;background:#171717;border:1px solid var(--line);border-radius:20px;padding:28px;transform:translateY(28px);transition:transform .5s var(--ease-out)}
#modal.show .panel{transform:none}
#modal .x{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:background .3s,color .3s}
#modal .x:hover{background:#fff;color:#111}
#modal .kick{color:var(--accent);margin-bottom:10px}
#modal h2{font:400 clamp(24px,2.6vw,34px)/1.1 var(--sans);letter-spacing:-.035em;margin-bottom:22px;padding-right:44px}
#modal form{display:flex;flex-direction:column;gap:14px}
#modal label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#modal input,#modal textarea{width:100%;background:#0f0f0f;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-family:var(--sans);font-size:15px;color:var(--ink);outline:0;transition:border-color .2s;text-transform:none;letter-spacing:0;resize:none}
#modal input:focus,#modal textarea:focus{border-color:var(--accent)}
#modal .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
#modal .note{color:var(--faint);font-size:13px}
#modal .send{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:12px 20px;font-weight:500;transition:transform .3s var(--ease)}
#modal .send:hover{transform:scale(1.04)}
#modal .ok{display:none;text-align:center;padding:24px 0 8px}
#modal .ok h2{padding:0}#modal .ok p{color:var(--muted);max-width:36ch;margin:0 auto 22px}
#modal.done form,#modal.done .head{display:none}#modal.done .ok{display:block}
@media (min-width:640px){#modal{align-items:center}}

/* ================= undersidor ================= */
.page-hero{position:relative;min-height:72svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gutter) 8vh;overflow:hidden;isolation:isolate}
.page-hero .aurora{opacity:.28}
.page-hero .crumbs{display:flex;gap:10px;color:var(--faint);margin-bottom:26px;position:relative;z-index:1}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero h1{position:relative;z-index:1;font:400 clamp(44px,7vw,112px)/.98 var(--sans);letter-spacing:-.045em;max-width:14ch}
.page-hero .lead{position:relative;z-index:1;margin-top:28px;max-width:56ch;color:var(--muted);font-size:clamp(16px,1.3vw,20px)}
.page-hero .kick{position:relative;z-index:1;color:var(--accent);margin-bottom:18px}
.sec{padding:0 var(--gutter) 14vh}
.sec .sec-head{padding-bottom:26px}
.prose{max-width:62ch;color:var(--muted);font-size:clamp(16px,1.25vw,19px)}
.prose p+p{margin-top:1.2em}
.prose strong{color:var(--ink);font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.two .sticky{position:sticky;top:120px}
.two h2{font:400 clamp(28px,3.4vw,52px)/1.02 var(--sans);letter-spacing:-.04em;max-width:14ch}
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.deliver li{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding:16px 0;font-size:17px}
.deliver li b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent);font-weight:400}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps li{border-top:1px solid var(--line);padding-top:18px}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
.steps h3{font:400 clamp(20px,1.8vw,26px)/1.1 var(--sans);letter-spacing:-.03em;margin:12px 0 8px}
.steps p{color:var(--muted);font-size:15px}
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:400 clamp(18px,1.6vw,24px)/1.2 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--muted);max-width:60ch}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related a{border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:170px;transition:border-color .3s,transform .4s var(--ease)}
.related a:hover{border-color:var(--accent);transform:translateY(-4px)}
.related a .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent)}
.related a h3{font:400 clamp(20px,1.7vw,26px)/1.1 var(--sans);letter-spacing:-.03em}
.related a p{color:var(--muted);font-size:14px;margin-top:auto}
.casegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.casegrid a{display:block}
.casegrid .img{aspect-ratio:9/8;border-radius:6px;background:#1a1a1a;background-size:cover;background-position:center;transition:transform .8s var(--ease-out)}
.casegrid a:hover .img{transform:scale(1.02)}
.casegrid h3{font:400 24px/1.1 var(--sans);letter-spacing:-.02em;margin-top:16px}
.casegrid .mono{display:block;color:var(--faint);margin-top:6px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price li{border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:14px}
.price li.hot{border-color:var(--accent)}
.price h3{font:400 24px/1.1 var(--sans);letter-spacing:-.02em}
.price .sum{font:400 clamp(30px,3vw,44px)/1 var(--sans);letter-spacing:-.04em}
.price .sum small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);margin-left:6px}
.price ul li{border:0;padding:6px 0;border-top:1px solid var(--line);border-radius:0;display:block;font-size:15px;color:var(--muted)}
.cta-band{margin:0 var(--gutter) 10vh;border-top:1px solid var(--line);padding-top:8vh}
.cta-band h2{font:400 clamp(30px,4.7vw,68px)/1.05 var(--sans);letter-spacing:-.04em;max-width:18ch}
.cta-band .big{display:inline-flex;align-items:center;gap:16px;margin-top:36px;font:400 clamp(26px,3vw,44px)/1 var(--sans);letter-spacing:-.03em;border-bottom:1px solid var(--ink);padding-bottom:10px;transition:border-color .3s,color .3s}
.cta-band .big:hover{border-color:var(--accent);color:var(--accent)}
.cta-band .big .arr{font-family:var(--mono);font-size:.7em}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px}
.contact-grid form{display:flex;flex-direction:column;gap:14px}
.contact-grid label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.contact-grid input,.contact-grid textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-family:var(--sans);font-size:15px;color:var(--ink);outline:0;text-transform:none;letter-spacing:0;resize:none}
.contact-grid input:focus,.contact-grid textarea:focus{border-color:var(--accent)}
.contact-grid .send{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:12px 20px;font-weight:500}
.contact-grid .info{display:flex;flex-direction:column;gap:22px;color:var(--muted)}
.contact-grid .info b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.contact-grid .info a{border-bottom:1px solid var(--line)}
.legal-text{max-width:70ch;color:var(--muted)}
.legal-text h2{font:400 clamp(22px,2.2vw,30px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink);margin:2.2em 0 .7em}
.legal-text p+p{margin-top:1em}
.legal-text ul{padding-left:1.2em;list-style:disc}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:34px}.two .sticky{position:static}.steps{grid-template-columns:1fr 1fr}.related{grid-template-columns:1fr}.deliver{grid-template-columns:1fr}.casegrid{grid-template-columns:1fr}.price{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}

/* ---- citat på tjänstesidor ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quotes blockquote{border-top:1px solid var(--line);padding-top:18px}
.quotes blockquote p{font-size:16px;line-height:1.5;color:var(--muted)}
.quotes blockquote footer{margin-top:12px;color:var(--faint)}
.steps li:nth-child(n+5){margin-top:0}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}