/* ============================================================ RAWMEDIA — "Glass" · dark glassmorphism, media-forward ink base · warm #F0531E glow · frosted glass · Fraunces × General Sans ============================================================ */ :root{ --ink:#08080a; --ink-2:#101014; --paper:#ece9e2; --paper-hi:#f6f4ef; --grey:#918e88; --grey-dim:#615e59; --line:rgba(236,233,226,.12); --line-2:rgba(236,233,226,.26); --accent:#f0531e; --accent-soft:rgba(240,83,30,.5); /* glass system */ --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --glass-brd:rgba(255,255,255,.12); --glass-brd-hi:rgba(255,255,255,.24); --blur:18px; --radius:16px; --radius-lg:24px; --radius-pill:999px; --shadow:0 24px 60px -24px rgba(0,0,0,.65); --display:'Archivo','Helvetica Neue',Arial,sans-serif; --serif:'Archivo','Helvetica Neue',Arial,sans-serif; /* legacy alias — now the grotesque display face */ --sans:'General Sans','Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --maxw:1360px; --pad:clamp(20px,5vw,80px); } *{margin:0;padding:0;box-sizing:border-box} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:inherit} [hidden]{display:none!important} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--ink); color:var(--paper); line-height:1.5; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--accent);color:#0a0a0a} em{font-style:normal} /* ---------- Ambient glow + grain (fixed, behind everything) ---------- */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(58% 46% at 78% 8%,rgba(240,83,30,.20),transparent 68%), radial-gradient(46% 42% at 6% 96%,rgba(240,83,30,.10),transparent 70%), radial-gradient(80% 60% at 50% 120%,rgba(240,83,30,.06),transparent 70%); } body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml;utf8,"); background-size:150px 150px; } /* ---------- Type utilities ---------- */ .mono{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase} .index{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)} .index.center{text-align:center;display:block} .eyebrow{font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)} .sec-title{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,5rem);line-height:.98;letter-spacing:-.03em} .sec-title em{font-style:normal;color:var(--accent)} h2.sec-title--brand{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .18em} .sec-title__logo{height:clamp(2.2rem,5.5vw,4.6rem);width:auto;display:block;margin-left:-.02em} .lead{color:var(--grey);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;max-width:46ch} /* ---------- Custom cursor ---------- */ /* trailing dot removed — cursor is invisible until it enters media, then shows the label circle */ .cursor{position:fixed;top:0;left:0;width:0;height:0;border-radius:50%;background:var(--accent); pointer-events:none;z-index:300;transform:translate(-50%,-50%);opacity:0; display:grid;place-items:center; transition:width .35s var(--ease),height .35s var(--ease),opacity .35s var(--ease)} .cursor.big{width:82px;height:82px;opacity:1;box-shadow:0 0 40px rgba(240,83,30,.5)} .cursor__label{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:#0a0a0a;opacity:0;transform:scale(.6);transition:.3s var(--ease)} .cursor.big .cursor__label{opacity:1;transform:none} /* ---------- NAV ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:20px var(--pad);transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease); border-bottom:1px solid transparent} .nav.scrolled{padding:13px var(--pad);background:rgba(8,8,10,.55);backdrop-filter:blur(var(--blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);border-bottom:1px solid var(--glass-brd)} @keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} .nav{animation:navIn .9s var(--ease) .12s both} .brand{display:inline-flex;align-items:center} .brand__img{height:26px;width:auto;display:block;transition:height .4s var(--ease)} .nav.scrolled .brand__img{height:23px} .nav__links{display:flex;align-items:center;gap:34px} .nav__links a{font-size:.82rem;letter-spacing:.02em;color:var(--paper);opacity:.75;transition:opacity .3s} .nav__links a:hover{opacity:1} .nav__cta{border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:9px 18px!important;opacity:1!important; background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.3s var(--ease)!important} .nav__cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .nav__right{display:flex;align-items:center;gap:16px} .lang{display:flex;gap:1px} .lang a{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.08em;color:var(--grey-dim); background:none;border:none;cursor:pointer;padding:4px 6px;transition:.25s} .lang a.is-active{color:var(--accent)} .lang a:not(.is-active):hover{color:var(--paper)} /* ---------- Buttons / links ---------- */ .link-arrow{display:inline-flex;align-items:center;gap:.6em;font-size:.9rem;letter-spacing:.02em; padding-bottom:4px;border-bottom:1px solid var(--line-2);transition:border-color .3s,gap .3s var(--ease);width:fit-content} .link-arrow::after{content:"→";color:var(--accent);transition:transform .3s var(--ease)} .link-arrow:hover{border-color:var(--paper)} .link-arrow:hover::after{transform:translateX(5px)} /* glass + solid pill buttons (hero, forms) */ .btn-solid{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;font-family:var(--sans);font-weight:600; font-size:.9rem;letter-spacing:.01em;padding:16px 26px;border-radius:var(--radius-pill);border:1px solid var(--paper-hi); background:var(--paper-hi);color:var(--ink);transition:.35s var(--ease)} .btn-solid::after{content:"→";transition:transform .35s var(--ease)} .btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(255,255,255,.25)} .btn-solid:hover::after{transform:translateX(5px)} .btn-glass{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;font-family:var(--sans);font-weight:500; font-size:.9rem;letter-spacing:.01em;padding:16px 26px;border-radius:var(--radius-pill);border:1px solid var(--glass-brd); background:var(--glass);color:var(--paper);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); transition:.35s var(--ease)} .btn-glass:hover{background:var(--glass-2);border-color:var(--glass-brd-hi);transform:translateY(-2px)} .btn-glass__play{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--accent);color:#0a0a0a;font-size:.6rem;padding-left:2px;box-shadow:0 0 16px var(--accent-soft)} .btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer; font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; padding:15px 26px;border:1px solid var(--glass-brd);border-radius:var(--radius-pill); background:var(--glass);color:var(--paper);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:.35s var(--ease)} .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn-line.full{width:100%} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)} .reveal.in{opacity:1;transform:none} .line{display:block;overflow:hidden;padding-bottom:.04em} .reveal-y{display:inline-block;opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)} .reveal-y.in{opacity:1;transform:none} .line .reveal-y{opacity:1;transform:translateY(105%);transition:transform 1s var(--ease) var(--d,0s)} .line .reveal-y.in{transform:none} .reveal-lines .w{display:inline-block;overflow:hidden;vertical-align:top} .reveal-lines .w i{display:inline-block;font-style:inherit;transform:translateY(108%);transition:transform .85s var(--ease) var(--wd,0s)} .reveal-lines.in .w i{transform:none} /* ---------- HERO (glass trust hero) ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; padding:clamp(120px,20vh,190px) 0 clamp(60px,9vw,110px)} .hero__media{position:absolute;inset:0;z-index:-1} .hero__video{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.5) contrast(1.05)} .hero__scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,8,10,.82) 0%,rgba(8,8,10,.5) 30%,rgba(8,8,10,.66) 70%,var(--ink) 100%)} .hero__glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 44% at 72% 34%,rgba(240,83,30,.28),transparent 66%)} .hero__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad)} .badge{display:inline-flex;align-items:center;gap:.6em;padding:8px 16px;border-radius:var(--radius-pill); background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin-bottom:1.7rem} .badge__star{color:var(--accent);font-size:.8rem;filter:drop-shadow(0 0 6px var(--accent-soft))} /* Живой градиент — переливается внутри букв. Полотно втрое выше заголовка, а заливка периодична с шагом 66.667% полотна, что равно двум высотам заголовка — ровно тому, на сколько уезжает background-position за цикл. Поэтому цикл замыкается без стыка. Угол строго 180deg, и это обязательно. Для наклонного градиента CSS считает длину оси как |W·sin θ| + |H·cos θ|, то есть в неё входит ШИРИНА элемента: при 174deg ось получалась 1149px вместо 1038, период по вертикали — 770px против сдвига в 692px, и раз в цикл картинка прыгала. Наклон стоил шва, величина которого к тому же менялась с шириной окна. Стопы идут по косинусу, а не ломаной. Раньше палитра шла белый → оранжевый → белый тремя стопами, и в крайних точках направление менялось мгновенно — линейная интерполяция давала излом, читавшийся как рывок, дважды за цикл. Косинус гасит скорость у краёв до нуля, изломов не остаётся нигде. */ .hero__title{font-family:var(--display);font-weight:800;font-size:clamp(2.9rem,9.6vw,8rem);line-height:.9; letter-spacing:-.035em;max-width:14ch; background:linear-gradient(180deg, #fbf9f5 0%, #fbf3ed 4.1667%, #f9e1d6 8.3333%, #f8c6b3 12.5000%, #f6a68a 16.6667%, #f38660 20.8333%, #f26b3d 25%, #f05926 29.1667%, #f0531e 33.3333%, #f05926 37.5000%, #f26b3d 41.6667%, #f38660 45.8333%, #f6a689 50%, #f8c6b3 54.1667%, #f9e1d6 58.3333%, #fbf3ed 62.5000%, #fbf9f5 66.6667%, #fbf3ed 70.8333%, #f9e1d6 75%, #f8c6b3 79.1667%, #f6a68a 83.3333%, #f38660 87.5000%, #f26b3d 91.6667%, #f05926 95.8333%, #f0531e 100%); background-size:100% 300%;background-position:0% 0%; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:heroFlow 12s linear infinite; /* line-height .9 makes the line box shorter than the type, so on the last line the descenders of g, y and Q fall outside the element's box. With background-clip:text the letters are painted by the background, and the background does not exist outside that box — so those tails simply were not drawn. Visible in EN ("Agency") and RU, not in ES ("Full-Service"), which has no descenders at all. The padding gives the background room; the matching negative margins keep the layout exactly where it was. Safe for the animation: background-size and background-position are both relative to this same padding box, so the period still equals the travel. */ padding-block:.16em .22em;margin-block:-.16em -.22em} /* background-position не композитится — каждый кадр перерисовывает весь заголовок. will-change тут только продвигал слой, который всё равно перерисовывается, поэтому его нет. Вместо этого app.js вешает .is-idle, когда герой ушёл с экрана. Класс именно выключающий, а не включающий: если скрипт не отработает, анимация просто продолжит идти. */ .hero.is-idle .hero__title{animation-play-state:paused} @keyframes heroFlow{from{background-position:0% 0%}to{background-position:0% 100%}} .hero__title span{display:block} .hero__sub{margin-top:1.8rem;color:var(--paper);opacity:.82;font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.55;max-width:46ch} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem} /* The hero's first button is "work" on a wide screen and "quote" on a phone — see the burger breakpoint below for why. Only one is ever in the layout. */ .hero__quote{display:none} /* stats card */ .stats{margin-top:clamp(38px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-lg);overflow:hidden; backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);box-shadow:var(--shadow)} .stat{display:flex;align-items:center;gap:15px;padding:clamp(20px,2.4vw,30px);background:rgba(8,8,10,.28); transition:background .4s var(--ease)} .stat:hover{background:rgba(240,83,30,.06)} .stat__ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;display:grid;place-items:center; background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--accent)} .stat__ico svg{width:20px;height:20px} .stat b{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1;letter-spacing:-.01em; display:block;white-space:nowrap} .stat b + span{display:block;font-size:.72rem;letter-spacing:.02em;color:var(--grey);margin-top:6px;line-height:1.25} @media(max-width:560px){ /* Beside the icon the label had about 85px to wrap in, so one cell took a single line and the one next to it took three. The four numbers ended up at four different heights, and because each cell's content is only as wide as its own text, every one of them leaned on a different edge — the grid read as squeezed to the right. Stacked and centred, a cell is symmetric about its own middle and the labels get the full width to wrap in; grid-auto-rows keeps both rows the same height whatever the labels do. */ .stats{grid-auto-rows:1fr} .stat{flex-direction:column;align-items:center;text-align:center;gap:11px;padding:22px 14px} .stat b + span{margin-top:5px} } /* trusted-by row — infinite right-to-left marquee (two duplicate tracks, seamless loop) */ .trust{margin-top:clamp(34px,4vw,50px);display:flex;flex-direction:column;gap:16px} .trust__label{font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dim)} .trust__marquee{display:flex;overflow:hidden;user-select:none; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .trust__track{flex-shrink:0;display:flex;align-items:center;gap:clamp(30px,5vw,56px);padding-right:clamp(30px,5vw,56px); animation:trustScroll 28s linear infinite} .trust__marquee:hover .trust__track{animation-play-state:paused} .trust__track img{height:clamp(18px,2.4vw,26px);width:auto;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1);opacity:.4; transition:opacity .35s var(--ease)} .trust__track img:hover{opacity:.85} @keyframes trustScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* ---------- STATEMENT ---------- */ .statement{max-width:var(--maxw);margin-inline:auto;padding:clamp(90px,15vw,200px) var(--pad)} .statement .index{margin-bottom:2.5rem} .statement__text{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.6vw,4rem);line-height:1.12; letter-spacing:-.025em;max-width:20ch} .statement__text em{font-style:normal;color:var(--accent)} .statement__sign{margin-top:2.5rem;color:var(--grey)} /* ---------- Section head ---------- */ .sec-head{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);margin-bottom:clamp(30px,5vw,60px); display:flex;flex-direction:column;gap:16px} .sec-head .index{order:-1} .sec-head .lead{margin-top:6px} /* ---------- WORK / GALLERY ---------- */ .work{padding-block:clamp(20px,5vw,50px) clamp(60px,10vw,130px)} .gallery{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad); display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);margin-block:clamp(10px,1.4vw,20px)} .tile{grid-column:span 3;display:block;position:relative;container-type:inline-size; margin-bottom:clamp(40px,5vw,74px)} .tile--wide{grid-column:span 6} .tile__frame{overflow:hidden;aspect-ratio:4/5;background:var(--ink-2);border-radius:var(--radius); border:1px solid var(--glass-brd);position:relative;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)} .tile--wide .tile__frame{aspect-ratio:16/9} .tile__frame img{width:100%;height:118%;object-fit:cover;will-change:translate,scale; translate:0 var(--py,0px);scale:var(--ps,1); transition:scale .9s var(--ease),filter .6s var(--ease);filter:saturate(.94) brightness(.9)} .tile__frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none; background:linear-gradient(transparent,rgba(8,8,10,.78));transition:opacity .5s var(--ease)} .tile:hover .tile__frame{border-color:var(--accent-soft);box-shadow:0 20px 50px -20px rgba(240,83,30,.35)} .tile:hover .tile__frame img{filter:saturate(1.02) brightness(1);--ps:1.03} /* big grotesque title straddling the bottom edge of the photo */ .tile__title{position:absolute;left:clamp(14px,3.5cqi,30px);right:clamp(14px,3.5cqi,30px);bottom:0;z-index:3; transform:translateY(46%);pointer-events:none; font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.03em; font-size:clamp(1.6rem,7cqi,4.6rem);color:var(--paper-hi);text-shadow:0 8px 44px rgba(0,0,0,.6); transition:transform .5s var(--ease)} .tile:hover .tile__title{transform:translateY(40%)} .tile__n{display:block;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.22em; color:var(--accent);margin-bottom:.7em;text-shadow:none} /* ---------- STUDIO ---------- */ .studio{max-width:var(--maxw);margin-inline:auto;padding:clamp(60px,10vw,140px) var(--pad); display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center} .studio__frame{overflow:hidden;aspect-ratio:4/5;background:var(--ink-2);border-radius:var(--radius-lg); border:1px solid var(--glass-brd);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)} .studio__frame img{width:100%;height:120%;object-fit:cover;will-change:translate,scale; translate:0 var(--py,0px);scale:var(--ps,1); transition:scale .9s var(--ease);filter:saturate(.96) brightness(.92)} .studio__media:hover .studio__frame{border-color:var(--accent-soft);box-shadow:0 24px 60px -24px rgba(240,83,30,.35)} .studio__media:hover .studio__frame img{--ps:1.03} .studio__text .index{margin-bottom:1.2rem} .studio__text .lead{margin:22px 0 30px} .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:26px; background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);overflow:hidden; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .spec{padding:20px 18px;background:rgba(8,8,10,.25)} .spec b{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;display:block} .spec span{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:8px} .spec em{font-style:normal;color:var(--paper)} .amenities{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px} .amenities li{font-size:.78rem;letter-spacing:.02em;color:var(--paper);opacity:.82; background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:8px 15px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.3s var(--ease)} .amenities li:hover{border-color:var(--accent-soft);opacity:1} /* ---------- STOCK ---------- */ .stock{padding-block:clamp(60px,10vw,130px)} .stock__features{display:flex;flex-wrap:wrap;gap:8px} .stock__promo{color:var(--paper);opacity:.82;font-size:.92rem;max-width:46ch} .stock__cta{width:fit-content} .stock__legal{color:var(--grey-dim);max-width:50ch;text-transform:none;letter-spacing:.01em;font-weight:400} .stock__grid{max-width:var(--maxw);margin:clamp(30px,5vw,56px) auto 0;padding:0 var(--pad); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)} .stock__tile{overflow:hidden;aspect-ratio:1;background:var(--ink-2);border-radius:var(--radius); border:1px solid var(--glass-brd);transition:border-color .4s var(--ease)} .stock__tile img{width:100%;height:116%;object-fit:cover;will-change:translate,scale; translate:0 var(--py,0px);scale:var(--ps,1);opacity:1; transition:scale .9s var(--ease),filter .6s var(--ease),opacity .6s var(--ease);filter:saturate(.9) brightness(.9)} .stock__tile:hover{border-color:var(--accent-soft)} .stock__tile:hover img{--ps:1.05;filter:saturate(1.05) brightness(1)} /* ---------- CONTACT ---------- */ .contact{max-width:var(--maxw);margin-inline:auto;padding:clamp(60px,10vw,130px) var(--pad)} .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px)} .contact__title{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.94; letter-spacing:-.035em;margin:14px 0 22px} .contact__list{list-style:none;margin:30px 0;display:flex;flex-direction:column} .contact__list li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid var(--line)} .contact__list li:last-child{border-bottom:1px solid var(--line)} .contact__list .mono{color:var(--grey-dim);font-size:.62rem} .contact__list a{font-family:var(--sans);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;transition:color .3s} .contact__list a:hover{color:var(--accent)} .contact__list em{font-style:normal;color:var(--grey);font-size:.85rem;font-family:var(--sans)} .ai-chip{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey); background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:9px 16px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .ai-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite; box-shadow:0 0 10px var(--accent-soft)} @keyframes pulse{50%{opacity:.3;transform:scale(.7)}} /* form (glass panel) */ .contact__formwrap{position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-lg); padding:clamp(24px,3.5vw,44px);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); box-shadow:var(--shadow)} .contact__form{display:flex;flex-direction:column;gap:22px} .field{display:flex;flex-direction:column;gap:9px} .field label,.field__label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)} .contact__form input:not(.hp),.contact__form textarea{ background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:8px 0; color:var(--paper);font-family:var(--sans);font-weight:500;font-size:1.1rem;resize:vertical;transition:border-color .3s} .contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--accent)} .contact__form input::placeholder,.contact__form textarea::placeholder{color:var(--grey-dim)} .field__err{font-size:.66rem;letter-spacing:.04em;color:var(--accent);display:none} .field.invalid .field__err{display:block} .field.invalid input,.field.invalid textarea{border-color:var(--accent)} .chips-select{display:flex;flex-wrap:wrap;gap:8px} .chip-sel{font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--paper);opacity:.85; background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:8px 15px;cursor:pointer; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.25s var(--ease)} .chip-sel:hover{border-color:var(--glass-brd-hi);opacity:1} .chip-sel[aria-pressed="true"]{background:var(--accent);color:#0a0a0a;border-color:var(--accent);opacity:1; box-shadow:0 0 18px var(--accent-soft)} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .form-note{font-size:.62rem;color:var(--grey-dim);letter-spacing:.03em;line-height:1.6} .form-success{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 0} .form-success__icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0a0a0a;font-size:1.4rem; box-shadow:0 0 30px var(--accent-soft)} .form-success h3{font-family:var(--display);font-weight:700;font-size:2rem} .form-success p{color:var(--grey);font-size:.92rem;max-width:34ch} .form-success__actions{display:flex;gap:10px;margin-top:6px} /* ---------- MAP ---------- */ .map{position:relative;overflow:hidden;margin-top:clamp(50px,8vw,90px);height:clamp(300px,46vh,480px); border-radius:var(--radius-lg);border:1px solid var(--glass-brd)} .map__frame{width:100%;height:100%;border:0;display:block; filter:grayscale(.85) invert(.92) contrast(.9) hue-rotate(178deg) brightness(.92);transition:filter .6s var(--ease)} .map:hover .map__frame{filter:grayscale(.5) invert(.9) contrast(.94) hue-rotate(178deg) brightness(.98)} .map__overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between; align-items:flex-start;padding:clamp(18px,3vw,30px);box-shadow:inset 0 0 0 1px var(--line),inset 0 0 120px 20px rgba(8,8,10,.5)} .map__tag{pointer-events:auto;display:flex;align-items:center;gap:13px;background:rgba(8,8,10,.55); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-brd); border-radius:var(--radius-pill);padding:13px 20px} .map__tag-txt b{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1;display:block} .map__tag-txt .mono{display:block;font-size:.58rem;color:var(--grey);margin-top:6px} .map__dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex-shrink:0; box-shadow:0 0 0 5px rgba(240,83,30,.18);animation:pulse 1.8s infinite} .map__dir{pointer-events:auto} /* ---------- FOOTER ---------- */ .footer{max-width:var(--maxw);margin-inline:auto;padding:clamp(50px,7vw,80px) var(--pad) 46px;border-top:1px solid var(--line)} .footer__brand{display:inline-flex;align-items:center} .footer__logo{height:clamp(40px,6vw,70px);width:auto;display:block} .footer__tag{margin-top:18px;color:var(--grey)} .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; margin-top:clamp(40px,7vw,80px);padding-top:24px;border-top:1px solid var(--line); font-size:.72rem;letter-spacing:.04em;color:var(--grey)} .footer__links{display:flex;gap:22px} .footer__links a:hover{color:var(--paper)} /* ---------- Burger / mobile ---------- */ .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px} .burger span{width:24px;height:1.5px;background:var(--paper);transition:.3s var(--ease)} .burger[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)} /* ---------- LIGHTBOX (photo grid / viewer, video grid / player, about) ---------- */ .lightbox{position:fixed;inset:0;z-index:400;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:rgba(8,8,10,.94);backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2)} .lightbox__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px var(--pad);background:rgba(8,8,10,.7);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); border-bottom:1px solid var(--line)} .lightbox__title{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.02em} .lightbox__close{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass); color:var(--paper);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease)} .lightbox__close:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .lightbox__grid{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,3vw,40px) var(--pad) 60px; display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(10px,1.2vw,16px)} .lightbox__grid button.lb-thumb{all:unset;cursor:pointer;display:block;overflow:hidden;border-radius:var(--radius); border:1px solid var(--glass-brd);background:var(--ink-2);aspect-ratio:4/3;transition:border-color .3s var(--ease)} .lightbox__grid button.lb-thumb:hover{border-color:var(--accent-soft)} .lightbox__grid button.lb-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) brightness(.92); transition:filter .4s var(--ease),scale .5s var(--ease)} .lightbox__grid button.lb-thumb:hover img{filter:saturate(1.03) brightness(1);scale:1.04} .lightbox__extlink{max-width:var(--maxw);margin:-30px auto 50px;display:flex;width:fit-content} .lightbox__extlink[hidden]{display:none} .lightbox__grid--video button.lb-thumb{aspect-ratio:16/9;position:relative} .lightbox__grid--video button.lb-thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center; font-size:1.1rem;color:#0a0a0a;pointer-events:none} .lightbox__grid--video button.lb-thumb .play-ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:52px;height:52px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#0a0a0a; font-size:1rem;padding-left:3px;box-shadow:0 0 26px var(--accent-soft);transition:.3s var(--ease)} .lightbox__grid--video button.lb-thumb:hover .play-ico{transform:translate(-50%,-50%) scale(1.1)} .lightbox__grid--video .lb-thumb__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;z-index:1; background:linear-gradient(transparent,rgba(8,8,10,.85));font-size:.78rem;font-weight:500;color:var(--paper);text-align:left} .lightbox__viewer,.lightbox__player{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center; background:rgba(6,6,8,.98);padding:clamp(16px,4vw,60px)} .lightbox__viewer img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:var(--shadow)} /* z-index keeps the arrows above the video iframe, which paints in its own layer */ .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%; border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper);cursor:pointer;display:grid;place-items:center; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.3s var(--ease)} .lightbox__nav:hover{background:var(--paper);color:var(--ink)} .lightbox__prev{left:clamp(10px,3vw,40px)} .lightbox__next{right:clamp(10px,3vw,40px)} .lightbox__back{position:absolute;top:18px;left:var(--pad);display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;color:var(--paper);background:var(--glass); border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:10px 18px;backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);transition:.3s var(--ease);z-index:1} .lightbox__back:hover{background:var(--paper);color:var(--ink)} .lightbox__embed{width:min(1100px,92vw);aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--glass-brd);box-shadow:var(--shadow)} .lightbox__embed iframe{width:100%;height:100%;border:0;display:block} /* ---------- ABOUT ---------- */ .about{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,4vw,54px) var(--pad) 80px; display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start} .about__lead{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.28; letter-spacing:-.015em;margin-bottom:18px} .about__text{color:var(--grey);font-size:1rem;line-height:1.65;max-width:52ch} .about__footer{color:var(--grey-dim);margin-top:20px} .about__specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .spec-tag{font-size:.74rem;letter-spacing:.03em;color:var(--paper);opacity:.85;background:var(--glass); border:1px solid var(--glass-brd);border-radius:var(--radius-pill);padding:8px 15px;backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)} .about__ai-note{margin-top:22px;font-size:.82rem;color:var(--grey-dim);font-style:normal} .about__ai-cta{margin-top:16px} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)} .team-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-brd); background:var(--ink-2);aspect-ratio:3/3.6;transition:border-color .4s var(--ease)} .team-card:hover{border-color:var(--accent-soft)} .team-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85); transition:filter .5s var(--ease),scale .6s var(--ease)} .team-card:hover img{filter:grayscale(0) brightness(.62);scale:1.04} .team-card__meta{position:absolute;left:0;right:0;bottom:0;padding:16px; background:linear-gradient(transparent,rgba(8,8,10,.92) 55%)} .team-card__name{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--paper-hi)} .team-card__bio{margin-top:8px;font-size:.78rem;line-height:1.5;color:var(--paper);opacity:0;max-height:0; transition:opacity .4s var(--ease),max-height .4s var(--ease)} .team-card:hover .team-card__bio{opacity:.9;max-height:8em} .statement__about{margin-top:1.6rem} @media(max-width:900px){ .about{grid-template-columns:1fr} .team-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:680px){ .lightbox__bar{padding:14px var(--pad)} .lightbox__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .team-grid{grid-template-columns:repeat(2,1fr)} .lightbox__nav{width:38px;height:38px} } @media(max-width:1000px){ .stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .studio,.contact__grid{grid-template-columns:1fr} .studio__media{order:-1} .tile{grid-column:span 3} } @media(max-width:680px){ .cursor{display:none} .nav__links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;gap:0; background:rgba(8,8,10,.9);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); padding:90px var(--pad) 40px;transform:translateY(-100%);transition:transform .5s var(--ease);height:100svh;justify-content:center} .nav.open .nav__links{transform:none} .nav__links a{font-family:var(--serif);font-size:2rem;padding:14px 0;opacity:1} .nav__cta{border:0;padding:14px 0!important;background:none;backdrop-filter:none} .burger{display:flex;z-index:101} .hero__cta{flex-direction:column;align-items:stretch} .btn-solid,.btn-glass{justify-content:center} /* This is the breakpoint where the nav collapses into the burger, taking the quote button with it. Swapping the hero's button is what keeps the one action worth making easy on screen; the work section is a scroll away and needs no button of its own. */ .hero__work{display:none} .hero__quote{display:inline-flex} .gallery{grid-template-columns:1fr;gap:14px} .tile,.tile--wide{grid-column:span 1} .tile__frame,.tile--wide .tile__frame{aspect-ratio:4/5} .stock__grid{grid-template-columns:1fr} .specs{grid-template-columns:repeat(2,1fr)} .footer__bottom{flex-direction:column;align-items:flex-start} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .reveal,.reveal-y,.reveal-lines .w i{opacity:1;transform:none} .hero__video{display:none} .cursor{display:none} } /* ---------- CHAT ---------- Glass panel docked bottom-right, full-width sheet on phones. The launcher hides itself while the panel is open so the two never overlap. */ .chat-fab{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:80; display:flex;align-items:center;gap:10px;padding:12px 18px 12px 15px;border-radius:var(--radius-pill); background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--paper); backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); box-shadow:var(--shadow);font-size:.82rem;letter-spacing:.01em; transition:transform .4s var(--ease),border-color .4s var(--ease),opacity .3s var(--ease)} .chat-fab:hover{transform:translateY(-2px);border-color:var(--glass-brd-hi)} .chat-fab[data-open="1"]{opacity:0;pointer-events:none;transform:translateY(8px)} .chat-fab__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0; box-shadow:0 0 0 0 var(--accent-soft);animation:chatPulse 2.4s ease-out infinite} @keyframes chatPulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 9px rgba(240,83,30,0)}100%{box-shadow:0 0 0 0 rgba(240,83,30,0)}} .chat{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:81; width:min(392px,calc(100vw - 28px));height:min(600px,calc(100vh - 110px)); display:flex;flex-direction:column;overflow:hidden; background:rgba(16,16,20,.72);border:1px solid var(--glass-brd);border-radius:var(--radius-lg); backdrop-filter:blur(calc(var(--blur) * 1.4)) saturate(1.35); -webkit-backdrop-filter:blur(calc(var(--blur) * 1.4)) saturate(1.35); box-shadow:var(--shadow);animation:chatIn .34s var(--ease) both} @keyframes chatIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .chat__head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px; border-bottom:1px solid var(--line);flex-shrink:0} .chat__avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 32% 28%,#ff8a5c,var(--accent) 62%,#a8300c); box-shadow:0 0 14px -2px var(--accent-soft)} .chat__who{display:flex;flex-direction:column;gap:2px;min-width:0} .chat__who b{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.01em} .chat__role{font-size:.68rem;letter-spacing:.04em;color:var(--grey);text-transform:uppercase} .chat__close{margin-left:auto;width:30px;height:30px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;font-size:1.3rem;line-height:1;color:var(--grey); border:1px solid var(--glass-brd);background:var(--glass); transition:color .3s var(--ease),border-color .3s var(--ease)} .chat__close:hover{color:var(--paper);border-color:var(--glass-brd-hi)} .chat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px; display:flex;flex-direction:column;gap:12px;scrollbar-width:thin} .chat__log::-webkit-scrollbar{width:6px} .chat__log::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .chat-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.5; white-space:pre-wrap;overflow-wrap:anywhere;animation:chatMsgIn .3s var(--ease) both} @keyframes chatMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .chat-msg--bot{align-self:flex-start;background:var(--glass-2);border:1px solid var(--glass-brd); border-bottom-left-radius:5px;color:var(--paper)} .chat-msg--user{align-self:flex-end;background:rgba(240,83,30,.16);border:1px solid rgba(240,83,30,.32); border-bottom-right-radius:5px;color:var(--paper-hi)} .chat-msg b{font-weight:600;color:var(--paper-hi)} /* Placeholder bubble: three dots until the first token, or a tool label ("calculating the quote…") when the assistant reaches for one. */ .chat-msg--wait{align-self:flex-start;display:flex;align-items:center;gap:7px; background:var(--glass);border:1px solid var(--glass-brd);border-bottom-left-radius:5px; color:var(--grey);font-size:.82rem} .chat-msg--wait i{width:5px;height:5px;border-radius:50%;background:var(--grey); animation:chatDot 1.2s ease-in-out infinite} .chat-msg--wait i:nth-child(2){animation-delay:.16s} .chat-msg--wait i:nth-child(3){animation-delay:.32s} @keyframes chatDot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .chat__form{display:flex;align-items:center;gap:9px;padding:12px 12px 14px; border-top:1px solid var(--line);flex-shrink:0} .chat__input{flex:1;min-width:0;padding:12px 15px;border-radius:var(--radius-pill); background:var(--glass);border:1px solid var(--glass-brd);color:var(--paper); font-family:inherit;font-size:.88rem;transition:border-color .3s var(--ease)} .chat__input::placeholder{color:var(--grey-dim)} .chat__input:focus{outline:none;border-color:var(--accent-soft)} .chat__send{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center; background:var(--accent);color:#fff;transition:transform .3s var(--ease),opacity .3s var(--ease)} .chat__send svg{width:19px;height:19px} .chat__send:hover{transform:translateX(2px)} .chat__send:disabled{opacity:.4;pointer-events:none} @media(max-width:560px){ .chat{right:0;bottom:0;width:100vw;height:88vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom:none} .chat-fab__label{display:none} .chat-fab{padding:14px;border-radius:50%} } /* the AI chip is a chat trigger now, not a label */ .ai-chip{cursor:pointer;transition:border-color .35s var(--ease),color .35s var(--ease)} .ai-chip:hover{border-color:var(--glass-brd-hi);color:var(--paper)} /* ---------- COOKIE CONSENT ---------- */ .cookies{position:fixed;left:50%;bottom:clamp(14px,2.2vw,26px);transform:translateX(-50%);z-index:90; width:min(430px,calc(100vw - 28px));display:flex;flex-direction:column;gap:12px;padding:20px 22px; background:rgba(16,16,20,.82);border:1px solid var(--glass-brd);border-radius:var(--radius-lg); backdrop-filter:blur(calc(var(--blur) * 1.4)) saturate(1.35); -webkit-backdrop-filter:blur(calc(var(--blur) * 1.4)) saturate(1.35); box-shadow:var(--shadow);animation:cookiesIn .4s var(--ease) both} @keyframes cookiesIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}} .cookies__text{font-size:.86rem;line-height:1.55;color:var(--paper);opacity:.9} .cookies__actions{display:flex;gap:10px} .cookies__btn{flex:1;padding:11px 16px;border-radius:var(--radius-pill);font-size:.82rem;font-weight:500; background:var(--paper-hi);color:var(--ink);transition:opacity .3s var(--ease)} .cookies__btn:hover{opacity:.85} .cookies__btn--ghost{background:var(--glass);border:1px solid var(--glass-brd);color:var(--paper)} .cookies__btn--ghost:hover{border-color:var(--glass-brd-hi);opacity:1} .cookies__more{font-size:.72rem;color:var(--grey);text-decoration:underline;text-underline-offset:3px} .cookies__more:hover{color:var(--paper)} /* Placeholder shown while the map is not allowed to load. */ .map__consent{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;padding:30px;text-align:center;background:var(--ink-2); font-size:.86rem;line-height:1.5;color:var(--grey)} .map__consent-btn{display:inline-block;padding:11px 22px;border-radius:var(--radius-pill); background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--paper);font-size:.8rem; transition:border-color .3s var(--ease)} .map__consent:hover .map__consent-btn{border-color:var(--glass-brd-hi)} @media(max-width:560px){ .cookies{left:14px;right:14px;transform:none;width:auto} @keyframes cookiesIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} } /* ---------- Web project inside the lightbox ---------- */ .lb-intro{max-width:var(--maxw);margin:0 auto;padding:clamp(18px,2.6vw,30px) var(--pad) 0; display:flex;flex-direction:column;gap:14px} .lb-intro__back{align-self:flex-start;font-size:.82rem} /* The arrow on .link-arrow points forward; here it leads back. */ .lb-intro__back::after{content:none} .lb-intro__back::before{content:"←";color:var(--accent);transition:transform .3s var(--ease)} .lb-intro__back:hover::before{transform:translateX(-5px)} .lb-intro__text{color:var(--grey);font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.65;max-width:62ch; white-space:pre-line} /* Project cards: wider than a photo thumb, with the name under the shot. */ .lightbox__grid--projects{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))} .lightbox__grid--projects button.lb-thumb{aspect-ratio:auto} .lb-proj__shot{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius)} .lb-proj__shot img{width:100%;height:100%;object-fit:cover;object-position:top} .lb-proj__name{display:block;padding:14px 4px 0;font-family:var(--display);font-weight:600; font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.01em;color:var(--paper)} .lb-proj__count{display:block;padding:4px 4px 0;font-size:.76rem;letter-spacing:.02em;color:var(--grey)} /* ---------- SHOWREEL ---------- */ /* The page does not go away, it recedes: the backdrop fades and blurs over it, then the player rises into place. Opening on a click means the browser lets the video start with sound — an autoplay without a gesture would be muted. */ .reel{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:clamp(16px,4vw,60px); background:rgba(6,6,8,.92);backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px) saturate(1.1); opacity:0;transition:opacity .55s var(--ease)} .reel.is-open{opacity:1} .reel__frame{width:min(1200px,100%);aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--glass-brd);background:#000;box-shadow:var(--shadow); transform:scale(.985);opacity:0;transition:transform .6s var(--ease) .1s,opacity .6s var(--ease) .1s} .reel.is-open .reel__frame{transform:none;opacity:1} .reel__frame video{width:100%;height:100%;display:block;object-fit:contain;background:#000} .reel__close{position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);z-index:2; width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;line-height:1; border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.3s var(--ease)} .reel__close:hover{background:var(--paper);color:var(--ink)} @media(prefers-reduced-motion:reduce){ .reel,.reel__frame{transition:none} } /* ---------- QUOTE CALCULATOR ---------- */ .quote{position:fixed;inset:0;z-index:450;display:grid;place-items:center;padding:clamp(12px,3vw,40px); background:rgba(6,6,8,.9);backdrop-filter:blur(24px) saturate(1.1);-webkit-backdrop-filter:blur(24px) saturate(1.1); opacity:0;transition:opacity .45s var(--ease)} .quote.is-open{opacity:1} .quote__panel{width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden; background:rgba(16,16,20,.86);border:1px solid var(--glass-brd);border-radius:var(--radius-lg); box-shadow:var(--shadow);transform:translateY(12px);transition:transform .5s var(--ease) .05s} .quote.is-open .quote__panel{transform:none} .quote__head{display:flex;align-items:center;gap:14px;padding:20px clamp(18px,3vw,28px); border-bottom:1px solid var(--line);flex-shrink:0} .quote__heading{flex:1;min-width:0} .quote__title{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.02em} .quote__step{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:5px} .quote__back,.quote__close{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center; border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper);transition:.3s var(--ease)} .quote__close{font-size:1.4rem;line-height:1} .quote__back:hover,.quote__close:hover{background:var(--paper);color:var(--ink)} .quote__body{padding:clamp(18px,3vw,28px);overflow-y:auto;overscroll-behavior:contain} /* option cards — the whole flow is these */ .q-opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))} .q-opt{display:flex;flex-direction:column;gap:6px;padding:18px;text-align:left;border-radius:var(--radius); border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper); transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)} .q-opt:hover{border-color:var(--glass-brd-hi);background:var(--glass-2);transform:translateY(-2px)} .q-opt.is-on{border-color:var(--accent);background:rgba(240,83,30,.1)} .q-opt__name{font-weight:500;font-size:.98rem;line-height:1.3} .q-opt__note{font-size:.78rem;color:var(--grey);line-height:1.4} .q-opt__plus{font-size:.8rem;color:var(--accent)} .q-ask{font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.45;margin-bottom:18px;color:var(--paper)} .q-hint{font-size:.8rem;color:var(--grey);margin-top:12px;line-height:1.5} /* number step */ .q-num{display:flex;align-items:center;gap:14px;margin-bottom:6px} .q-num button{width:52px;height:52px;border-radius:50%;font-size:1.4rem;border:1px solid var(--glass-brd); background:var(--glass);color:var(--paper);transition:.3s var(--ease); /* Без явного центрирования знак съезжает: у