/* Atelier A&V. Lagret av papper, bläck och guld kommer från logotypen; sidan följer glaset. */
:root {
  --paper: #f1ece3; --white: #fbf9f5; --sand: #ddd5c8; --ink: #1c1815;
  --muted: #5f564b; --gold: #b8924e; --gold-deep: #7a5c26;
  --blush: #f0dcd8; --sage: #dbdfca; --motif: #e6bdb7; --line: rgba(28, 24, 21, .16);
  --display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Jost", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --gut: max(20px, min(5vw, 80px)); --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@font-face { font-family: "Italiana"; src: url(../fonts/italiana-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 300; src: url(../fonts/jost-latin-300-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 400; src: url(../fonts/jost-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 500; src: url(../fonts/jost-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); font-display: swap; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 clamp(16px, 1.15vw, 18px)/1.65 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; position: relative; }
/* papperskorn över hela sidan */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .002em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
p { margin: 0; }
b, strong { font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--white); padding: 10px 16px; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.eyebrow { display: block; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; color: var(--gold-deep); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 52px; padding: 0 32px; background: var(--ink); color: var(--white); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .4s; border: 1px solid var(--ink); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #a9823f, #dcbd7f 50%, #a9823f); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover { color: var(--ink); } .btn:hover::before { transform: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; }
.text-link { display: inline-block; text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--gold), var(--gold)) 0 100%/100% 1px no-repeat; transition: background-size .5s var(--ease); font-weight: 400; }
.text-link:hover { background-size: 30% 1px; }
.link-btn { font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.specks { position: absolute; pointer-events: none; fill: var(--gold); opacity: .75; }

[data-reveal] { transition: opacity 1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(26px); }

/* Intro */
#intro { display: none; }
.intro #intro { display: grid; position: fixed; inset: 0; z-index: 150; place-items: center; background: var(--paper); transition: transform .85s cubic-bezier(.8, 0, .2, 1); }
#intro.leave { transform: translateY(-100%); }
.intro-mark { width: min(70vw, 560px); position: relative; animation: intro-up 1.1s var(--ease) both; }
.intro-mark svg { width: 100%; height: auto; animation: intro-clip 1.15s cubic-bezier(.7, 0, .2, 1) both; }
.intro-mark i { display: block; height: 1px; margin-top: 18px; background: var(--gold); transform-origin: left; animation: intro-line 1.15s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes intro-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes intro-line { from { transform: scaleX(0); } }
@keyframes intro-up { from { opacity: .4; transform: translateY(8px); } }

/* Sidhuvud: företagsnamnet högst upp i mitten */
.site-head { position: fixed; top: 0; inset-inline: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gut) 16px; transition: background .5s, padding .5s, box-shadow .5s; }
.site-head.scrolled { background: rgba(241, 236, 227, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: calc(10px + env(safe-area-inset-top, 0px)) 10px; box-shadow: 0 1px 0 var(--line); }
.brand { display: block; width: clamp(150px, 19vw, 262px); view-transition-name: brand; color: var(--ink); transition: width .5s var(--ease); }
.scrolled .brand { width: clamp(130px, 14vw, 196px); }
.brand svg { width: 100%; height: auto; }
.head-nav { display: flex; gap: clamp(16px, 2.2vw, 36px); align-items: center; }
.head-nav a, .head-order, .cart-btn { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; font-weight: 400; position: relative; padding-block: 6px; }
.head-nav a::after, .head-order::after { content: ""; position: absolute; left: 0; right: .18em; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.head-nav a:hover::after, .head-order:hover::after, [aria-current=page]::after { transform: scaleX(1) !important; }
.head-right { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; }
.cart-btn b, #cart h2 b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line); border-radius: 22px; font-size: .72rem; letter-spacing: 0; transition: background .4s, color .4s, border-color .4s; font-family: var(--body); }
.cart-btn b.has, #cart h2 b.has { background: var(--ink); color: var(--white); border-color: var(--ink); }
.menu-btn { display: none; width: 34px; height: 34px; position: relative; }
.menu-btn span { position: absolute; left: 4px; right: 4px; height: 1px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn span:first-child { top: 13px; } .menu-btn span:last-child { top: 21px; }
.menu-open .menu-btn span:first-child { top: 17px; transform: rotate(45deg); } .menu-open .menu-btn span:last-child { top: 17px; transform: rotate(-45deg); }
#mobile-nav { position: fixed; inset: 0; z-index: 55; background: var(--paper); display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 90px var(--gut) 40px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s cubic-bezier(.8, 0, .2, 1), visibility 0s .7s; }
.menu-open #mobile-nav { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.8, 0, .2, 1); }
#mobile-nav nav { display: grid; gap: 10px; } #mobile-nav a { font: 400 2.6rem/1.2 var(--display); text-decoration: none; }
#mobile-nav p { color: var(--muted); font-size: .92rem; }

/* Guldtråden */
#thread { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; pointer-events: none; overflow: hidden; }
#thread svg { width: 100%; }
#thread-path { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; opacity: .9; }
.bud { fill: var(--gold); opacity: 0; transition: opacity .8s; }
.bud path { fill: var(--sage); stroke: var(--gold); stroke-width: .8; transform-box: fill-box; }
.bud.on { opacity: 1; }

/* Berättelsen på startsidan */
.story { position: relative; }
.js .story:not(.static) { height: 540vh; height: 540svh; }
.story-stick { position: relative; overflow: hidden; }
.js .story:not(.static) .story-stick { position: sticky; top: 0; height: 100vh; height: 100svh; }
#hero-glass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
#hero-glass.in { opacity: 1; }
.hero-fallback { position: absolute; left: 50%; top: 50%; height: 80%; width: auto; max-width: none; transform: translate(-50%, -47%); z-index: 1; transition: opacity 1s; }
.js .story:not(.static) .hero-fallback { opacity: 0; }
.story-steps { position: relative; z-index: 3; }
.js .story:not(.static) .story-steps { position: absolute; inset: 0; }
.js .story:not(.static) .step { position: absolute; opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.js .story:not(.static) .step.on { opacity: 1; transform: none; pointer-events: auto; }
.step-0 { inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 30vw) minmax(0, 1fr); align-items: center; gap: 0; padding: 90px var(--gut) 40px; }
.step-0 h1 { grid-column: 1; font-size: clamp(2.4rem, 4.5vw, 4.9rem); }
.step-side { grid-column: 3; justify-self: end; max-width: 330px; display: grid; gap: 26px; justify-items: start; }
.scroll-hint { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 12px; }
.scroll-hint::before { content: ""; width: 1px; height: 30px; background: var(--gold); animation: hint 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.step-1, .step-2, .step-3 { right: var(--gut); top: 50%; translate: 0 -50%; width: min(38vw, 520px); display: grid; gap: 20px; justify-items: start; }
.story-progress { position: absolute; z-index: 4; right: var(--gut); bottom: 30px; display: flex; gap: 8px; }
.story-progress i { width: 34px; height: 1px; background: var(--line); transition: background .5s; }
.story-progress i.on { background: var(--gold-deep); }
.story.static .story-stick { padding: 120px var(--gut) 60px; }
.story.static .hero-fallback { position: static; transform: none; width: min(70vw, 360px); height: auto; margin: 0 auto 30px; }
.story.static .step { padding-block: 30px; } .story.static .step-0 { display: block; padding: 0 0 30px; }
.story.static .step-1, .story.static .step-2, .story.static .step-3 { width: auto; translate: none; display: grid; gap: 14px; }
.story.static .story-progress, .story.static canvas { display: none; }
html:not(.js) .story-progress, html:not(.js) #hero-glass { display: none; }

/* Avsnitt */
.sec { position: relative; padding: clamp(90px, 12vw, 190px) var(--gut); }
.on-white { background: var(--white); }
.sec-head { max-width: 760px; display: grid; gap: 18px; margin-bottom: clamp(44px, 6vw, 90px); }
.sec-head p { max-width: 54ch; color: var(--muted); }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 8vw, 130px); align-items: center; background: var(--paper); z-index: 5; }
.logo-print { margin: 0; padding: clamp(10px, 1.3vw, 18px); background: var(--white); box-shadow: 0 34px 70px -40px rgba(70, 52, 28, .55), 0 0 0 1px rgba(70, 52, 28, .08); transform: rotate(-1.2deg); max-width: 560px; }
.about-text { display: grid; gap: 24px; justify-items: start; max-width: 56ch; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); }
.card { text-decoration: none; display: grid; gap: 20px; align-content: start; }
.card-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.tint-0 .card-img, .mono.tint-0, .feature.tint-0 .feature-img { background: var(--blush); }
.tint-1 .card-img, .mono.tint-1, .feature.tint-1 .feature-img { background: var(--sage); }
.tint-2 .card-img, .feature.tint-2 .feature-img { background: var(--sand); }
.card-img img { position: absolute; inset: 7% 0 3%; width: 100%; height: 90%; object-fit: contain; transition: opacity .7s, transform 1.2s var(--ease); }
.card-img .b { opacity: 0; transform: scale(1.03); }
.card:hover .a { opacity: 0; transform: scale(1.04); } .card:hover .b { opacity: 1; transform: scale(1.07); }
.card-text { display: grid; gap: 6px; }
.card-text p { color: var(--muted); }
.price { font-weight: 400; margin-top: 6px; font-size: .95rem; }
.card:hover h3 { color: var(--gold-deep); } .card h3 { transition: color .4s; }
.try { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 90px); align-items: center; background: var(--paper); }
.try-text { display: grid; gap: 22px; justify-items: start; max-width: 54ch; }
.try-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.try-trio img { width: 140%; max-width: none; margin-inline: -20%; transition: transform 1.2s var(--ease); }
.try-trio img:nth-child(2) { transform: translateY(-6%) scale(1.14); } .try-trio:hover img:first-child { transform: translateX(-8%) rotate(-3deg); } .try-trio:hover img:last-child { transform: translateX(8%) rotate(3deg); }
.coming-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.coming-list li { border-bottom: 1px solid var(--line); }
.coming-list a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 26px; align-items: center; padding: clamp(24px, 3vw, 42px) 0; text-decoration: none; position: relative; transition: padding .6s var(--ease); }
.coming-list a:hover { padding-inline: 18px; }
.coming-list .name { font: 400 clamp(1.7rem, 3vw, 2.8rem)/1.1 var(--display); } .coming-list .txt { color: var(--muted); max-width: 44ch; }
.coming-list .go { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--gold-deep); }
.coming-list .peek { position: absolute; right: 22%; top: 50%; width: 220px; translate: 0 -50%; opacity: 0; scale: .92; transition: opacity .5s, scale .8s var(--ease); pointer-events: none; z-index: 3; filter: drop-shadow(0 18px 20px rgba(60, 45, 25, .15)); }
.coming-list a:hover .peek { opacity: 1; scale: 1; }
.vision { position: relative; background: var(--sage); padding: clamp(110px, 16vw, 240px) var(--gut); overflow: hidden; text-align: center; }
.vision .specks { width: 46vw; right: -6vw; bottom: 0; } 
.vision blockquote { margin: 0 auto; max-width: 960px; position: relative; display: grid; gap: 30px; justify-items: center; }
.vision p { font: 400 clamp(2.1rem, 4.8vw, 4.6rem)/1.12 var(--display); text-wrap: balance; }
.vision footer { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; }

