@import url('assets/fonts/typography.css');
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { color-scheme: light; --ink: #151515; }
html { scroll-behavior: auto; }
body { background: #eeeef0; font-family: 'Manrope',sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
::selection { background: #c8ff19; color: #151515; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #151515; outline-offset: 7px; background: #c8ff19; }
.scene { height: 100svh; }
.hero-title { top: 67%; left: 5vw; }
.hero-title h1 { max-width: 8ch; font-size: clamp(56px, 7.4vw, 112px); line-height: .92; font-weight: 400; }
.hero-subtitle { font-size: 12px; letter-spacing: .22em; }
.hero-title, .final, .glass { transition: none; }
.nav { font-size: 12px; align-items: baseline; }
.nav-logo { font-size: 12px; font-weight: 600; margin: 0; letter-spacing: .08em; }
.brand-subtitle { margin-top: 9px; font-size: 10px; font-weight: 400; letter-spacing: .14em; line-height: 1.4; }
.nav a { opacity: .85; display: inline-block; padding: 12px 0; }
.nav a.active::after { position: absolute; width: 24px; }
.progress-fill { height: 100%; transform: scaleY(0); transform-origin: top; transition: none; }
.glass { border-radius: 14px; padding: clamp(24px, 3vw, 40px); transform-origin: center;
  background: linear-gradient(125deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 55%,rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 12px 38px rgba(40,35,40,.075);
  backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%);
}
.glass::before { border-radius: inherit; background: linear-gradient(115deg,rgba(255,255,255,.16),transparent 20%,transparent 80%,rgba(255,255,255,.12)); }
.glass-kicker { font-size: 12px; opacity: .75; margin-bottom: 28px; }
.services { width: min(490px, 41vw); left: 6vw; top: 26vh; }
.services-list { font-size: clamp(23px, 2.2vw, 34px); gap: 16px; line-height: 1.06; font-weight: 400; }
.idea { top: 27vh; right: 5vw; width: min(620px, 46vw); }
.idea .glass-title { font-size: clamp(38px, 4.7vw, 72px); line-height: 1.02; font-weight: 400; }
.price { left: 50%; top: 13svh; width: max(780px, 64vw); max-width: 90vw; min-height: 90svh;
  padding: 24px 34px; background: linear-gradient(120deg,rgba(248,248,250,.24),rgba(242,242,246,.1));
  backdrop-filter: blur(42px) saturate(105%); -webkit-backdrop-filter: blur(42px) saturate(105%); }
.price-heading { margin-bottom: 15px; }
.price-heading h2 { font-size: 13px; }
.price-item { padding: 14px 0; }
.price-name { font-size: clamp(16px, 1.5vw, 22px); }
.price-number { font-size: 12px; opacity: .65; }
.price-time { font-size: 12px; opacity: .75; margin-top: 8px; }
.price-desc { font-size: 14px; line-height: 1.45; opacity: .85; max-width: none; }
.web-price { font-size: 13px; opacity: .9; gap: 10px; }
.final { top: 48%; width: 90vw; }
.final h2 { font-size: clamp(46px, 7vw, 108px); font-weight: 400; line-height: .95; }
.final h2 a { display: inline-block; }
.contact-links { display: flex; justify-content: center; gap: 32px; margin-top: 28px; font-size: 12px; letter-spacing: .15em; }
.contact-links a { padding: 12px 0; border-bottom: 1px solid #151515; }
.nav-links a,.contact-links a { padding: 10px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 10px;
  background: linear-gradient(130deg,rgba(255,255,255,.2),rgba(255,255,255,.035));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 5px 16px rgba(30,25,30,.04); }
.final-line { margin-top: 18px; }
.scroll-space { height: 850svh; }
.loading-note { position: fixed; bottom: 20px; left: 30px; font-size: 12px; z-index: 110; }
@media (hover:hover) and (pointer:fine) {
  .final h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
  .contact-links a:hover { border-color: #849c18; }
}
@media (max-height:740px) and (min-width:801px) {
  .price { top: 11svh; padding: 18px 28px; }
  .price-item { padding: 9px 0; }
  .price-desc { font-size: 12px; line-height: 1.35; }
  .price-time { margin-top: 5px; margin-bottom: 5px; }
}
@media (max-width:800px) {
  .nav { left: 20px; right: 20px; top: 12px; font-size: 12px; }
  .nav-links { gap: 7px; font-size: 10px; }
  .nav-links a { padding: 9px 10px; }
  .brand-subtitle { max-width: 135px; font-size: 8px; letter-spacing: .06em; }
  .hero-title { left: 24px; top: 76%; }
  .hero-title h1 { font-size: clamp(52px, 12vw, 84px); }
  .hero-subtitle { white-space: normal; max-width: 280px; font-size: 11px; line-height: 1.6; }
  .hero-video { object-position: 58% center; }
  .glass { padding: 25px; }
  .services, .idea { width: calc(100vw - 48px); left: 24px; right: auto; top: 43svh; }
  .services-list { font-size: clamp(22px, 6vw, 32px); gap: 14px; }
  .idea .glass-title { font-size: clamp(34px, 8vw, 52px); }
  .price { left: 50%; top: 11svh; width: calc(100vw - 32px); max-width: none; min-height: 92svh; padding: 21px 20px; }
  .price-top { grid-template-columns: 20px 1fr auto; gap: 8px; }
  .price-name { font-size: 14px; }
  .price-cost { grid-column: auto; font-size: 14px; }
  .price-time,.price-desc { margin-left: 28px; }
  .price-time { font-size: 10px; letter-spacing: .05em; }
  .price-desc { font-size: 12px; line-height: 1.4; }
  .price-desc br { display: none; }
  .price-item { padding: 12px 0; }
  .web-price { font-size: 12px; }
  .final h2 { font-size: clamp(46px,12vw,78px); }
  .progress { right: 7px; height: 70px; }
  .scroll-space { height: 1000svh; }
}
@media (max-width:380px), (max-height:650px) {
  .price-item { padding: 8px 0; }
  .price { padding: 16px; }
  .price-desc { font-size: 11px; }
  .price-name,.price-cost { font-size: 12px; }
}
/* A complete reading view for motion preference, media failure and no scripting. */
html.reading .scene { position: relative; height: auto; overflow: visible; }
html.reading .scene { padding-top: 100svh; }
html.reading .hero-video { position: absolute; height: 100svh; }
html.reading .video-wash,html.reading .scroll-space,html.reading .progress { display: none; }
html.reading .hero-title { position: relative; top: auto; left: auto; min-height: 100svh; padding: 65svh 6vw 8vh; transform: none!important; opacity: 1!important; }
html.reading .glass-layer,html.reading .price-scene { position: relative; perspective: none; }
html.reading .glass,html.reading .final { position: relative; top: auto; left: auto; right: auto; width: min(780px,90vw); margin: 8vh auto; min-height: auto; transform: none!important; opacity: 1!important; visibility: visible!important; pointer-events: auto!important; }
html.reading .final { padding: 8vh 0; }

/* Refined type, compact frosted glass and uncropped final framing. */
.nav { align-items: flex-start; }
.nav-logo { font-size: 17px; font-weight: 550; letter-spacing: .18em; line-height: 1; }
.brand-subtitle { font-size: 9px; letter-spacing: .17em; font-weight: 500; margin-top: 10px; }
.nav-links { gap: 12px; }
.nav-links a,.contact-links a { font-size: 10px; font-weight: 550; letter-spacing: .12em; }
.glass { padding: 28px 30px; border-radius: 18px; }
.glass-kicker { font-size: 10px; font-weight: 550; letter-spacing: .2em; margin-bottom: 22px; }
.services { width: min(350px,38vw); }
.services-list { font-size: clamp(16px,1.35vw,21px); font-weight: 450; letter-spacing: .01em; gap: 15px; line-height: 1.25; margin-top: 0; }
.idea { width: min(410px,39vw); }
.idea .glass-title { font-size: clamp(24px,2.5vw,38px); font-weight: 450; letter-spacing: -.025em; line-height: 1.17; }
.price { top: auto; bottom: 0; left: 46%; width: min(680px,86vw); min-height: 0; max-width: none; padding: 25px 30px 28px;
  background: linear-gradient(125deg,rgba(248,249,252,.38),rgba(249,250,252,.18) 55%,rgba(237,240,244,.3));
  backdrop-filter: blur(25px) saturate(75%); -webkit-backdrop-filter: blur(25px) saturate(75%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.5),0 18px 50px rgba(30,26,35,.12);
}
.price::before { background: linear-gradient(115deg,rgba(255,255,255,.24),transparent 32%,transparent 70%,rgba(255,255,255,.16)); mix-blend-mode: normal; }
.price-heading { margin-bottom: 12px; }
.price-heading h2 { font-size: 10px; font-weight: 600; letter-spacing: .2em; }
.price-item { padding: 12px 0; }
.price-top { grid-template-columns: 22px 1fr auto; gap: 12px; align-items: baseline; }
.price-name { font-size: 15px; font-weight: 550; letter-spacing: -.01em; line-height: 1.4; }
.price-cost { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.price-number { font-size: 10px; font-weight: 500; }
.price-time { font-size: 10px; font-weight: 500; letter-spacing: .07em; margin: 5px 0 6px 34px; }
.price-desc { font-size: 12px; line-height: 1.55; opacity: 1; margin-left: 34px; letter-spacing: 0; }
.web-price { font-size: 11px; line-height: 1.5; padding-top: 13px; gap: 7px; }
.web-price strong { font-weight: 600; }
.final h2 { font-size: clamp(38px,5vw,76px); font-weight: 450; line-height: 1.1; letter-spacing: -.035em; }
.hero-video { inset: auto; left: 50%; top: 50%; width: var(--film-width,100%); height: var(--film-height,100%); object-fit: fill; transform: translate(-50%,-50%) scale(var(--film-scale,1)); }
.scene { background: #eeeef0; }
@media(max-width:800px) {
  .nav-logo { font-size: 14px; }
  .brand-subtitle { font-size: 8px; letter-spacing: .08em; max-width: 150px; }
  .nav-links a { font-size: 9px; padding: 9px 8px; }
  .nav-links { gap: 6px; }
  .services,.idea { width: min(330px,calc(100vw - 48px)); }
  .services-list { font-size: 18px; gap: 13px; }
  .idea .glass-title { font-size: 28px; }
  .price { left: 50%; width: calc(100vw - 32px); top: auto; bottom: 0; padding: 20px; min-height: 0; }
  .price-top { gap: 8px; grid-template-columns: 16px 1fr auto; }
  .price-name,.price-cost { font-size: 12px; }
  .price-time,.price-desc { margin-left: 24px; }
  .price-time { font-size: 9px; }
  .price-desc { font-size: 11px; line-height: 1.45; }
  .price-item { padding: 10px 0; }
  .web-price { font-size: 10px; }
}
@media(max-width:380px) {
  .nav { left: 14px; right: 14px; }
  .brand-subtitle { max-width: 105px; }
  .price { padding: 16px; }
  .price-top { grid-template-columns: 1fr auto; }
  .price-number { display: none; }
  .price-time,.price-desc { margin-left: 0; }
  .price-name,.price-cost { font-size: 11px; }
}
html.reading .hero-video { top: 0; left: 0; width: 100%; height: 100svh; transform: none; object-fit: cover; }
.price { bottom: auto; top: 18svh; }
@media(max-height:740px) { .price { top: 12svh; } }
@media(max-width:800px) { .price { top: 15svh; } }
@media(max-width:380px) { .price { top: 12svh; } }
.final { top: 65%; width: 92vw; }
.final h2 { font-size: clamp(42px,5.1vw,78px); }
.language-switch { display:flex; gap:4px; margin-left:8px; align-items:center; }
.language-switch button { font:500 10px 'Manrope',sans-serif; letter-spacing:.07em; padding:9px 6px; color:#34343a; background:transparent; border:0; cursor:pointer; opacity:.5; }
.language-switch button[aria-pressed=true] { opacity:1; text-decoration:underline; text-decoration-color:#a3bc54; text-underline-offset:5px; }
.language-switch button:focus-visible { outline:2px solid #566335; outline-offset:2px; }
@media(max-width:600px) {
 .nav { flex-wrap:wrap; gap:15px; }
 .nav-links { gap:5px; }
 .nav-links a { padding:8px 6px; }
 .language-switch { margin-left:0; }
 .language-switch button { padding:8px 4px; }
 .final { top:65%; }
 .final h2 { font-size:clamp(39px,9.75vw,54px); }
}
html[lang=ru] .services-list,html[lang=ru] .idea .glass-title,html[lang=ru] .price-name { font-weight:400; }
html[lang=ru] .price-desc { font-weight:400; opacity:1; }
.glass-layer,.price-scene { perspective:none; }
.glass::before { z-index:-1; }
.glass { isolation:isolate; }
/* Cyrillic typography: expressive headings and legible pricing. */
body { font-family: Onest, sans-serif; }
.nav-logo,.brand-subtitle,.nav-links a,.language-switch button { font-family: Onest,sans-serif; }
.nav-logo { font-weight:450; }
.nav-links a { font-weight:400; }
.services-list,.idea .glass-title { font-family:Onest,sans-serif; }
.price { font-family:'Golos Text',sans-serif; color:#29282e; max-height:calc(100svh - 22svh); overflow-y:auto; }
.price-heading h2 { font-family:Onest,sans-serif; font-size:12px; font-weight:450; letter-spacing:.14em; }
.price-name { font-size:16px; font-weight:400; letter-spacing:0; }
.price-cost { font-size:15px; font-weight:400; }
.price-time { font-size:11px; font-weight:400; letter-spacing:.02em; opacity:1; color:#53505b; }
.price-desc { font-size:13px; font-weight:400; line-height:1.5; color:#45424c; }
.web-price { font-size:14px; line-height:1.5; opacity:1; color:#29282e; gap:12px 18px; margin-top:10px; padding-top:16px; border-top-color:rgba(45,40,50,.22); }
.web-price strong { font-weight:400; }
.final h2 { font-family:Onest,sans-serif; font-size:clamp(32px,4.1vw,62px); font-weight:300; letter-spacing:-.025em; line-height:1.2; }
.final h2 a { font-weight:inherit; }
@media(max-width:800px) {
 .price { max-height:calc(100svh - 19svh); }
 .price-name,.price-cost { font-size:14px; }
 .price-desc { font-size:12px; }
 .price-time { font-size:10px; }
 .web-price { font-size:13px; gap:10px 12px; }
}
@media(max-width:400px) {
 .price { padding:16px; }
 .price-name,.price-cost,.web-price { font-size:12px; }
 .price-desc { font-size:11px; }
 .final h2 { font-size:30px; }
}
/* A compact glass action, positioned beneath the camera. */
.final { width:auto; max-width:calc(100vw - 40px); }
.final h2 { margin:0; font-size:clamp(19px,1.45vw,23px); font-weight:400; line-height:1.3; letter-spacing:-.015em; }
.final h2 a { display:inline-flex; align-items:center; justify-content:center; gap:26px; padding:19px 25px; white-space:nowrap; color:#25232a; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:linear-gradient(120deg,rgba(255,255,255,.5),rgba(255,255,255,.22)); backdrop-filter:blur(18px) saturate(110%); -webkit-backdrop-filter:blur(18px) saturate(110%); box-shadow:inset 0 1px 0 #ffffffd0,0 8px 28px #34253712; transition:background .2s,box-shadow .2s; }
.final h2 a::after { content:'↗'; font-size:24px; font-weight:300; line-height:1; }
.final h2 a:hover { background:rgba(255,255,255,.65); box-shadow:inset 0 1px 0 #fff,0 10px 32px #3425371a; }
.final h2 a:focus-visible { outline:2px solid #667a3e; outline-offset:5px; }
.final-line { display:none; }
@media(max-width:400px) { .final h2 { font-size:18px; } .final h2 a { padding:17px 21px; gap:20px; } }
/* Match navigation scale; anchor under the camera in the final video frame. */
.final { top:53%; left:calc(50% - max(8.3vw,14.76svh)); }
.final h2 { font-size:10px; font-weight:400; letter-spacing:.12em; line-height:normal; }
.final h2 a { padding:10px 16px; gap:0; border-radius:10px; text-transform:uppercase; }
.final h2 a::after { content:none; }
@media(max-width:800px) { .final h2 { font-size:9px; } .final h2 a { padding:9px 8px; } }
@media(max-width:600px) { .final h2 a { padding:8px 6px; } .final { left:max(85px,calc(50% - 14.76svh)); } }
/* Keep the complete button left of the trousers, with a subtle lime rim. */
.final { left:calc(50% - max(8.3vw,14.76svh) - 30px); }
.final h2 a { border-color:rgba(218,240,157,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 3px rgba(202,233,123,.22),0 0 9px rgba(193,232,101,.2),0 4px 13px rgba(132,155,82,.09); }
.final h2 a:hover { box-shadow:inset 0 1px 0 #fff,0 0 13px rgba(193,232,101,.32),0 5px 16px rgba(132,155,82,.12); }
@media(max-width:600px) { .final { left:max(70px,calc(50% - 14.76svh - 30px)); } }
/* Quiet glass depth with a lime underline only on interaction. */
.final h2 a { position:relative; border-color:rgba(255,255,255,.75); background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(245,245,247,.25)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 2px rgba(44,39,49,.12),0 3px 5px rgba(41,36,47,.12),0 8px 18px rgba(41,36,47,.1); }
.final h2 a::before { content:''; position:absolute; bottom:4px; left:16px; right:16px; height:2px; background:var(--lime,#c8ff19); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.final h2 a:hover,.final h2 a:focus-visible { background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(245,245,247,.3)); box-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(44,39,49,.14),0 4px 7px rgba(41,36,47,.14),0 10px 22px rgba(41,36,47,.12); }
.final h2 a:hover::before,.final h2 a:focus-visible::before { transform:scaleX(1); }
@media(prefers-reduced-motion:reduce) { .final h2 a::before { transition:none; } }
/* Rounded glass action with a small lime indicator, no underline. */
.final { top:54%; left:calc(50% - max(8.3vw,14.76svh) - 44px); }
.final h2 a { padding:12px 17px; gap:13px; border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(241,240,243,.28)); border-color:rgba(255,255,255,.85); box-shadow:inset 0 1px 1px #ffffffed,inset 0 -1px 2px #332d3d12,0 3px 7px #332d3d14,0 9px 22px #332d3d0d; text-decoration:none; }
.final h2 a::before { content:none; }
.final h2 a::after { content:''; display:block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:#c0df65; box-shadow:inset 0 1px 1px #ffffff80,0 0 4px #bfdd6333; }
.final h2 a:hover,.final h2 a:focus-visible { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(241,245,232,.38)); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #332d3d12,0 4px 9px #332d3d19,0 10px 24px #332d3d10; text-decoration:none; }
@media(max-width:800px) { .final h2 a { padding:11px 14px; gap:11px; } }
@media(max-width:600px) { .final { left:max(83px,calc(50% - 14.76svh - 44px)); } .final h2 a { padding:10px 12px; gap:9px; } }
/* Lighter transparent glass, with a little more space from the character. */
.final { left:calc(50% - max(8.3vw,14.76svh) - 58px); }
.final h2 a { background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.045)); border-color:rgba(255,255,255,.65); backdrop-filter:blur(7px) saturate(110%); -webkit-backdrop-filter:blur(7px) saturate(110%); box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #332d3d0d,0 3px 7px #332d3d12,0 8px 18px #332d3d09; }
.final h2 a:hover,.final h2 a:focus-visible { background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08)); box-shadow:inset 0 1px 1px #ffffffcc,inset 0 -1px 1px #332d3d12,0 4px 9px #332d3d16,0 9px 20px #332d3d0c; }
@media(max-width:600px) { .final { left:max(83px,calc(50% - 14.76svh - 58px)); } }
/* Two deliberate lines instead of automatic word fragments. */
.idea { width:min(560px,55vw); }
.idea .glass-title { font-size:clamp(22px,2.5vw,32px); line-height:1.25; letter-spacing:-.025em; }
.idea .glass-title span { display:block; white-space:nowrap; }
@media(max-width:800px) {
 .idea { width:min(440px,calc(100vw - 48px)); padding:24px 22px; }
 .idea .glass-title { font-size:clamp(17px,4.25vw,28px); }
}
/* Shared reading scale across scroll panels and navigation. */
.services-list { font-size:20px; line-height:1.4; }
.idea { width:min(440px,52vw); }
.idea .glass-title { font-size:24px; line-height:1.35; }
.price-name { font-size:18px; line-height:1.35; }
.price-cost { font-size:17px; }
.price-desc { font-size:14px; line-height:1.5; }
.price-time { font-size:12px; letter-spacing:.02em; }
.web-price { font-size:16px; }
.nav-links a { font-size:12px; padding:12px 18px; letter-spacing:.08em; }
.final h2 { font-size:12px; letter-spacing:.08em; }
.final h2 a { padding:12px 18px; gap:12px; }
.final { left:calc(50% - max(8.3vw,14.76svh) - 78px); }
@media(max-width:800px) {
 .services-list { font-size:18px; }
 .idea { width:min(400px,calc(100vw - 48px)); }
 .idea .glass-title { font-size:clamp(17px,4.25vw,24px); }
 .price-name,.price-cost { font-size:15px; }
 .price-desc { font-size:13px; }
 .price-time { font-size:11px; }
 .web-price { font-size:14px; }
 .nav-links a { font-size:11px; padding:11px 12px; }
 .final h2 { font-size:11px; }
 .final h2 a { padding:11px 14px; gap:10px; }
}
@media(max-width:600px) {
 .nav { gap:14px; }
 .nav-links { flex-wrap:wrap; gap:6px; }
 .nav-links a { padding:10px 12px; }
 .final { left:max(102px,calc(50% - 14.76svh - 78px)); }
}
/* Restrained reading hierarchy and the approved smaller controls. */
.services-list { font-size:18px; line-height:1.4; }
.idea .glass-title { font-size:22px; line-height:1.35; }
.idea { width:min(410px,52vw); }
.price-name { font-size:16px; }
.price-cost { font-size:15px; white-space:nowrap; }
.price-desc { font-size:13px; line-height:1.55; max-width:470px; }
.price-time { font-size:10px; margin-top:6px; margin-bottom:8px; }
.price-item { padding:15px 0; }
.web-price { font-size:14px; padding-top:18px; gap:12px 18px; }
.nav-links a { font-size:10px; padding:10px 16px; letter-spacing:.12em; }
.final h2 { font-size:10px; letter-spacing:.12em; }
.final h2 a { padding:12px 17px; gap:13px; }
.final { left:calc(50% - max(8.3vw,14.76svh) - 58px); }
@media(max-width:800px) {
 .services-list { font-size:17px; }
 .idea { width:min(380px,calc(100vw - 48px)); }
 .idea .glass-title { font-size:clamp(16px,4vw,22px); }
 .price-name,.price-cost { font-size:14px; }
 .price-desc { font-size:12px; }
 .web-price { font-size:13px; }
 .nav-links a { font-size:9px; padding:9px 8px; }
 .final h2 { font-size:9px; }
 .final h2 a { padding:11px 14px; gap:11px; }
}
@media(max-width:600px) {
 .nav-links a { padding:8px 6px; }
 .final { left:max(83px,calc(50% - 14.76svh - 58px)); }
 .final h2 a { padding:10px 12px; gap:9px; }
 .price-top { grid-template-columns:1fr auto; }
 .price-number { display:none; }
 .price-time,.price-desc { margin-left:0; }
 .price-item { padding:12px 0; }
}
/* Narrow-screen final action stays in the white space beneath the camera. */
@media(max-width:600px) {
 .final { top:51.5%; left:72px; }
 .final h2 { font-size:8px; letter-spacing:.08em; }
 .final h2 a { padding:10px 9px; gap:6px; }
}
/* Dedicated portrait experience. Desktop presentation is unchanged. */
.mobile-menu-toggle { display:none; }
@media(max-width:800px) {
 .nav { top:max(20px,env(safe-area-inset-top)); left:20px; right:20px; display:flex; flex-wrap:nowrap; align-items:flex-start; }
 .nav-brand { position:relative; }
 .nav-logo { font-size:14px; }
 .brand-subtitle { max-width:none; font-size:8px; letter-spacing:.08em; }
 .nav-brand .language-switch { margin:10px 0 0 -8px; gap:0; height:40px; transition:opacity .2s; }
 .nav-brand .language-switch button { min-width:38px; min-height:40px; padding:8px; }
 .mobile-menu-toggle { display:block; min-height:42px; padding:0 16px; font:400 11px Onest,sans-serif; color:#29282e; background:linear-gradient(135deg,#ffffff70,#ffffff25); border:1px solid #ffffffb0; border-radius:12px; backdrop-filter:blur(16px); box-shadow:inset 0 1px #ffffffa0,0 4px 15px #29232f0b; }
 .mobile-menu-toggle:focus-visible { outline:2px solid #697d3e; outline-offset:3px; }
 .nav .nav-links { position:absolute; top:52px; right:0; width:170px; display:flex; flex-direction:column; gap:3px; padding:8px; border:1px solid #ffffffb0; border-radius:16px; background:linear-gradient(130deg,#ffffffa0,#ffffff50); backdrop-filter:blur(22px); box-shadow:inset 0 1px #fff,0 12px 30px #30293b16; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-5px); transition:opacity .18s,transform .18s,visibility .18s; }
 .nav.menu-open .nav-links { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
 .nav .nav-links a { min-height:44px; display:flex; align-items:center; padding:10px 13px; font-size:11px; letter-spacing:.06em; border:0; box-shadow:none; background:transparent; border-radius:9px; }
 .nav .nav-links a.active { background:#e1edbd40; }
 .nav .nav-links a.active::after { display:none; }
 .services { left:20px; top:48svh; width:min(290px,calc(100vw - 40px)); padding:23px; }
 .services-list { font-size:16px; gap:12px; }
 .idea { left:20px; top:55svh; width:min(380px,calc(100vw - 40px)); padding:22px; }
 .idea .glass-title { font-size:clamp(16px,4vw,22px); }
 .price { top:17svh; left:50%; width:calc(100vw - 32px); padding:18px; max-height:none; overflow:visible; }
 .price-heading { margin-bottom:7px; }
 .price-item { padding:11px 0; }
 .price-top { grid-template-columns:1fr auto; gap:8px; }
 .price-number { display:none; }
 .price-name,.price-cost { font-size:13px; }
 .price-time { font-size:9px; margin:5px 0 6px; }
 .price-desc { font-size:12px; line-height:1.4; margin-left:0; }
 .web-price { font-size:12px; gap:10px; padding-top:12px; }
 .final { position:fixed; left:20px; top:82px; width:auto; max-width:calc(100vw - 40px); z-index:110; text-align:left; }
 .final h2 { font-size:10px; letter-spacing:.08em; }
 .final h2 a { min-height:42px; padding:11px 14px; gap:10px; }
 .mobile-finale .nav-brand .language-switch { opacity:0; visibility:hidden; pointer-events:none; }
 .progress { right:6px; }
 html.reading .nav .nav-links { opacity:1; visibility:visible; pointer-events:auto; }
}
@media(max-width:800px) and (max-height:700px) {
 .price { top:120px; padding:14px 16px; }
 .price-item { padding:8px 0; }
 .price-desc { font-size:11px; line-height:1.35; }
 .price-heading { margin-bottom:3px; }
 .web-price { margin-top:6px; padding-top:9px; gap:7px; }
}

@media(max-width:800px) { .nav { pointer-events:none; } .mobile-menu-toggle,.nav-brand .language-switch { pointer-events:auto; } .mobile-finale .nav-brand .language-switch { pointer-events:none; } }

/* Compact mobile finale keeps clear of the shoulder. */
@media(max-width:800px) { .final h2 { font-size:9px; letter-spacing:.06em; } .final h2 a { padding:10px 10px; gap:7px; min-height:38px; } }
/* Preserve the full landscape frame in wide, shallow desktop windows. */
@media(min-width:801px) {
 .scene { background:linear-gradient(#e9e9ed 0%,#f4f4f6 70%,#fafafa 100%); }
 .hero-video { mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); }
 .final { left:calc(50% - var(--desktop-film-width,100vw) * .083 - 58px); }
}



/* Keep the full-resolution native video above the edge-only background. */
.hero-video { z-index:1; }

/* GEO: existing chapter composition, semantic labels and a concise studio note. */
.nav .nav-logo { padding:0; opacity:1; pointer-events:auto; }
.brand-subtitle { font-weight:400; text-transform:none; }
.services-list h3 { font:inherit; margin:0; }
.services-list a { display:block; }
.services-list a span { font-size:.8em; opacity:.55; }
.services-list a:hover { text-decoration:underline; text-underline-offset:5px; }
.glass-kicker,.idea h2 { font-weight:400; }
.studio-copy { margin-top:18px; font-size:14px; line-height:1.55; max-width:39ch; }
.price { overscroll-behavior:contain; }
.idea { max-height:calc(100svh - 160px); overflow-y:auto; }
@media(max-width:800px) { .idea { top:43svh; max-height:52svh; } .price { max-height:calc(100svh - 140px); overflow-y:auto; } .price-desc { font-size:14px; line-height:1.45; } }
html.reading .nav { position:absolute; }
html.reading .idea,html.reading .price { max-height:none; overflow:visible; }
html.reading .glass,html.reading .final { scroll-margin-top:25px; }

/* Let the camera lead the services frame; the translucent panel sits beneath it. */
@media(min-width:801px) {
 .services { left:clamp(36px,16vw,250px); top:auto; bottom:5svh; width:min(336px,31vw); padding:20px 22px; background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.14) 58%,rgba(255,255,255,.23)); border-color:rgba(255,255,255,.76); backdrop-filter:blur(9px) saturate(110%); -webkit-backdrop-filter:blur(9px) saturate(110%); box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 12px 32px rgba(24,22,30,.1); }
 .services-list { gap:8px; font-size:clamp(14px,1.12vw,18px); line-height:1.26; }
 .services .glass-kicker { margin-bottom:12px; }
}
@media(max-width:800px) {
 .services { top:auto; bottom:6svh; width:min(280px,calc(100vw - 40px)); padding:18px 20px; background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.12)); }
 .services-list { gap:7px; font-size:15px; line-height:1.25; }
 .services .glass-kicker { margin-bottom:10px; }
}

/* The services chapter is one deliberate editorial block below the lens. */
.services .glass-kicker{display:flex;align-items:center;gap:11px;letter-spacing:.18em}
.services .glass-kicker::before{content:"";width:7px;height:7px;background:#c8ff19;border:1px solid #313525;border-radius:50%;flex:none}
.services-list{margin-top:0}
.services-list h3:not(:last-child){border-bottom:1px solid rgba(29,29,33,.22)}
.services-list a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 0 8px;transition:padding-left .25s ease,color .25s ease}
.services-list a:hover{padding-left:7px;text-decoration:none;color:#3b5510}
.services-list a span{margin-left:auto;font-size:.76em;opacity:.72}
@media(min-width:801px){
 .services{left:clamp(42px,8vw,142px);bottom:5svh;width:clamp(390px,35vw,465px);padding:20px 29px 17px;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.19) 66%,rgba(255,255,255,.25));border-color:rgba(255,255,255,.82);backdrop-filter:blur(2px) saturate(107%);-webkit-backdrop-filter:blur(2px) saturate(107%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 48px rgba(34,32,41,.11)}
 .services .glass-kicker{margin-bottom:12px;font-size:11px}
 .services-list{gap:2px;font-size:clamp(17px,1.45vw,21px);line-height:1.25}
 .services-list a{padding:3px 0 5px}
}
@media(max-width:800px){
 .services{left:16px;bottom:7svh;width:min(340px,calc(100vw - 32px));padding:22px 23px 19px;background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.19));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
 .services .glass-kicker{margin-bottom:16px;font-size:10px}
 .services-list{gap:4px;font-size:17px;line-height:1.24}
}
@media(max-width:800px) and (max-height:720px){.services{bottom:2svh}}