/* Dalmares motion direction: quiet surfaces, deliberate movement. */
:root { --text:#f5f5f7; --muted:#a1a1aa; --line:#ffffff18; --ease:cubic-bezier(.22,1,.36,1); font-family:Inter,Arial,sans-serif; }
.header { position:sticky; top:0; height:90px; z-index:20; background:#0b0c0fe8; }
@supports (backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px)) {
  .header { background:#0b0c0fb8; -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%); }
}
.header-actions { display:flex; align-items:center; gap:16px; }
.header nav { font-size:11px; }
.header nav a { transition:color .25s; }
.nav-cta { border-color:#ffffff30; transition:background .25s,color .25s; }
.motion-toggle { width:38px; height:38px; display:grid; place-items:center; color:#b6bac5; border:1px solid #ffffff20; border-radius:50%; background:transparent; }
.motion-toggle[hidden] { display:none; }
.motion-toggle:hover { background:#ffffff10; color:white; }
.motion-toggle svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.play-icon { display:none; }
[data-motion='paused'] .pause-icon { display:none; }
[data-motion='paused'] .play-icon { display:block; }
.hero { min-height:max(700px,calc(100svh - 90px)); display:flex; flex-direction:column; padding-top:clamp(42px,6vh,86px); }
.hero-content { display:flex; flex-direction:column; flex:1; }
.hero h1 { font-size:clamp(72px,8.1vw,134px); line-height:1.02; letter-spacing:-.055em; margin-bottom:40px; }
.hero-line { display:block; color:var(--text); overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.hero-line>span { display:block; }
.hero-accent { color:#b8c7ff; background:linear-gradient(110deg,#e9eeff 5%,#b0bfff 45%,#728cff 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-bottom { margin-top:auto; padding-top:22px; gap:48px; }
.hero-bottom p { font-size:13px; line-height:1.8; }
.hero-footer { margin-top:48px; color:#9295a0; }
.hero-art { transform:translate3d(0,var(--hero-drift,0px),0); -webkit-mask-image:linear-gradient(to right,transparent,#000 15%); }
.orbital { border-color:#232c40; box-shadow:inset 2px 1px 2px #b8c9ff80,inset -12px 0 25px #02040c,4px 1px 2px #9caeff90,30px 30px 45px #0009; animation-duration:16s; }
.orbital-two { animation-delay:-5s; }
.orbital-three { animation-delay:-10s; }
.button { border-radius:999px; padding:18px 25px; background:#5271ff; box-shadow:0 3px 18px #2743b51a; transition:transform .5s var(--ease),background .25s,box-shadow .3s; }
.button span { transition:transform .45s var(--ease); }
.button:hover { box-shadow:0 8px 28px #5271ff30; }
.button:hover span { transform:translate(3px,-3px); }
.section { padding-top:clamp(90px,10vw,160px); padding-bottom:clamp(90px,10vw,160px); }
.intro { display:block; text-align:center; background:radial-gradient(ellipse at 50% 100%,#1d2b5918,transparent 65%); }
.intro>.eyebrow { justify-content:center; margin-bottom:36px; }
.intro h2 { font-size:clamp(38px,5.2vw,80px); letter-spacing:-.045em; line-height:1.12; max-width:1120px; margin:0 auto 36px; }
.intro h2 span { color:#8c96b1; }
.intro .body-copy { margin:0 auto; max-width:600px; font-size:15px; line-height:1.9; }
.section-heading { margin-bottom:56px; }
.section-heading h2 { font-size:clamp(38px,4.6vw,70px); letter-spacing:-.045em; }
.concepts { background:#111216; }
.concept-grid { gap:32px; }
.concept-card { border-radius:22px; background:#191b21; overflow:hidden; box-shadow:0 12px 40px #0002; transition:box-shadow .5s var(--ease); }
.concept-image { height:clamp(350px,35vw,520px); }
.concept-image>img { transform:translate3d(0,var(--image-drift,0px),0) scale(1.1); transition:filter .5s; }
.concept-card:hover img { transform:translate3d(0,var(--image-drift,0px),0) scale(1.1); }
.concept-caption { padding:26px 28px 28px; }
.concept-caption h3 { font-size:20px; }
.concept-caption p { line-height:1.6; }
.circle-arrow { flex-shrink:0; transition:background .3s,transform .5s var(--ease); }
.concept-card:hover .circle-arrow { transform:rotate(45deg); }
.concept-card:hover { box-shadow:0 18px 50px #0005; }
.service-row { padding:42px 0; position:relative; transition:background .4s; }
.service-row h3 { font-size:clamp(29px,3vw,44px); }
.service-row p { font-size:13px; }
.service-symbol { transition:transform .8s var(--ease),color .3s; }
.service-row:hover .service-symbol { transform:rotate(45deg); color:#c2ceff; }
.service-row:hover .code-symbol { transform:scale(1.12); }
.faq h2 { font-size:clamp(38px,4vw,60px); letter-spacing:-.045em; }
summary { padding:28px 0; }
summary span { transition:transform .4s var(--ease); }
.contact { background:radial-gradient(ellipse at 80% 95%,#2a418a44,transparent 65%),#111216; }
.contact h2 em { background:linear-gradient(110deg,#e3eaff,#99adff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact-arrow { transition:transform .8s var(--ease); }
.contact:hover .contact-arrow { transform:translate(8px,-8px); }
dialog { border-radius:24px; box-shadow:0 30px 100px #0006; }
input,select,textarea { border-radius:10px; }
.concept-dialog img { border-radius:12px; }
@media (hover:hover) and (pointer:fine) {
  .service-row:hover { background:#ffffff03; }
}
@media (max-width:1000px) {
  .hero h1 { font-size:clamp(68px,10vw,100px); }
  .concept-caption { padding:24px 20px; }
}
@media (max-width:640px) {
  .header { height:90px; }
  .header-actions { gap:9px; }
  .header .wordmark { font-size:19px; }
  .header .wordmark span { font-size:5px; letter-spacing:1.9px; }
  .motion-toggle { width:32px; height:32px; }
  .nav-cta { gap:12px; padding:11px 13px; }
  .hero { min-height:calc(100vh - 90px); min-height:calc(100svh - 90px); padding-top:clamp(28px,5svh,48px); }
  .hero h1 { font-size:clamp(44px,12.4vw,76px); line-height:1.07; letter-spacing:-.05em; margin-bottom:30px; }
  .hero-art { top:50px; opacity:.85; }
  .hero-bottom { gap:24px; padding-top:16px; }
  .hero-bottom p { font-size:12px; }
  .hero-footer { margin-top:32px; letter-spacing:.6px; }
  .button { font-size:11px; padding:17px 22px; }
  .section { padding-top:85px; padding-bottom:85px; }
  .intro>.eyebrow { margin-bottom:26px; }
  .intro h2 { font-size:clamp(34px,8.7vw,54px); line-height:1.15; }
  .intro h2 br { display:none; }
  .intro h2 span:before { content:' '; }
  .intro .body-copy { font-size:13px; }
  .section-heading { margin-bottom:34px; }
  .section-heading h2 { font-size:38px; }
  .concept-grid { gap:26px; }
  .concept-card { border-radius:18px; }
  .concept-image { height:380px; }
  .concept-title strong { font-size:41px; }
  .barber .concept-title strong { font-size:36px; }
  .concept-caption h3 { font-size:18px; }
  .service-row { padding:30px 0; }
  .service-row h3 { font-size:28px; }
  .service-row p { font-size:12px; }
  .faq h2 { font-size:36px; }
  .contact h2 { font-size:clamp(46px,10.5vw,67px); }
}
/* Pausing motion also removes scroll-driven offsets. All content stays visible. */
[data-motion='paused'] { scroll-behavior:auto; }
[data-motion='paused'] *, [data-motion='paused'] *:before, [data-motion='paused'] *:after { animation-play-state:paused!important; transition:none!important; }
[data-motion='paused'] .hero-art { transform:none; }
[data-motion='paused'] .concept-image>img { transform:scale(1.1); }
[data-hero-visible='false'] .orbital { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  .hero-art { transform:none; }
  .concept-image>img,.concept-card:hover img { transform:none; }
  .button:hover,.button:hover span,.service-row:hover .service-symbol,.contact:hover .contact-arrow,.concept-card:hover .circle-arrow { transform:none; }
}
/* Selected work: scroll-through recordings of real sites in a browser frame. */
.work-card { display:block; }
.concept-image.work-frame { height:auto; background:#0d0e12; }
.work-bar { position:relative; display:flex; align-items:center; gap:6px; height:34px; padding:0 16px; background:#1b1d24; border-bottom:1px solid #ffffff12; }
.work-bar i { width:9px; height:9px; border-radius:50%; background:#ffffff26; }
.work-bar span { position:absolute; left:50%; transform:translateX(-50%); max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Inter,Arial,sans-serif; font-size:10px; letter-spacing:.3px; color:var(--muted); background:#ffffff0a; border-radius:6px; padding:4px 14px; }
.work-screen { aspect-ratio:8/5; overflow:hidden; background:#000; }
.work-screen video { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.work-card:hover .work-screen video { transform:scale(1.02); }
@media (prefers-reduced-motion:reduce) { .work-card:hover .work-screen video { transform:none; } }