/* Sidfot */
.foot { position: relative; background: var(--ink); color: #efe9df; padding: clamp(70px, 9vw, 130px) var(--gut) 34px; overflow: hidden; }
.foot .specks { width: 40vw; left: -6vw; top: -2vw; opacity: .5; transform: scaleY(-1); }
.foot-mark { color: var(--white); margin-bottom: clamp(50px, 7vw, 100px); position: relative; } .foot-mark svg { width: 100%; height: auto; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 34px; position: relative; }
.foot-lead { font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.2 var(--display); max-width: 20ch; }
.foot h2 { font: 400 .72rem/1.4 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #cdb07a; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .foot li a { display: inline-block; padding-block: 6px; }
.foot a { text-decoration: none; overflow-wrap: anywhere; } .foot a:hover { color: #dcbd7f; }
.foot-legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .82rem; color: #b5ab9c; position: relative; }

/* Kundkorg */
#cart-scrim { position: fixed; inset: 0; background: rgba(28, 24, 21, .34); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .5s; backdrop-filter: blur(3px); }
#cart { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); z-index: 101; background: var(--white); display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .7s cubic-bezier(.7, 0, .15, 1), visibility 0s .7s; }
.cart-open #cart { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.7, 0, .15, 1); } .cart-open #cart-scrim { opacity: 1; pointer-events: auto; }
#cart > header { display: flex; align-items: center; justify-content: space-between; padding: calc(22px + env(safe-area-inset-top, 0px)) 26px 22px; border-bottom: 1px solid var(--line); }
#cart h2 { font-size: 1.7rem; display: flex; gap: 12px; align-items: center; }
#cart-close { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; padding: 8px 0; }
#cart-empty { padding: 50px 26px; display: grid; gap: 22px; justify-items: start; }
#cart-items { list-style: none; margin: 0; padding: 0 26px; overflow: auto; flex: 1; }
.line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line img { background: var(--paper); object-fit: contain; }
.line-body { display: grid; gap: 4px; font-size: .94rem; } .line-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 400; } .line-top strong { font: 400 1.25rem/1.2 var(--display); }
.line p { color: var(--muted); overflow-wrap: anywhere; } .line-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 34px; height: 34px; transition: background .3s; } .qty button:hover { background: var(--paper); } .qty output { min-width: 26px; text-align: center; font-weight: 400; font-variant-numeric: tabular-nums; }
.qty.big button { width: 44px; height: 54px; } .qty.big output { min-width: 30px; }
#cart-foot { padding: 22px 26px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 12px; } #cart-foot p { font-size: .84rem; color: var(--muted); }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 400; } .cart-sum strong { font: 400 1.3rem var(--body); font-variant-numeric: tabular-nums; }
.fly { position: fixed; width: 140px; z-index: 110; pointer-events: none; transform-origin: top left; }

/* Glassidan */
.product { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(360px, 1fr); grid-template-rows: auto 1fr; }
.config { display: contents; }
.product .viewer { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.product .options { grid-column: 2; grid-row: 1; }
.product .options-more { grid-row: 2; padding-top: 0; }
.viewer { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(70% 62% at 50% 46%, var(--white), transparent 75%), color-mix(in srgb, var(--motif) 16%, var(--paper)); transition: background 1s; }
#glass { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline-offset: -6px; }
.dragging #glass { cursor: grabbing; }
.viewer-fallback { position: absolute; left: 50%; top: 52%; height: 78%; width: auto; max-width: none; translate: -50% -50%; }
.viewer.ready .viewer-fallback { display: none; } .no-webgl #glass, .no-webgl .viewer-hint, .no-webgl #foot-view { display: none; }
.viewer-hint { position: absolute; top: 96px; left: var(--gut); display: flex; align-items: center; gap: 10px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: var(--muted); transition: opacity .6s; pointer-events: none; white-space: nowrap; }
.viewer-hint i { width: 24px; height: 1px; background: var(--gold-deep); animation: drag 2.2s ease-in-out infinite; }
@keyframes drag { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.touched .viewer-hint { opacity: 0; }
.viewer-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none; }
.viewer-foot p { display: grid; font-size: .86rem; color: var(--muted); } .viewer-foot strong { font: 400 1.5rem/1.2 var(--display); color: var(--ink); }
.pill { pointer-events: auto; border: 1px solid var(--line); background: rgba(251, 249, 245, .72); backdrop-filter: blur(8px); padding: 11px 18px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; transition: background .3s; white-space: nowrap; }
.pill:hover, .pill[aria-pressed=true] { background: var(--white); }
.options { background: var(--white); padding: clamp(100px, 10vw, 140px) clamp(22px, 4vw, 64px) 70px; display: grid; gap: 28px; align-content: start; min-width: 0; position: relative; z-index: 21; }
.opt-head { display: grid; gap: 10px; } .opt-head h1 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
.p-price { font-size: 1.25rem; font-weight: 400; font-variant-numeric: tabular-nums; } .p-price small { font-size: .84rem; color: var(--muted); font-weight: 300; margin-left: 6px; }
.p-text { color: var(--muted); max-width: 54ch; min-height: 5.1em; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 12px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.swatches button { display: grid; gap: 8px; justify-items: center; font-size: .84rem; text-align: center; font-weight: 400; }
.swatches img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .35s, transform .6s var(--ease); max-width: 118px; }
.swatches button:hover img { transform: scale(1.04); } .swatches [aria-checked=true] img { box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px var(--gold-deep); }
.sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sets input, .choices input { position: absolute; opacity: 0; }
.sets label { position: relative; cursor: pointer; }
.sets span { display: grid; gap: 1px; text-align: center; padding: 13px 4px; border: 1px solid var(--line); transition: border-color .3s, background .3s; font-size: .92rem; } .sets small { color: var(--muted); font-size: .84rem; }
.sets input:checked + span, .choices input:checked + span { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 .5px var(--ink); }
.sets input:focus-visible + span, .choices input:focus-visible + span { outline: 1.5px solid var(--gold-deep); outline-offset: 2px; }
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 400; } .switch input { position: absolute; opacity: 0; }
.switch i { flex: none; width: 42px; height: 24px; border: 1px solid var(--line); border-radius: 24px; position: relative; transition: background .35s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .4s var(--ease), background .3s; }
.switch input:checked + i { background: var(--ink); } .switch input:checked + i::after { transform: translateX(18px); background: var(--white); }
.switch input:focus-visible + i { outline: 1.5px solid var(--gold-deep); outline-offset: 2px; } .switch small { display: block; font-weight: 300; color: var(--muted); font-size: .84rem; }
#eng-fields { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #eng-fields[hidden] { display: none; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; } .field label { font-size: .84rem; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 0; transition: border-color .3s; font-size: 16px; font-weight: 300; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 .5px var(--ink); }
.field textarea { resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #7f7669; }
.err { display: none; color: #8d2f2a; font-size: .84rem; font-weight: 400; } .invalid .err { display: block; } .invalid input, .invalid textarea { border-color: #8d2f2a; }
.buy { display: flex; gap: 10px; } .add { flex: 1; padding-inline: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .12em; }
.ask { justify-self: start; font-size: .92rem; }
details { border-top: 1px solid var(--line); padding: 16px 0 0; } summary { cursor: pointer; font-weight: 400; list-style: none; display: flex; justify-content: space-between; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; line-height: 1; } details[open] summary::after { content: "−"; }
details > p, .spec { margin: 12px 0 0; color: var(--muted); font-size: .95rem; } .spec div { display: flex; justify-content: space-between; gap: 18px; padding: 5px 0; } .spec dd { margin: 0; color: var(--ink); text-align: right; font-weight: 400; }

/* Undersidor */
.page-hero { padding: clamp(150px, 19vw, 260px) var(--gut) clamp(60px, 8vw, 110px); display: grid; gap: 20px; max-width: 1100px; justify-items: start; }
.page-hero p { max-width: 54ch; color: var(--muted); font-size: 1.1em; }
.feature-list { display: grid; gap: clamp(50px, 7vw, 110px); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 6vw, 100px); align-items: center; }
.feature:nth-child(even) .feature-img { order: 2; }
.feature-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.feature-img > img:first-child { position: absolute; inset: 5% 0; height: 90%; width: 100%; object-fit: contain; transition: transform 1.3s var(--ease); }
.feature-img:hover > img:first-child { transform: scale(1.05); }
.feature-img .detail { position: absolute; right: 5%; bottom: 5%; width: 27%; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgba(251, 249, 245, .7); }
.feature > div { display: grid; gap: 18px; justify-items: start; } .feature > div > p { color: var(--muted); max-width: 48ch; }
.feature h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.prices { display: grid; width: min(100%, 360px); margin: 0; } .prices div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); } .prices dd { margin: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
.soon img { filter: saturate(.95); }
.engrave-note > div { max-width: 640px; display: grid; gap: 20px; justify-items: start; } .engrave-note p { color: var(--muted); }
.about-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 8vw, 130px); align-items: center; } .about-story > div { display: grid; gap: 22px; max-width: 58ch; }
.lead { font: 400 clamp(1.5rem, 2.5vw, 2.3rem)/1.22 var(--display); text-wrap: balance; }
.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); max-width: 980px; }
.founder-grid article { display: grid; gap: 8px; } .founder-grid p { color: var(--muted); }
.mono { aspect-ratio: 4 / 3; display: grid; place-items: center; font: 400 clamp(5rem, 13vw, 11rem)/1 var(--display); margin-bottom: 12px; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 7vw, 110px); } .pillars article { display: grid; gap: 18px; align-content: start; } .pillars p { color: var(--muted); }
.school { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-block: clamp(70px, 9vw, 120px); } .school p { font: 400 clamp(1.5rem, 2.8vw, 2.5rem)/1.2 var(--display); max-width: 26ch; }
.contact { padding-block: 40px; }
.contact-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 4fr); gap: 16px; align-items: baseline; padding: clamp(24px, 3.4vw, 46px) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .6s var(--ease); }
.contact-row:hover { padding-left: 18px; } .contact-row strong { font: 400 clamp(1.4rem, 4.2vw, 3.8rem)/1.1 var(--display); overflow-wrap: anywhere; }
.prose { max-width: 720px; padding: clamp(150px, 16vw, 210px) var(--gut) 110px; margin-inline: auto; display: grid; gap: 14px; } .prose h1 { margin-bottom: 18px; } .prose h2 { font-size: 1.6rem; margin-top: 24px; } .prose p { color: var(--muted); }
.nf { justify-items: center; text-align: center; margin-inline: auto; }

