@font-face {
font-family: "Cabinet Grotesk";
src: url("../assets/fonts/cabinet-grotesk-300.woff2") format("woff2");
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: "Cabinet Grotesk";
src: url("../assets/fonts/cabinet-grotesk-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Cabinet Grotesk";
src: url("../assets/fonts/cabinet-grotesk-500.woff2") format("woff2");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Cabinet Grotesk";
src: url("../assets/fonts/cabinet-grotesk-700.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("../assets/fonts/switzer-300.woff2") format("woff2");
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("../assets/fonts/switzer-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("../assets/fonts/switzer-500.woff2") format("woff2");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("../assets/fonts/switzer-600.woff2") format("woff2");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Switzer";
src: url("../assets/fonts/switzer-700.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("../assets/fonts/space-mono.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
:root {
--gap-sec: clamp(52px, 6vw, 88px);
--paper: #f8f8f6;
--plaster: #f1f1ee;
--bone: #f4f5f2;
--esp: #0d0f11;
--esp2: #131619;
--esp3: #1b2025;
--mut-l: #a2a8a5;
--mut-d: #5c625f;
--copper: #0aabb0;
--copper-hi: #56d9dc;
--copper-deep: #077e82;
--scan: #00c7cb;
--line-d: rgba(244, 245, 242, 0.13);
--line-dd: rgba(244, 245, 242, 0.26);
--line-l: rgba(13, 15, 17, 0.16);
--max: 1360px;
--pad: clamp(20px, 4.5vw, 64px);
--disp: "Cabinet Grotesk", "Segoe UI", Arial, sans-serif;
--sans: "Switzer", "Segoe UI", Tahoma, Arial, sans-serif;
--mono: "Space Mono", "Courier New", monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--r-s: 9px;
--r-m: 16px;
--r-l: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--esp);
color: var(--bone);
font-family: var(--sans);
font-size: 17px;
font-weight: 400;
line-height: 1.66;
letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
::selection { background: rgba(10, 171, 176, 0.55); color: #fff; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.08em; }
.serif-it { font-family: var(--disp); font-style: normal; font-weight: 400; color: var(--copper-hi); }
.section-note { margin-top: 18px; font-size: 10px; letter-spacing: 0.2em; color: var(--mut-l); }
h2 {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(2.4rem, 5vw, 4.3rem);
line-height: 1.04;
letter-spacing: -0.015em;
}
h2 .serif-it { font-weight: 400; color: var(--copper-hi); }
.tickbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 0 32px;
border: 1px solid var(--line-dd);
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bone);
background: transparent;
transition: background 0.4s var(--ease), color 0.4s, border-color 0.4s, transform 0.35s var(--ease);
}
.tickbtn::before, .tickbtn::after {
content: "";
position: absolute;
width: 7px; height: 7px;
border-color: var(--copper);
border-style: solid;
transition: all 0.35s var(--ease);
}
.tickbtn::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.tickbtn::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.tickbtn:hover { background: rgba(244, 245, 242, 0.06); transform: translateY(-2px); }
.tickbtn:hover::before, .tickbtn:hover::after { width: 100%; height: 100%; }
.tickbtn-solid { background: var(--copper); border-color: var(--copper); color: #0c0e10; }
.tickbtn-solid:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.tickbtn-solid::before, .tickbtn-solid::after { border-color: #0c0e10; }
.tickbtn-dark { background: var(--copper); border-color: var(--copper); color: #0c0e10; }
.tickbtn-dark::before, .tickbtn-dark::after { border-color: #0c0e10; }
.tickbtn-dark:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.tickbtn-wa { background: var(--copper); border-color: var(--copper); color: #0c0e10; }
.tickbtn-wa:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.tickbtn-wa::before, .tickbtn-wa::after { border-color: #0c0e10; }
.wa-ic { width: 19px; height: 19px; }
.btn-arrow { font-size: 17px; transition: transform 0.3s var(--ease); }
.btn-submit:hover .btn-arrow { transform: translateX(5px); }
.loader {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background: var(--esp);
transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-line { width: 0; height: 1px; background: var(--copper); animation: lline 1s var(--ease) forwards; }
@keyframes lline { to { width: 210px; } }
.loader-word {
font-family: var(--disp);
font-weight: 400;
font-size: 34px;
letter-spacing: 0.42em;
text-indent: 0.42em;
animation: lfade 0.9s var(--ease) 0.15s both;
}
.loader-sub { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; color: var(--mut-l); animation: lfade 0.9s var(--ease) 0.35s both; }
@keyframes lfade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cursor {
position: fixed;
left: 0; top: 0;
z-index: 290;
width: 10px; height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--copper);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.3s, background 0.35s;
}
.cursor.on { opacity: 1; }
.cursor.grow { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(10, 171, 176, 0.16); border: 1px solid var(--copper); }
.cursor.label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(13, 15, 17, 0.72); border: 1px solid var(--copper); backdrop-filter: blur(3px); }
.cursor span {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--copper-hi);
opacity: 0;
transition: opacity 0.25s;
white-space: nowrap;
}
.cursor.label span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.frame { position: fixed; inset: 14px; z-index: 260; pointer-events: none; display: none; }
@media (min-width: 1100px) { .frame { display: block; } }
.frame-tick { position: absolute; width: 14px; height: 14px; border-color: rgba(244, 245, 242, 0.3); border-style: solid; }
.ft-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.ft-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.ft-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.ft-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 240;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px var(--pad);
transition: transform 0.5s var(--ease), background 0.5s, border-color 0.5s, padding 0.5s;
border-bottom: 1px solid transparent;
}
.header.tucked { transform: translateY(-100%); }
.header.scrolled {
padding: 13px var(--pad);
background: rgba(13, 15, 17, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--line-d);
}
.brand img { height: 33px; width: auto; }
.header-right { display: flex; align-items: center; gap: 26px; }
.header-phone { font-size: 11.5px; color: var(--mut-l); letter-spacing: 0.1em; transition: color 0.3s; }
.header-phone:hover { color: var(--copper-hi); }
.lang-link { font-size: 12px; color: var(--mut-l); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-s); padding: 7px 13px; transition: color 0.3s, border-color 0.3s; }
.lang-link:hover { color: var(--copper-hi); border-color: var(--copper-hi); }
.header .tickbtn { min-height: 44px; padding: 0 20px; font-size: 11.5px; }
.menu-toggle { display: inline-flex; align-items: center; gap: 10px; }
.menu-toggle .mono { font-size: 11px; letter-spacing: 0.24em; }
.menu-ic { position: relative; width: 26px; height: 12px; display: inline-block; }
.menu-ic span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--bone); transition: transform 0.4s var(--ease), top 0.4s var(--ease), width 0.4s; }
.menu-ic span:nth-child(1) { top: 1px; }
.menu-ic span:nth-child(2) { top: 9px; width: 70%; margin-left: 30%; }
.menu-toggle.open .menu-ic span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-toggle.open .menu-ic span:nth-child(2) { top: 5px; width: 100%; margin: 0; transform: rotate(-45deg); }
.menu {
position: fixed;
inset: 0;
z-index: 230;
background: rgba(13, 15, 17, 0.97);
backdrop-filter: blur(22px);
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s;
overflow-y: auto;
}
.menu.open { opacity: 1; visibility: visible; }
.menu-inner {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 60px;
max-width: var(--max);
margin: 0 auto;
padding: clamp(74px, 10vh, 104px) var(--pad) clamp(26px, 4vh, 44px);
}
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
display: flex;
align-items: baseline;
gap: 20px;
padding: clamp(5px, 0.85vh, 12px) 0;
border-bottom: 1px solid var(--line-d);
font-family: var(--disp);
font-weight: 400;
font-size: clamp(1.05rem, 2.35vh, 1.72rem);
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s, padding-left 0.35s var(--ease);
}
.menu.open .menu-links a { opacity: 1; transform: none; }
.menu-links a:hover { color: var(--copper-hi); padding-left: 14px; }
.menu-links i { font-size: 11px; color: var(--copper); font-style: normal; }
.menu.open .menu-links a { transition-delay: calc(0.04s + 0.032s * var(--i, 0)); }
.menu-links a:nth-child(1) { --i: 0; }
.menu-links a:nth-child(2) { --i: 1; }
.menu-links a:nth-child(3) { --i: 2; }
.menu-links a:nth-child(4) { --i: 3; }
.menu-links a:nth-child(5) { --i: 4; }
.menu-links a:nth-child(6) { --i: 5; }
.menu-links a:nth-child(7) { --i: 6; }
.menu-links a:nth-child(8) { --i: 7; }
.menu-links a:nth-child(9) { --i: 8; }
.menu-links a:nth-child(10) { --i: 9; }
.menu-links a:nth-child(11) { --i: 10; }
.menu-links a:last-child { color: var(--copper-hi); }
.menu-side { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.menu-side-k { font-size: 11.5px; color: var(--copper); letter-spacing: 0.18em; margin: 18px 0 4px; }
.menu-side a { font-size: 16px; color: var(--mut-l); transition: color 0.3s; }
.menu-side a:hover { color: var(--bone); }
.menu-side-t { color: var(--mut-l); font-size: 14px; }
.hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.8s var(--ease); }
body.loaded .hero-video { transform: scale(1); }
.hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(13, 15, 17, 0.94) 4%, rgba(13, 15, 17, 0.38) 38%, rgba(13, 15, 17, 0.18) 62%, rgba(13, 15, 17, 0.5) 100%),
linear-gradient(100deg, rgba(13, 15, 17, 0.5) 0%, transparent 45%);
}
.hero-scan {
position: absolute;
top: 0; bottom: 0;
width: 1px;
left: -4%;
background: linear-gradient(to bottom, transparent, rgba(0, 199, 203, 0.8), transparent);
box-shadow: 0 0 22px rgba(0, 199, 203, 0.45);
opacity: 0;
}
body.loaded .hero-scan { animation: scan 2.4s var(--ease) 1s 1; }
@keyframes scan {
0% { left: -4%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 104%; opacity: 0; }
}
.hero-annot {
position: absolute;
top: 110px;
right: var(--pad);
z-index: 2;
font-size: 9.5px;
line-height: 2;
letter-spacing: 0.22em;
color: rgba(244, 245, 242, 0.55);
text-align: right;
opacity: 0;
}
body.loaded .hero-annot { animation: lfade 1s var(--ease) 1.5s both; }
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad) clamp(20px, 4vh, 48px);
}
.hero-title {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(3rem, 8.4vw, 7.6rem);
line-height: 1.02;
letter-spacing: -0.02em;
}
.ht-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ht-line > span { display: inline-block; transform: translateY(112%); }
body.loaded .ht-line > span { animation: rise 1.15s var(--ease) forwards; }
body.loaded .ht-line:nth-child(1) > span { animation-delay: 0.35s; }
body.loaded .ht-line:nth-child(2) > span { animation-delay: 0.5s; }
@keyframes rise { to { transform: translateY(0); } }
.hero-title .serif-it { color: var(--copper-hi); font-weight: 400; }
.hero-foot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 22px 46px;
margin-top: clamp(22px, 3.4vh, 40px);
padding-top: 26px;
border-top: 1px solid var(--line-d);
opacity: 0;
}
body.loaded .hero-foot { animation: lfade 1s var(--ease) 1.05s both; }
.hero-sub { max-width: 400px; font-size: 15.5px; font-weight: 400; color: rgba(244, 245, 242, 0.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-terms { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; letter-spacing: 0.16em; color: rgba(244, 245, 242, 0.5); }
.hero-terms span { white-space: nowrap; }
.hero-marquee { position: relative; z-index: 2; border-top: 1px solid var(--line-d); overflow: hidden; background: rgba(13, 15, 17, 0.55); backdrop-filter: blur(4px); }
.hm-track { display: flex; width: max-content; animation: marq 40s linear infinite; }
.hm-track span {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
line-height: 2.2;
letter-spacing: 0.06em;
color: rgba(244, 245, 242, 0.35);
white-space: nowrap;
}
@keyframes marq { to { transform: translateX(-50%); } }
.story {
max-width: 1060px;
margin: 0 auto;
padding: var(--gap-sec) var(--pad);
text-align: center;
}
.story-text {
margin-top: 0;
font-family: var(--disp);
font-weight: 400;
font-size: clamp(1.5rem, 3.2vw, 2.55rem);
line-height: 1.4;
letter-spacing: -0.01em;
text-wrap: balance;
}
.story-text .w { color: rgba(244, 245, 242, 0.15); transition: color 0.3s ease; }
.story-text .w.lit { color: var(--bone); }
.story-text em { font-style: normal; }
.story-text em .w.lit { color: var(--copper-hi); }
.story-sign { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.story-sign .serif-it { font-size: 2.1rem; color: var(--copper-hi); }
.story-sign .mono { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.01em; color: var(--mut-l); }
.vision-head { text-align: center; padding: var(--gap-sec) var(--pad); }
.vision { height: 300vh; position: relative; }
.vision-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vis-found, .vis-plan img, .vis-done img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.vis-found { filter: saturate(0.6) contrast(0.97) brightness(0.85); }
.vis-plan {
position: absolute;
inset: 0;
clip-path: inset(0 0 100% 0);
will-change: clip-path;
background: var(--esp);
}
.vis-plan picture { position: absolute; inset: 0; display: block; }
.vis-done { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); will-change: clip-path; }
.vis-scanline {
position: absolute;
left: 0; right: 0;
top: 0;
height: 1.5px;
background: var(--scan);
box-shadow: 0 0 24px rgba(0, 199, 203, 0.6);
opacity: 0;
will-change: top;
}
.vis-divider {
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 1.5px;
background: var(--copper-hi);
box-shadow: 0 0 26px rgba(86, 217, 220, 0.6);
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.35s ease;
will-change: left;
}
.vis-phase {
position: absolute;
top: clamp(18px, 10.7vh, 96px);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
letter-spacing: 0.16em;
color: var(--bone);
white-space: nowrap;
padding: 8px 17px;
border-radius: 999px;
background: rgba(13, 15, 17, 0.72);
border: 1px solid rgba(244, 245, 242, 0.18);
backdrop-filter: blur(6px);
}
.vis-caption {
position: absolute;
inset-inline-start: var(--pad);
bottom: clamp(92px, 14vh, 128px);
z-index: 3;
}
.vis-caption h3 {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(2rem, 4.4vw, 3.8rem);
line-height: 1.05;
text-shadow: 0 2px 30px rgba(13, 15, 17, 0.8);
}
.vis-caption h3 .serif-it { color: var(--copper-hi); }
.vis-caption .mono { margin-top: 12px; font-size: 9.5px; letter-spacing: 0.22em; color: rgba(244, 245, 242, 0.75); }
.reveals-head { text-align: center; padding: var(--gap-sec) var(--pad); }
.scene { height: 210vh; position: relative; }
.scene-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene-before, .scene-after img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.scene-before { filter: saturate(0.55) contrast(0.96) brightness(0.82); }
.scene-after { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); will-change: clip-path; }
.scene-divider {
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 1.5px;
background: var(--copper-hi);
box-shadow: 0 0 26px rgba(86, 217, 220, 0.6);
transform: translateX(-50%);
will-change: left;
opacity: 0;
transition: opacity 0.35s ease;
}
.scene-pct {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--esp);
border: 1px solid var(--copper);
color: var(--copper-hi);
font-size: 12px;
letter-spacing: 0.1em;
padding: 8px 13px;
white-space: nowrap;
}
.scene-tag {
position: absolute;
top: 96px;
font-size: 11.5px;
letter-spacing: 0.14em;
padding: 9px 15px;
border: 1px solid var(--line-dd);
background: rgba(13, 15, 17, 0.55);
backdrop-filter: blur(6px);
transition: opacity 0.4s;
}
.scene-tag-b { right: var(--pad); }
.scene-tag-a { left: var(--pad); color: var(--copper-hi); border-color: rgba(10, 171, 176, 0.5); }
.scene-caption {
position: absolute;
inset-inline-start: var(--pad);
bottom: clamp(92px, 14vh, 128px);
z-index: 3;
max-width: 640px;
}
.scene-num {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(3.4rem, 7vw, 6rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(244, 245, 242, 0.45);
display: block;
}
.scene-caption h3 {
font-family: var(--disp);
font-weight: 500;
font-size: clamp(1.8rem, 3.4vw, 2.9rem);
line-height: 1.06;
letter-spacing: 0.01em;
margin-top: 6px;
text-shadow: 0 2px 30px rgba(13, 15, 17, 0.8);
}
.scene-caption .mono { margin-top: 10px; font-size: 10px; letter-spacing: 0.18em; color: rgba(244, 245, 242, 0.78); }
.what {
position: relative;
background: var(--paper);
color: var(--esp);
padding: var(--gap-sec) var(--pad);
}
.what-head { max-width: 1040px; }
.what-head h2 .serif-it { color: var(--copper-deep); }
.what-lede { margin-top: 20px; max-width: 560px; color: var(--mut-d); font-size: 17px; }
.what-split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(40px, 6vw, 90px);
align-items: start;
margin-top: clamp(34px, 5vw, 56px);
}
.what-list { display: flex; flex-direction: column; }
.wh-item {
padding: clamp(24px, 3vw, 34px) 0;
border-top: 1px solid var(--line-l);
opacity: 0.38;
transition: opacity 0.5s var(--ease);
cursor: default;
}
.wh-item:last-child { border-bottom: 1px solid var(--line-l); }
.wh-item.on { opacity: 1; }
.wh-top { display: flex; align-items: baseline; gap: 20px; }
.wh-name {
font-family: var(--disp);
font-weight: 500;
font-size: clamp(1.55rem, 2.6vw, 2.25rem);
line-height: 1.12;
letter-spacing: 0.002em;
}
.wh-desc { margin: 12px 0 0; color: var(--mut-d); font-size: 15.5px; max-width: 560px; }
.wh-fig { display: none; }
.what-media { position: sticky; top: 96px; }
.wm-stack {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--esp);
}
.wm-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.045);
transition: opacity 0.7s var(--ease), transform 1.2s var(--ease);
}
.wm-img.on { opacity: 1; transform: scale(1); }
.wm-stack::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 30%;
background: linear-gradient(to top, rgba(9, 11, 13, 0.65), transparent);
pointer-events: none;
}
.wm-tag {
position: absolute;
left: 18px; bottom: 16px;
z-index: 2;
font-size: 9.5px;
letter-spacing: 0.22em;
color: var(--bone);
text-shadow: 0 1px 12px rgba(9, 11, 13, 0.9);
}
.portfolio { background: #ffffff; color: var(--esp); padding: var(--gap-sec) var(--pad); }
.portfolio-inner { max-width: var(--max); margin: 0 auto; }
.portfolio-head { max-width: 900px; }
.portfolio-head h2 .serif-it { color: var(--copper-deep); }
.portfolio-lede { margin-top: 20px; max-width: 560px; color: var(--mut-d); font-size: 17px; }
.prj-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(30px, 3.6vw, 54px) clamp(20px, 2.6vw, 40px);
margin-top: clamp(40px, 5.5vw, 64px);
}
.prj-a { grid-column: span 12; }
.prj-b { grid-column: span 7; }
.prj-c { grid-column: span 5; }
.prj-d { grid-column: span 5; }
.prj-e { grid-column: span 7; }
.prj-media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--esp3);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: pan-y;
}
.prj-a .prj-media { aspect-ratio: 3 / 2; }
@media (min-width: 901px) {
.prj-b .prj-media, .prj-e .prj-media { aspect-ratio: 3 / 2; }
.prj-c .prj-media, .prj-d .prj-media { aspect-ratio: 21 / 20; }
}
.prj-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
-webkit-user-drag: none;
transition: opacity 0.42s var(--ease);
}
.prj-before { opacity: 0; filter: saturate(0.9) contrast(0.98); }
.prj.show-before .prj-before { opacity: 1; }
.prj.show-before .prj-after { opacity: 0; }
.prj-sweep {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(rgba(86, 217, 220, 0), var(--copper-hi), rgba(86, 217, 220, 0));
opacity: 0;
left: 0;
pointer-events: none;
}
.prj.show-before .prj-sweep { animation: prjSweep 0.52s var(--ease) forwards; }
@keyframes prjSweep {
0%   { opacity: 0; left: 0; }
18%  { opacity: 0.95; }
100% { opacity: 0; left: 100%; }
}
.prj-state {
position: absolute;
top: 14px;
inset-inline-start: 14px;
padding: 6px 11px;
border-radius: var(--r-s);
background: rgba(13, 15, 17, 0.74);
border: 1px solid rgba(244, 245, 242, 0.22);
color: #f4f5f2;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.13em;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
pointer-events: none;
}
.prj.show-before .prj-state { opacity: 1; transform: none; }
.prj-hold {
position: absolute;
bottom: 14px;
inset-inline-start: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(13, 15, 17, 0.62);
border: 1px solid rgba(244, 245, 242, 0.2);
color: rgba(244, 245, 242, 0.9);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
backdrop-filter: blur(6px);
transition: opacity 0.3s var(--ease);
pointer-events: none;
}
.prj-hold b { font-weight: 400; }
.prj-hold .hold-sm { display: none; }
@media (hover: none) {
.prj-hold .hold-lg { display: none; }
.prj-hold .hold-sm { display: inline; }
}
.prj-hold[data-pointer="coarse"] .hold-lg { display: none; }
.prj-hold[data-pointer="coarse"] .hold-sm { display: inline; }
.prj-hold[data-pointer="fine"] .hold-lg { display: inline; }
.prj-hold[data-pointer="fine"] .hold-sm { display: none; }
.prj-hold i {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--copper-hi);
animation: holdPulse 2.4s ease-in-out infinite;
}
@keyframes holdPulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.prj.show-before .prj-hold, .prj.was-used .prj-hold { opacity: 0; }
.prj-info { padding-top: 18px; }
.prj-info h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -0.005em; }
.prj-scope { margin-top: 8px; color: var(--mut-d); font-size: 15px; max-width: 520px; }
.mid-cta {
position: relative;
overflow: hidden;
max-width: min(var(--max), calc(100% - 2 * var(--pad)));
margin: 0 auto;
border-radius: var(--r-l);
border: 1px solid var(--line-d);
background: var(--esp2);
isolation: isolate;
}
.mid-cta-film {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.mid-cta-shade {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(90% 120% at 50% 46%, rgba(13, 15, 17, 0.3) 0%, rgba(13, 15, 17, 0.72) 78%),
linear-gradient(rgba(13, 15, 17, 0.22), rgba(13, 15, 17, 0.5));
}
.mid-cta-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2vw, 24px);
padding: clamp(62px, 8.5vw, 112px) clamp(22px, 5vw, 64px);
text-align: center;
}
.mid-cta-kicker { font-size: 9.5px; letter-spacing: 0.26em; color: var(--copper-hi); }
.mid-cta p { font-family: var(--disp); font-weight: 400; font-size: clamp(1.35rem, 2.7vw, 2.1rem); letter-spacing: 0.005em; max-width: 17ch; line-height: 1.18; }
.mid-cta .mid-cta-kicker, .mid-cta .mono { max-width: none; line-height: 1.8; }
.mid-cta .mono { font-size: 9.5px; letter-spacing: 0.22em; color: rgba(244, 245, 242, 0.7); }
.pricing { background: var(--esp2); padding: var(--gap-sec) var(--pad); }
.pricing-inner { max-width: var(--max); margin: 0 auto; }
.pricing-head { max-width: 860px; }
.pricing-lede { margin-top: 20px; max-width: 640px; color: var(--mut-l); font-size: 17px; }
.price-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: clamp(42px, 5.5vw, 70px);
background: var(--line-d);
border: 1px solid var(--line-d);
}
.price-card { background: var(--esp2); padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px); transition: background 0.4s var(--ease); }
.price-card:hover { background: var(--esp3); }
.pc-k { font-size: 12.5px; letter-spacing: 0.13em; color: var(--copper-hi); }
.pc-v { margin-top: 18px; font-family: var(--disp); font-weight: 300; font-size: 15px; color: var(--mut-l); letter-spacing: 0.02em; }
.pc-v b { display: block; margin-top: 4px; font-weight: 500; font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--bone); letter-spacing: -0.01em; }
.pc-d { margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--mut-l); }
.pricing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(34px, 4vw, 50px); }
.pricing-note { flex: 1 1 460px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; line-height: 1.7; color: var(--mut-l); text-transform: none; }
.legal { max-width: 820px; margin: 0 auto; padding: clamp(130px, 15vw, 190px) var(--pad) clamp(90px, 11vw, 140px); }
.legal h1 { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.015em; }
.legal .legal-date { margin-top: 14px; font-size: 9.5px; letter-spacing: 0.22em; color: var(--mut-l); }
.legal h2 { margin-top: 46px; font-family: var(--disp); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.legal p, .legal li { margin-top: 14px; color: rgba(244, 245, 242, 0.78); font-size: 16px; line-height: 1.8; }
.legal ul { margin-top: 8px; }
.legal li { position: relative; margin-top: 8px; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 5px; height: 5px; background: var(--copper); }
.legal a { color: var(--copper-hi); border-bottom: 1px solid rgba(86, 217, 220, 0.4); }
.legal-back { display: inline-block; margin-top: 54px; font-size: 10px; letter-spacing: 0.2em; color: var(--mut-l); border-bottom: 1px solid var(--line-dd); padding-bottom: 4px; }
.promise { background: var(--paper); padding: var(--gap-sec) var(--pad); }
.sheet {
position: relative;
max-width: 1180px;
margin: 0 auto;
background: var(--bone);
border: 1px solid var(--line-l);
padding: clamp(34px, 5vw, 74px);
color: var(--esp);
box-shadow: 0 40px 90px rgba(13, 15, 17, 0.12);
}
.sheet-head h2 { color: var(--esp); }
.sheet-head h2 .serif-it { color: var(--copper-deep); }
.sheet-lead { margin-top: 18px; max-width: 560px; color: var(--mut-d); font-size: 17px; }
.sheet-grid { position: relative; margin-top: clamp(36px, 5vw, 60px); }
.sheet-line { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; height: calc(100% - 16px); overflow: visible; }
.sheet-line path { stroke: var(--copper); stroke-width: 2; fill: none; }
.plan-steps { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); padding-left: 46px; }
.plan-steps li { position: relative; display: flex; gap: 20px; align-items: baseline; max-width: 720px; opacity: 0.35; transform: translateX(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.plan-steps li.on { opacity: 1; transform: none; }
.plan-steps li::before {
content: "";
position: absolute;
left: -41px;
top: 6px;
width: 8px; height: 8px;
background: var(--bone);
border: 1.5px solid var(--copper);
transform: rotate(45deg);
transition: background 0.4s;
}
.plan-steps li.on::before { background: var(--copper); }
.plan-steps i { font-size: 12.5px; color: var(--copper-deep); letter-spacing: 0.1em; flex: 0 0 46px; }
.plan-steps h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: 0.005em; }
.plan-steps p { margin-top: 6px; color: var(--mut-d); font-size: 15.5px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: clamp(34px, 5vw, 54px); }
.sheet-foot .mono { font-size: 9.5px; letter-spacing: 0.18em; color: var(--mut-d); max-width: 560px; line-height: 1.9; }
.founder {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
max-width: var(--max);
margin: 0 auto;
padding: var(--gap-sec) var(--pad) 0;
}
.founder-photo {
background: var(--bone);
padding: 14px;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
transform: rotate(-1.2deg);
position: relative;
}
.founder-photo img { width: 100%; filter: saturate(0.94); }
.founder-photo figcaption {
position: absolute;
left: 0; right: 0;
bottom: 16px;
text-align: center;
font-size: 9.5px;
letter-spacing: 0.26em;
color: var(--esp);
}
.founder-copy blockquote {
margin-top: 26px;
font-size: clamp(1.3rem, 2.1vw, 1.65rem);
font-weight: 400;
line-height: 1.52;
color: rgba(244, 245, 242, 0.92);
border-left: 1px solid var(--copper);
padding-left: 22px;
}
.founder-points { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.founder-points li { position: relative; font-size: 14.5px; letter-spacing: 0.01em; color: var(--mut-l); padding-left: 20px; line-height: 1.6; }
.founder-points li::before { content: "+"; position: absolute; left: 0; color: var(--copper); }
.wa-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--copper-hi); border-bottom: 1px solid rgba(10, 171, 176, 0.5); padding-bottom: 6px; transition: color 0.3s, border-color 0.3s; }
.wa-link:hover { color: var(--bone); border-color: var(--bone); }
.wa-link svg { width: 20px; height: 20px; }
.team { max-width: var(--max); margin: 0 auto; padding: var(--gap-sec) var(--pad) 0; }
.about { max-width: 780px; margin: 0 auto clamp(56px, 7vw, 92px); text-align: center; }
.about h2 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; }
.about h2 .serif-it { color: var(--copper-deep); }
.about p { margin-top: clamp(16px, 2vw, 22px); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; }
.team-kicker { text-align: center; font-size: 10px; letter-spacing: 0.24em; color: var(--mut-l); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(30px, 4vw, 50px); }
.team-card {
border: 1px solid var(--line-d);
background: var(--esp2);
padding: clamp(26px, 3.2vw, 40px);
text-align: center;
transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s;
}
.team-card:hover { transform: translateY(-5px); border-color: rgba(10, 171, 176, 0.5); background: var(--esp3); }
.team-photo {
display: block;
width: 104px; height: 104px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(10, 171, 176, 0.65);
padding: 3px;
background: var(--esp);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(0.95); }
.team-card h3 { font-family: var(--disp); font-weight: 500; font-size: 1.45rem; margin-top: 18px; }
.team-role { font-size: 14px; letter-spacing: 0.01em; color: var(--copper); margin-top: 7px; }
.team-bio { margin-top: 14px; color: rgba(244, 245, 242, 0.78); font-size: 15px; max-width: 320px; margin-left: auto; margin-right: auto; }
.team-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-d); font-size: 9px; letter-spacing: 0.18em; color: var(--mut-l); }
.proof { padding: var(--gap-sec) 0 0; }
.pfilm {
position: relative;
max-width: var(--max);
margin: 0 auto;
width: calc(100% - var(--pad) * 2);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(52px, 6vw, 84px) clamp(24px, 4vw, 56px);
border-radius: var(--r-l);
overflow: hidden;
border: 1px solid var(--line-d);
background: var(--esp2);
}
.pfilm-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfilm-shade {
position: absolute;
inset: 0;
background:
radial-gradient(120% 100% at 50% 50%, rgba(13, 15, 17, 0.58) 0%, rgba(13, 15, 17, 0.86) 72%),
linear-gradient(rgba(13, 15, 17, 0.16), rgba(13, 15, 17, 0.42));
}
.pfilm-copy {
position: relative;
text-align: center;
max-width: 720px;
}
.pfilm-copy h2 { font-size: clamp(1.7rem, 3.4vw, 3rem); }
.pfilm-sub { margin: 16px auto 0; color: rgba(244, 245, 242, 0.78); font-size: 16px; max-width: 480px; }
.greviews { margin-top: var(--gap-sec); background: var(--plaster); color: var(--esp); padding: var(--gap-sec) 0; }
.grev-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 30px;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad);
}
.grev-score { display: flex; align-items: center; gap: 14px; }
.grev-score .grev-count { font-size: 13px; color: var(--mut-d); font-weight: 500; }
.grev-bars { display: flex; flex-direction: column; gap: 4px; width: min(230px, 60vw); }
.grev-bars p { display: grid; grid-template-columns: 10px 1fr 22px; align-items: center; gap: 9px; font-size: 11px; color: var(--mut-d); font-family: var(--sans); }
.grev-bars i { display: block; height: 7px; border-radius: 4px; background: #e4e4df; position: relative; overflow: hidden; }
.grev-bars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 4px; background: #fbbc04; }
.grev-bars b { font-weight: 500; text-align: right; }
.g-logo { width: 38px; height: 38px; }
.grev-score b { font-size: 34px; font-weight: 700; font-family: var(--sans); }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; fill: #fbbc04; }
.stars-s svg { width: 14px; height: 14px; }
.grev-head .mono { font-size: 10px; letter-spacing: 0.18em; color: var(--mut-d); }
.grev-rail {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 34px max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))) 8px;
scrollbar-width: none;
cursor: grab;
}
.grev-rail::-webkit-scrollbar { display: none; }
.grev-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.grev-card {
flex: 0 0 min(400px, 84vw);
scroll-snap-align: start;
background: #fff;
border: 1px solid rgba(13, 15, 17, 0.08);
border-radius: 10px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 11px;
box-shadow: 0 10px 30px rgba(13, 15, 17, 0.07);
transition: transform 0.45s var(--ease), box-shadow 0.45s;
font-family: Roboto, Arial, "Segoe UI", sans-serif;
}
.grev-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(13, 15, 17, 0.12); }
.grev-card header { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 42px; height: 42px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--av, #666);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14.5px;
font-weight: 600;
}
.grev-card header b { font-size: 14.5px; font-weight: 600; color: #202124; display: block; }
.grev-card header div span { font-size: 12px; color: #5f6368; }
.g-mini { width: 18px; height: 18px; margin-left: auto; }
.grev-card p { font-size: 14px; line-height: 1.6; color: #3c4043; }
.grev-card p[dir="rtl"] { font-size: 15px; }
.grev-owner { margin-top: 12px; padding: 10px 14px; background: rgba(13, 15, 17, 0.05); border-left: 2px solid var(--copper); }
.grev-owner b { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #5f6368; margin-bottom: 4px; }
.grev-owner p { font-size: 13px; line-height: 1.55; color: #3c4043; }
.stars .star-empty path { fill: #dcdcd6 !important; }
.grev-cta { text-align: center; margin-top: 26px; font-size: 10px; letter-spacing: 0.18em; color: var(--mut-d); }
.grev-cta a { color: var(--copper-deep); border-bottom: 1px solid rgba(7, 126, 130, 0.5); }
.faq {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: clamp(40px, 5vw, 90px);
align-items: start;
max-width: var(--max);
margin: 0 auto;
padding: var(--gap-sec) var(--pad) 0;
}
.faq-head { position: sticky; top: 120px; }
.faq-list details { border-bottom: 1px solid var(--line-d); }
.faq-list summary {
display: flex;
align-items: baseline;
gap: 18px;
list-style: none;
cursor: pointer;
padding: 24px 0;
font-size: clamp(1.08rem, 1.7vw, 1.32rem);
font-weight: 400;
transition: color 0.3s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--copper-hi); }
.faq-list summary i { font-size: 10px; color: var(--copper); letter-spacing: 0.16em; flex: 0 0 44px; }
.faq-x { position: relative; width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; align-self: center; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; background: var(--copper); transition: transform 0.4s var(--ease); }
.faq-x::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.faq-x::after { top: 0; bottom: 0; left: 6px; width: 1.5px; }
details[open] .faq-x::after { transform: scaleY(0); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 0 24px 62px; color: var(--mut-l); font-size: 16px; max-width: 620px; }
.contact {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
max-width: var(--max);
margin: 0 auto;
padding: var(--gap-sec) var(--pad);
border-top: 1px solid var(--line-d);
background: radial-gradient(80% 60% at 80% 0%, rgba(10, 171, 176, 0.09) 0%, transparent 55%);
}
.contact h2 { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.contact-lead { margin-top: 20px; color: var(--mut-l); font-size: 17px; max-width: 440px; }
.contact-steps { margin-top: 30px; display: flex; flex-direction: column; gap: 13px; }
.contact-steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; letter-spacing: 0.01em; color: rgba(244, 245, 242, 0.85); }
.contact-steps i {
width: 28px; height: 28px;
flex: 0 0 auto;
border: 1px solid rgba(10, 171, 176, 0.6);
color: var(--copper-hi);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
font-style: normal;
}
.contact-direct { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line-d); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-tel { font-size: 14.5px; letter-spacing: 0.01em; color: var(--mut-l); }
.contact-tel:hover { color: var(--copper-hi); }
.contact-form {
background: var(--bone);
color: var(--esp);
padding: clamp(26px, 3.4vw, 44px);
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
position: relative;
}
.contact-form::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(13, 15, 17, 0.12);
pointer-events: none;
}
.form-title { font-size: 9.5px; letter-spacing: 0.3em; color: var(--copper-deep); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; }
.contact-form label > .fld {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--mut-d);
}
.contact-form input, .contact-form select, .contact-form textarea {
font-family: var(--sans);
font-size: 16px;
font-weight: 400;
color: var(--esp);
background: transparent;
border: 0;
border-bottom: 1px solid rgba(13, 15, 17, 0.3);
padding: 10px 2px;
outline: none;
border-radius: 0;
transition: border-color 0.3s;
width: 100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--copper-deep); }
.contact-form ::placeholder { color: rgba(13, 15, 17, 0.35); }
.contact-form select { appearance: none; cursor: pointer; }
.contact-form textarea { resize: vertical; min-height: 92px; }
.phone-field { display: flex; align-items: stretch; gap: 10px; }
.phone-field b { display: flex; align-items: center; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--mut-d); border-bottom: 1px solid rgba(13, 15, 17, 0.3); }
.file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 24px 16px;
border: 1px dashed rgba(13, 15, 17, 0.35);
cursor: pointer;
text-align: center;
transition: border-color 0.3s, background 0.3s;
}
.file-drop:hover, .file-drop.over { border-color: var(--copper-deep); background: rgba(10, 171, 176, 0.07); }
.file-drop svg { width: 24px; height: 24px; color: var(--copper-deep); }
.file-drop em { font-style: normal; font-size: 13.5px; color: var(--mut-d); }
.file-drop.has-files em { color: var(--copper-deep); font-weight: 600; }
.btn-submit { margin-top: 4px; width: 100%; }
.form-privacy { font-size: 8.5px; letter-spacing: 0.24em; color: var(--mut-d); text-align: center; }
.form-success { display: none; text-align: center; font-family: var(--sans); font-size: 14.5px; color: var(--copper-deep); }
.form-success.show { display: block; }
.footer { position: relative; margin-top: 0; overflow: hidden; }
.footer-water {
font-family: var(--disp);
font-weight: 400;
font-size: clamp(3rem, 10vw, 9.5rem);
line-height: 1.08;
text-align: center;
padding: clamp(40px, 6vw, 80px) var(--pad) 0;
color: transparent;
-webkit-text-stroke: 1px rgba(244, 245, 242, 0.24);
white-space: nowrap;
}
.footer-water .serif-it { -webkit-text-stroke: 0; color: rgba(86, 217, 220, 0.42); }
.footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: clamp(30px, 4vw, 60px);
max-width: var(--max);
margin: 0 auto;
padding: clamp(50px, 7vw, 80px) var(--pad);
}
.footer-brand img { height: 38px; width: auto; }
.footer-brand p { color: var(--mut-l); font-size: 14.5px; margin-top: 18px; max-width: 320px; }
.footer-col h4 { font-size: 13px; letter-spacing: 0.02em; color: var(--copper); margin-bottom: 18px; text-transform: none; }
.footer-col a { display: block; padding: 5px 0; font-size: 15px; color: rgba(244, 245, 242, 0.8); transition: color 0.3s, padding-left 0.3s; }
.footer-col a:hover { color: var(--copper-hi); padding-left: 6px; }
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
max-width: var(--max);
margin: 0 auto;
padding: 22px var(--pad) calc(22px + 66px);
border-top: 1px solid var(--line-d);
color: var(--mut-l);
font-size: 12.5px;
letter-spacing: 0.01em;
}
@media (min-width: 769px) { .footer-bottom { padding-bottom: 22px; padding-right: max(140px, var(--pad)); } }
.wa-float {
position: fixed;
right: 24px; bottom: 24px;
z-index: 210;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--copper);
color: #0c0e10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14px 36px rgba(10, 171, 176, 0.4);
transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.wa-float svg { width: 27px; height: 27px; }
.wa-float:hover { transform: translateY(-4px) scale(1.04); background: var(--copper-hi); box-shadow: 0 20px 46px rgba(10, 171, 176, 0.5); }
.mobile-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 215;
display: none;
grid-template-columns: 1fr 1.2fr 1.7fr;
gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(13, 15, 17, 0.94);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line-d);
}
.mobile-bar a {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
border: 1px solid var(--line-dd);
}
.mobile-bar .mb-main { background: var(--copper); border-color: var(--copper); color: #0c0e10; }
.hidden-frame { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }
.story { background: #ffffff; color: var(--esp); max-width: none; }
.story-inner { max-width: 1060px; margin: 0 auto; }
.story-text .w { color: rgba(13, 15, 17, 0.13); }
.story-text .w.lit { color: var(--esp); }
.story-text em .w.lit { color: var(--copper-deep); }
.story-sign .serif-it { color: var(--copper-deep); }
.story-sign .mono { color: var(--mut-d); }
.sec-white { background: #ffffff; color: var(--esp); }
.founder, .team { background: transparent; }
.founder { padding-bottom: 10px; }
.founder-copy h2 .serif-it { color: var(--copper-deep); }
.founder-copy blockquote { color: rgba(13, 15, 17, 0.84); border-left-color: var(--copper); }
.founder-points li { color: var(--mut-d); }
.founder-points li::before { color: var(--copper-deep); }
.founder-photo { box-shadow: 0 30px 70px rgba(13, 15, 17, 0.18); background: #fff; border: 1px solid rgba(13, 15, 17, 0.08); }
.wa-link { color: var(--copper-deep); border-bottom-color: rgba(7, 126, 130, 0.45); }
.wa-link:hover { color: var(--esp); border-color: var(--esp); }
.team { padding-bottom: var(--gap-sec); }
.team-kicker { color: var(--mut-d); }
.team-card { background: #fbfbf9; border: 1px solid rgba(13, 15, 17, 0.1); }
.team-card:hover { background: #ffffff; border-color: rgba(10, 171, 176, 0.55); transform: translateY(-5px); box-shadow: 0 24px 50px rgba(13, 15, 17, 0.1); }
.team-photo { background: #ffffff; border-color: rgba(10, 171, 176, 0.55); }
.team-card h3 { color: var(--esp); }
.team-role { color: var(--copper-deep); }
.team-bio { color: var(--mut-d); }
.team-meta { color: var(--mut-d); border-top-color: rgba(13, 15, 17, 0.1); }
.faq { background: #ffffff; color: var(--esp); display: block; max-width: none; padding-left: 0; padding-right: 0; padding-bottom: var(--gap-sec); }
.faq-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 5vw, 90px); align-items: start; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.faq h2 .serif-it { color: var(--copper-deep); }
.faq-list details { border-bottom: 1px solid rgba(13, 15, 17, 0.13); }
.faq-list summary:hover { color: var(--copper-deep); }
.faq-list summary i { color: var(--copper-deep); }
.faq-x::before, .faq-x::after { background: var(--copper-deep); }
.faq-a p { color: var(--mut-d); }
.contact {
display: block;
background: #ffffff;
color: var(--esp);
max-width: none;
margin: 0;
border-top: 1px solid rgba(13, 15, 17, 0.1);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
max-width: var(--max);
margin: 0 auto;
}
.contact h2 .serif-it { color: var(--copper-deep); }
.contact-lead { color: var(--mut-d); }
.contact-steps li { color: rgba(13, 15, 17, 0.75); }
.contact-steps i { border-color: rgba(7, 126, 130, 0.55); color: var(--copper-deep); }
.contact-direct { border-top-color: rgba(13, 15, 17, 0.12); }
.contact-tel { color: var(--mut-d); }
.contact-tel:hover { color: var(--copper-deep); }
.contact-form { background: var(--esp); color: var(--bone); box-shadow: 0 40px 90px rgba(13, 15, 17, 0.35); }
.contact-form::before { border-color: rgba(244, 245, 242, 0.14); }
.form-title { color: var(--copper-hi); }
.contact-form label > .fld { color: var(--mut-l); }
.contact-form input, .contact-form select, .contact-form textarea { color: var(--bone); border-bottom-color: rgba(244, 245, 242, 0.28); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--copper-hi); }
.contact-form ::placeholder { color: rgba(244, 245, 242, 0.35); }
.phone-field b { color: var(--mut-l); border-bottom-color: rgba(244, 245, 242, 0.28); }
.file-drop { border-color: rgba(244, 245, 242, 0.3); }
.file-drop:hover, .file-drop.over { border-color: var(--copper-hi); background: rgba(10, 171, 176, 0.08); }
.file-drop svg { color: var(--copper-hi); }
.file-drop em { color: var(--mut-l); }
.file-drop.has-files em { color: var(--copper-hi); }
.contact-form .tickbtn-dark { background: var(--copper); border-color: var(--copper); color: #0c0e10; }
.contact-form .tickbtn-dark:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.contact-form .tickbtn-dark::before, .contact-form .tickbtn-dark::after { border-color: #0c0e10; }
.form-privacy { color: var(--mut-l); }
.form-success { color: var(--copper-hi); }
.grev-card { border: 1px solid rgba(13, 15, 17, 0.09); }
@media (max-width: 1080px) { .faq-inner { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
.contact-inner { grid-template-columns: 1fr; }
.prj-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
.prj-a, .prj-b, .prj-c, .prj-d, .prj-e { grid-column: 1 / -1; }
.prj-a .prj-media { aspect-ratio: 4 / 3; }
}
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--rd, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 1080px) {
.founder { grid-template-columns: 1fr; }
.founder-photo { max-width: 440px; }
.faq { grid-template-columns: 1fr; }
.faq-head { position: static; }
.menu-inner { grid-template-columns: 1fr; gap: 14px; padding: clamp(64px, 9vh, 88px) var(--pad) 20px; }
.menu-side { padding-top: 2px; gap: 2px; flex-flow: row wrap; align-items: baseline; column-gap: 18px; }
.menu-side-k { margin: 0; width: 100%; }
.menu-side a { font-size: 14.5px; min-height: 34px; }
.team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.contact { grid-template-columns: 1fr; }
.pfilm-sub { font-size: 15px; margin-top: 13px; }
.what-split { grid-template-columns: 1fr; }
.what-media { display: none; }
.wh-item { opacity: 1; }
.wh-fig { display: block; margin-top: 16px; }
.wh-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-water { white-space: normal; }
}
@media (max-width: 768px) {
body { font-size: 16px; }
.header-phone { display: none; }
.header .tickbtn { display: none; }
.wa-float { display: none; }
.mobile-bar { display: grid; }
.hero-annot { display: none; }
.hero-title { font-size: clamp(2.7rem, 12.5vw, 4.2rem); }
.hero-sub { max-width: 100%; }
.hero-foot { padding-top: 20px; }
.hero-terms { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px;
letter-spacing: 0.06em; gap: 7px 10px; }
.menu-toggle { min-height: 44px; padding: 0 4px; }
.footer-col a { padding: 11px 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.legal p a { display: inline-block; padding: 9px 0; }
.lang-link { min-height: 40px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.prj-toggle { min-height: 44px; display: inline-flex; align-items: center; }
.wa-link { min-height: 44px; padding-bottom: 12px; }
.contact-tel { display: inline-flex; align-items: center; min-height: 44px; }
.menu-side a { display: inline-flex; align-items: center; min-height: 44px; }
.grev-cta a, .legal-back { display: inline-flex; align-items: center; min-height: 44px; }
.price-grid { grid-template-columns: 1fr; }
.pricing-foot .tickbtn, .mid-cta .tickbtn { width: 100%; justify-content: center; }
.mid-cta { border-radius: var(--r-m); margin-inline: var(--pad); }
.mid-cta { display: flex; flex-direction: column; }
.mid-cta-film { position: relative; inset: auto; height: auto; aspect-ratio: 1180 / 498; }
.mid-cta-shade {
inset: auto 0 auto 0; top: 0; aspect-ratio: 1180 / 498;
background: linear-gradient(rgba(13, 15, 17, 0) 55%, rgba(13, 15, 17, 0.9));
}
.mid-cta-inner { padding: 26px 22px 30px; gap: 15px; }
.mid-cta .mono { letter-spacing: 0.12em; }
.pfilm { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0; }
.pfilm-v { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1283 / 550; }
.pfilm-shade {
inset: auto 0 auto 0; top: 0; aspect-ratio: 1283 / 550;
background: linear-gradient(rgba(13, 15, 17, 0) 55%, rgba(13, 15, 17, 0.9));
}
.pfilm-copy { position: relative; max-width: none; padding: 26px 22px 32px; }
.legal li { padding-left: 16px; }
.plan-steps { padding-left: 34px; }
.plan-steps li { display: block; }
.plan-steps li::before { left: -29px; }
.plan-steps i { display: block; margin-bottom: 7px; }
.contact-direct .tickbtn-wa { width: 100%; justify-content: center; }
.prj-toggle { padding: 12px 18px; font-size: 9.5px; }
.vision { height: 340vh; }
.vis-caption { inset-inline-end: var(--pad); bottom: 96px; }
.vis-phase { top: 82px; font-size: 11px; }
.prj-state, .prj-hold { font-size: 10.5px; }
.form-privacy { font-size: 9.5px; }
.scene { height: 260vh; }
.scene-tag { top: 84px; }
.scene-caption { inset-inline-end: var(--pad); bottom: 96px; }
.scene-num { font-size: 3rem; }
.form-row { grid-template-columns: 1fr; }
.founder-points { grid-template-columns: 1fr; }
.grev-rail { align-items: stretch; }
.what-split { margin-top: 26px; }
.what-list {
flex-direction: row;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
}
.what-list::-webkit-scrollbar { display: none; }
.wh-item {
flex: 0 0 min(88vw, 380px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
padding: 0 0 20px;
border: 1px solid var(--line-l);
border-top: 1px solid var(--line-l);
border-radius: var(--r-m);
overflow: hidden;
background: #fff;
}
.wh-item:last-child { border-bottom: 1px solid var(--line-l); }
.wh-fig { order: -1; margin-top: 0; }
.wh-fig img { aspect-ratio: 4 / 3; border-radius: 0; }
.wh-top { padding: 17px 18px 0; }
.wh-name { font-size: 1.3rem; }
.wh-desc { padding: 0 18px; margin-top: 10px; font-size: 14.5px; }
.prj-grid {
display: flex;
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
margin-top: 34px;
}
.prj-grid::-webkit-scrollbar { display: none; }
.prj {
flex: 0 0 min(90vw, 400px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.prj-a .prj-media, .prj-b .prj-media, .prj-c .prj-media,
.prj-d .prj-media, .prj-e .prj-media { aspect-ratio: 4 / 3; }
.prj-info { padding-top: 14px; }
.prj-grid [data-reveal] { opacity: 1; transform: none; }
.faq-a p { padding-left: 0; }
.faq-list summary i { flex: 0 0 34px; }
}
.stack-tag { display: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
[data-reveal] { opacity: 1; transform: none; }
.ht-line > span { transform: none; }
.hero-foot, .hero-annot { opacity: 1; }
.hero-video { transform: none; }
.story-text .w { color: var(--bone); }
.story-text em .w { color: var(--copper-hi); }
.scene, .vision { height: auto; }
.scene-pin, .vision-pin {
position: relative;
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
padding: 0 var(--pad) var(--gap-sec);
}
.vision-pin > picture, .scene-pin > picture,
.vis-plan, .vis-done, .scene-after {
position: relative;
inset: auto;
display: block;
width: 100%;
height: auto;
clip-path: none;
}
.vis-plan picture { position: relative; inset: auto; }
.vis-found, .vis-plan img, .vis-done img,
.scene-before, .scene-after img {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--r-m);
}
.vis-found, .scene-before { filter: none; }
.vis-divider, .vis-scanline, .scene-divider, .scene-pct,
.vis-phase, .scene-tag, .prj-hold, .scene-nav { display: none; }
.stack-tag {
display: block;
margin: 26px 0 10px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
color: var(--copper-hi);
}
.vision-pin > .stack-tag:first-child, .scene-pin > .stack-tag:first-child { margin-top: 0; }
.vis-caption, .scene-caption {
position: relative;
inset: auto;
max-width: none;
margin-top: 28px;
padding: 0;
}
.plan-steps li { opacity: 1; transform: none; }
.wh-item { opacity: 1; }
.wm-img:first-child { opacity: 1; transform: none; }
.loader { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
.vis-found, .vis-plan img, .vis-done img,
.scene-before, .scene-after img { aspect-ratio: 3 / 4; }
}
.tickbtn { border-radius: var(--r-s); }
.tickbtn::before { border-top-left-radius: var(--r-s); }
.tickbtn::after { border-bottom-right-radius: var(--r-s); }
.price-grid { border-radius: var(--r-m); overflow: hidden; }
.wh-fig img { border-radius: var(--r-m); }
.founder-photo { border-radius: var(--r-m); overflow: hidden; }
.sheet { border-radius: var(--r-l); }
.contact-form { border-radius: var(--r-m); }
.grev-owner { border-radius: var(--r-s); }
.legal { border-radius: 0; }
.contact-form input:not([type="hidden"]),
.contact-form textarea,
.contact-form select,
.contact-form .phone-field,
.contact-form .file-drop { border-radius: var(--r-s); }
.scene-pin img, .scene-after { border-radius: 0; }
.mb-main, .mobile-bar a { border-radius: var(--r-s); }
.craft {
background: var(--esp);
color: var(--bone);
padding: var(--gap-sec) 0;
overflow: hidden;
}
.craft-head {
max-width: calc(var(--max) + 2 * var(--pad));
margin: 0 auto;
padding: 0 var(--pad);
}
.craft-head h2 { max-width: 24ch; }
.craft-lede {
margin-top: 20px;
max-width: 56ch;
color: var(--mut-l);
font-size: 17px;
}
.craft-rail {
margin-top: clamp(38px, 5vw, 62px);
padding: 30px 0 34px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
cursor: grab;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
perspective: 1600px;
}
.craft-rail::-webkit-scrollbar { display: none; }
.craft-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.craft-track {
display: flex;
gap: clamp(16px, 2vw, 28px);
padding: 0 max(var(--pad), calc((100vw - 1360px) / 2));
transform-style: preserve-3d;
}
.craft-card {
flex: 0 0 clamp(268px, 30vw, 432px);
scroll-snap-align: center;
border-radius: var(--r-m);
overflow: hidden;
background: var(--esp2);
border: 1px solid var(--line-d);
transform-origin: center center;
transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), border-color 0.5s;
will-change: transform;
}
.craft-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--esp3); }
.craft-card figure img { background: var(--esp3); }
.craft-card img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.9s var(--ease);
}
.craft-card.is-near img { transform: scale(1.03); }
.craft-meta { padding: 20px clamp(18px, 2vw, 26px) 24px; }
.craft-meta h3 {
font-family: var(--disp);
font-weight: 500;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
letter-spacing: -0.01em;
}
.craft-meta p { margin-top: 7px; color: var(--mut-l); font-size: 14.5px; line-height: 1.6; }
.craft-foot {
max-width: calc(var(--max) + 2 * var(--pad));
margin: clamp(26px, 3.4vw, 44px) auto 0;
padding: 0 var(--pad);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px;
}
@media (max-width: 768px) {
.craft-card { flex: 0 0 min(88vw, 380px); }
.craft-rail { padding: 20px 0 22px; }
.craft-meta { padding: 16px 18px 20px; }
.craft-head h2 { max-width: none; }
}
.rail-nav {
display: flex;
align-items: center;
gap: 14px;
margin: 22px auto 0;
max-width: calc(var(--max) + 2 * var(--pad));
padding: 0 var(--pad);
}
@media (max-width: 768px) {
.rail-nav { margin: 20px var(--pad) 0; padding: 0; max-width: none; }
.portfolio .rail-nav { margin-inline: 0; }
.greviews .rail-nav { margin-inline: var(--pad); }
}
.rail-btn {
flex: 0 0 auto;
width: 46px; height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--line-l);
border-radius: 999px;
background: transparent;
color: var(--esp);
cursor: pointer;
transition: opacity 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-next svg { transform: scaleX(-1); }
[dir="rtl"] .rail-prev svg { transform: scaleX(-1); }
[dir="rtl"] .rail-next svg { transform: none; }
.rail-btn:disabled { opacity: 0.26; cursor: default; }
.rail-btn:not(:disabled):hover,
.rail-btn:not(:disabled):active {
background: var(--copper);
border-color: var(--copper);
color: #0c0e10;
}
.craft .rail-btn { border-color: rgba(244, 245, 242, 0.28); color: var(--bone); }
.rail-bar {
flex: 1 1 auto;
position: relative;
height: 3px;
border-radius: 999px;
background: var(--line-l);
overflow: hidden;
}
.rail-bar > span {
position: absolute;
top: 0; bottom: 0;
inset-inline-start: 0;
border-radius: 999px;
background: var(--copper-deep);
transition: transform 0.14s linear;
}
.craft .rail-bar { background: rgba(244, 245, 242, 0.16); }
.craft .rail-bar > span { background: var(--copper-hi); }
.vplay[hidden] { display: none; }
.vplay {
position: absolute;
top: 16px;
inset-inline-end: 16px;
z-index: 6;
width: 52px; height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(244, 245, 242, 0.3);
border-radius: 999px;
background: rgba(13, 15, 17, 0.62);
backdrop-filter: blur(10px);
color: var(--bone);
cursor: pointer;
transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.vplay svg { width: 22px; height: 22px; margin-inline-start: 3px; }
.vplay:hover { background: var(--copper); color: #0c0e10; transform: scale(1.06); }
.hero-media .vplay { top: auto; bottom: 22vh; }
@media (max-width: 768px) { .hero-media .vplay { bottom: auto; top: 84px; } }
.contact-form select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2356d9dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 17px 17px;
background-position: right 2px center;
padding-inline-end: 28px;
}
[dir="rtl"] .contact-form select { background-position: left 2px center; }
.contact-form select option {
background-color: #ffffff;
color: #0c0e10;
font-family: var(--sans);
}
.footer-by {
text-align: center;
padding: 20px var(--pad) calc(22px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line-d);
font-family: var(--sans);
font-size: 13.5px;
letter-spacing: 0.08em;
color: rgba(244, 245, 242, 0.68);
direction: ltr;
}
.footer-by span { color: var(--copper-hi); font-weight: 600; letter-spacing: 0.14em; }
@media (max-width: 768px) { .footer-by { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }
.scene-nav {
position: absolute;
inset-inline: 0;
bottom: clamp(22px, 4.5vh, 44px);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 0 var(--pad);
pointer-events: none;
}
.scene-nav > * { pointer-events: auto; }
.scene-btn {
border-color: rgba(244, 245, 242, 0.34);
color: var(--bone);
background: rgba(13, 15, 17, 0.5);
backdrop-filter: blur(10px);
}
.scene-btn:not(:disabled):hover, .scene-btn:not(:disabled):active {
background: var(--copper);
border-color: var(--copper);
color: #0c0e10;
}
.scene-bar {
flex: 0 1 min(360px, 46vw);
background: rgba(244, 245, 242, 0.22);
}
.scene-bar > span {
background: var(--copper-hi);
transform-origin: left center;
transition: transform 0.12s linear;
}
[dir="rtl"] .scene-bar > span { transform-origin: right center; }
@media (max-width: 768px) {
.scene-nav { bottom: calc(80px + env(safe-area-inset-bottom)); gap: 12px; }
.scene-bar { flex-basis: 40vw; }
.vis-caption, .scene-caption { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
.greviews { padding-bottom: clamp(30px, 3.4vw, 48px); }
.grev-rail { padding-bottom: 6px; }
@media (max-width: 768px) {
.team-photo, .team-photo img { width: 124px; height: 124px; }
.wh-fig img { aspect-ratio: 5 / 4; }
.prj-a .prj-media, .prj-b .prj-media, .prj-c .prj-media,
.prj-d .prj-media, .prj-e .prj-media { aspect-ratio: 5 / 4; }
}
@media (max-width: 768px) {
.team-grid { display: flex; flex-direction: column; }
.team-grid .team-card:first-child { order: 3; }
.greviews { padding-bottom: 18px; }
.greviews .rail-nav { margin-top: 16px; }
}
@media (max-width: 768px) {
.grev-card { display: flex; flex-direction: column; }
}
.rail-stepping { scroll-snap-type: none !important; }
.grev-card > p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.grev-owner { padding: 8px 12px; margin-top: 10px; }
.grev-card:has(.grev-owner) > p { -webkit-line-clamp: 3; }
.grev-owner p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.rail-btn:focus-visible,
.vplay:focus-visible,
.scene-nav button:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
border-radius: 3px;
}
.proof:not(:has(.greviews)) { padding-bottom: var(--gap-sec); }