/* Beställning */
.order { padding: clamp(110px, 12vw, 150px) var(--gut) 100px; max-width: 1320px; margin-inline: auto; display: grid; gap: 34px; }
.order[hidden], .order-done[hidden] { display: none; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.tabs { display: flex; gap: 22px; flex-wrap: wrap; } [role=tab] { padding: 8px 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--muted); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; } [role=tab][aria-selected=true] { color: var(--ink); border-color: var(--gold-deep); }
#order-empty:not([hidden]) { display: grid; gap: 22px; justify-items: start; padding: 40px 0; }
#order-form:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.order-main { display: grid; gap: 38px; min-width: 0; } .order-main fieldset { display: grid; gap: 16px; } .order-main legend { font: 400 1.6rem/1.2 var(--display); letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .three { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; }
#address:not([hidden]) { display: grid; gap: 16px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .choices label { position: relative; cursor: pointer; display: grid; }
.choices span { display: grid; gap: 3px; padding: 16px; border: 1px solid var(--line); transition: border-color .3s, background .3s; align-content: start; } .choices b { font-weight: 400; } .choices small { color: var(--muted); font-size: .84rem; line-height: 1.4; } .choices em { font-style: normal; font-size: .88rem; font-weight: 400; margin-top: 6px; }
.note { font-size: .9rem; color: var(--muted); }
.order-sum { position: sticky; top: 100px; background: var(--white); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; min-width: 0; } .order-sum h2 { font-size: 1.7rem; }
#order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } #order-lines li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; } #order-lines img { background: var(--paper); } #order-lines strong { display: block; font: 400 1.14rem/1.2 var(--display); } #order-lines span { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; } #order-lines b { font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-sum dl { margin: 0; border-top: 1px solid var(--line); padding-top: 12px; } .order-sum dl div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; } .order-sum dd { margin: 0; font-weight: 400; } .total { font-weight: 400; margin-top: 6px; } .total dd { font: 400 1.3rem/1.3 var(--body); }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: .9rem; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--ink); margin-top: 3px; } .check .err { grid-column: 2; }
.form-error { color: #8d2f2a; font-size: .9rem; font-weight: 400; }
.inquiry { max-width: 760px; display: grid; gap: 20px; justify-items: stretch; } .inquiry .btn { justify-self: start; }
.order-done { max-width: 720px; margin-inline: auto; padding: clamp(150px, 18vw, 220px) var(--gut) 110px; display: grid; gap: 20px; justify-items: start; outline: none; } .order-done > p { color: var(--muted); }
#done-manual { width: 100%; display: grid; gap: 14px; justify-items: start; } #done-manual[hidden] { display: none; } #done-body { width: 100%; margin: 0; padding: 20px; background: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; font: 300 .92rem/1.55 var(--body); }

/* Mellanstor och liten skärm */
@media (max-width: 1100px) { .product { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); } }
@media (max-width: 959px) {
  .js .story:not(.static) { height: 680svh; }
  .site-head { grid-template-columns: 1fr auto 1fr; }
  .head-nav a, .head-order { display: none; } .menu-btn { display: block; }
  .step-0 { grid-template-columns: 1fr; align-content: space-between; padding: 96px var(--gut) 34px; }
  .step-0 h1 { grid-column: 1; font-size: clamp(2.1rem, 8.6vw, 3.6rem); max-width: 14em; text-align: center; justify-self: center; }
  .step-side { grid-column: 1; justify-self: stretch; max-width: none; justify-items: center; text-align: center; gap: 12px; }
  .step-side p { display: none; }
  .scroll-hint { display: none; }
  .step-1, .step-2, .step-3 { left: var(--gut); right: var(--gut); top: 92px; translate: none; width: auto; gap: 10px; text-align: center; justify-items: center; }
  .step-3 { padding: 14px 16px; background: rgba(241, 236, 227, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .step-1 h2, .step-2 h2, .step-3 h2 { font-size: clamp(1.7rem, 6.6vw, 2.5rem); } .step-1 p, .step-2 p, .step-3 p { font-size: .95rem; max-width: 40ch; }
  .story-progress { right: 50%; translate: 50% 0; bottom: 14px; }
  .about, .try, .about-story, .pillars, .feature { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-child(even) .feature-img { order: 0; }
  .logo-print { max-width: 460px; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; } .cards > :last-child:nth-child(odd) .card-img { aspect-ratio: 8 / 6; }
  .coming-list a { grid-template-columns: minmax(0, 1fr); gap: 8px; } .coming-list .peek { display: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-lead { grid-column: 1 / -1; }
  .product { display: block; } .config { display: block; }
  .product .options-more { padding-top: 8px; padding-bottom: 50px; }
  /* Glaset stannar kvar högst upp, så att man ser varje val direkt medan man scrollar */
  .viewer { position: sticky; top: 0; z-index: 30; height: 44svh; min-height: 280px; box-shadow: 0 1px 0 var(--line); }
  .options { z-index: 1; }
  .site-head.scrolled { background: rgba(241, 236, 227, .72); }
  .viewer-hint { top: auto; bottom: 66px; left: 50%; translate: -50% 0; } .viewer-foot { bottom: 12px; } .viewer-foot p { display: none; } .viewer-foot { justify-content: center; }
  .options { padding-top: 26px; gap: 24px; padding-bottom: 24px; } .options .opt-head { order: 1; } .options > fieldset:first-of-type { order: 0; } .p-text { order: 2; min-height: 0; } .options > * { order: 3; }
  .opt-head h1 { font-size: 2.6rem; }
  .buy { position: sticky; bottom: 0; z-index: 20; background: var(--white); margin-inline: calc(clamp(22px, 4vw, 64px) * -1); margin-bottom: -24px; padding: 10px clamp(22px, 4vw, 64px) calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -1px 0 var(--line); }
  #order-form:not([hidden]) { grid-template-columns: minmax(0, 1fr); } .order-sum { position: static; }
}
/* Tunga effekter som får telefoner att hacka i scrollen */
@media (max-width: 959px) {
  body::after { display: none; }
  .site-head.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(241, 236, 227, .96); }
  .step-3, #cart-scrim, .pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .step-3 { background: rgba(241, 236, 227, .94); }
  #thread { display: none; }
  /* Bara en mjuk toning: inget som flyttar sig medan fingret scrollar */
  .js [data-reveal]:not(.in) { transform: none; }
  [data-reveal] { transition: opacity .6s ease var(--d, 0s); }
  html { scroll-behavior: auto; }
}
@media (max-width: 560px) {
  .two, .three, .choices, #eng-fields { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); } .cards > :last-child:nth-child(odd) .card-img { aspect-ratio: 4 / 5; }
  .founder-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .try-trio img { width: 150%; margin-inline: -25%; }
  .btn { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Kassan */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.err { display: none; } .invalid .err { display: block; }
.field input, .field select, .field textarea { border-width: 0 0 1px; background: transparent; padding: 10px 2px; min-height: 46px; transition: border-color .3s, box-shadow .3s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-deep); box-shadow: 0 1px 0 var(--gold-deep); }
.field textarea { border-width: 1px; padding: 12px 14px; background: var(--white); }
.order-main { gap: 0; border-top: 1px solid var(--line); }
.stage { border-bottom: 1px solid var(--line); }
.stage > header { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 22px 0; }
.stage h2 { font-size: 1.65rem; transition: color .4s; }
.stage:not(.open):not(.done) h2 { color: #8f8678; }
.num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: .86rem; font-weight: 400; transition: background .4s, color .4s, border-color .4s; }
.stage.open .num { border-color: var(--gold-deep); color: var(--gold-deep); }
.stage.done .num { background: var(--ink); border-color: var(--ink); color: var(--white); font-size: 0; }
.stage.done .num::after { content: ""; width: 11px; height: 6px; border: solid var(--white); border-width: 0 0 1.5px 1.5px; transform: translateY(-2px) rotate(-45deg); }
.stage-sum { color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-edit { display: none; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.stage.done .stage-edit { display: block; }
.stage-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.stage.open .stage-wrap { grid-template-rows: 1fr; }
.stage-body { overflow: hidden; min-height: 0; display: grid; gap: 22px; opacity: 0; transition: opacity .4s; padding-inline: 2px; }
.stage.open .stage-body { opacity: 1; padding-bottom: 32px; }
.stage-body > .next { justify-self: start; }
.choices span { position: relative; padding: 18px 18px 18px 46px; background: var(--white); transition: border-color .3s, box-shadow .3s, background .3s; height: 100%; }
.choices label:hover span { border-color: var(--gold-deep); }
.choices span > i { position: absolute; left: 16px; top: 21px; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .3s; }
.choices span > i::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .35s var(--ease); }
.choices input:checked + span { background: var(--white); border-color: var(--ink); }
.choices input:checked + span > i { border-color: var(--ink); } .choices input:checked + span > i::after { transform: scale(1); }
.btn.busy { cursor: progress; opacity: 1; }
.btn.busy .lbl::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.btn.busy::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: #dcbd7f; animation: sending 1.3s ease-in-out infinite; }
@keyframes sending { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.order-sum .btn { width: 100%; }
.form-error { display: grid; gap: 6px; padding: 12px 14px; background: #f6e9e6; }
.form-error[hidden] { display: none; }
#order-empty:not([hidden]) { gap: 14px; }
/* Tacksidan */
.order-done { gap: 22px; }
.done-mark { width: 68px; height: 68px; fill: none; stroke: var(--gold-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.done-mark circle { stroke-dasharray: 189; stroke-dashoffset: 189; animation: draw 1.1s var(--ease) .1s forwards; transform: rotate(-90deg); transform-origin: center; }
.done-mark path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw .6s var(--ease) .85s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.receipt { width: 100%; background: var(--white); padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.receipt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.receipt li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.receipt img { background: var(--paper); } .receipt strong { display: block; font: 400 1.14rem/1.2 var(--display); } .receipt span { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; } .receipt b { font-size: .92rem; white-space: nowrap; }
.receipt dl { margin: 0; border-top: 1px solid var(--line); padding-top: 12px; } .receipt dl div { display: flex; justify-content: space-between; padding: 4px 0; } .receipt dd { margin: 0; font-weight: 400; } .receipt .total dd { font: 400 1.3rem/1.3 var(--body); }
#done-next { width: 100%; display: grid; gap: 12px; } #done-next[hidden] { display: none; } #done-next h2 { font-size: 1.5rem; }
#done-next ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; color: var(--muted); }
#done-next li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; } #done-next li::before { content: counter(s); font: 400 1.15rem/1.45 var(--display); color: var(--gold-deep); }
.order-done .eyebrow[hidden] { display: none; }
@media (max-width: 959px) {
  .order-sum { background: var(--white); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
}
@media (max-width: 560px) {
  .stage > header { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .stage-sum { grid-column: 2 / -1; grid-row: 2; margin-top: -8px; white-space: normal; }
  .stage-sum:empty { display: none; }
  .stage-edit { grid-column: 3; grid-row: 1; }
  .stage-body > .next { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .done-mark circle, .done-mark path { stroke-dashoffset: 0; animation: none; } }