/* NordSur 2026, demo. Hoja de estilos de la referencia (creative-design-24.aura.build), reproducida a peticion de la usuaria el 24-09-2026, mas la capa de NordSur al final. */

*,
::before,
::after {
box-sizing: border-box;
border: 0 solid rgba(255, 255, 255, .12)
}
html {
-webkit-text-size-adjust: 100%;
font-family: var(--font-mono);
line-height: 1.5
}
body {
margin: 0;
line-height: inherit
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0
}
a {
color: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
button,
[type=button],
[type=submit] {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
p,
figure,
blockquote,
dl,
dd {
margin: 0
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0
}
img,
svg,
video,
canvas {
display: block;
vertical-align: middle;
max-width: 100%;
height: auto
}
[hidden] {
display: none
}
::placeholder {
opacity: 1;
color: #6a6a72
}
.relative {
position: relative
}
.absolute {
position: absolute
}
.fixed {
position: fixed
}
.sticky {
position: sticky
}
.inset-0 {
inset: 0
}
.inset-x-0 {
left: 0;
right: 0
}
.top-0 {
top: 0
}
.left-0 {
left: 0
}
.right-0 {
right: 0
}
.bottom-0 {
bottom: 0
}
.z-0 {
z-index: 0
}
.z-10 {
z-index: 10
}
.z-20 {
z-index: 20
}
.z-30 {
z-index: 30
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.z-60 {
z-index: 60
}
.z-\[90\] {
z-index: 90
}
.z-\[100\] {
z-index: 100
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.grid {
display: grid
}
.hidden {
display: none
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-center {
align-items: center
}
.items-end {
align-items: flex-end
}
.items-baseline {
align-items: baseline
}
.justify-start {
justify-content: flex-start
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.justify-end {
justify-content: flex-end
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-3 {
gap: .75rem
}
.gap-4 {
gap: 1rem
}
.gap-5 {
gap: 1.25rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.gap-10 {
gap: 2.5rem
}
.gap-12 {
gap: 3rem
}
.gap-16 {
gap: 4rem
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.col-span-2 {
grid-column: span 2/span 2
}
.w-full {
width: 100%
}
.w-auto {
width: auto
}
.w-1 {
width: .25rem
}
.w-2 {
width: .5rem
}
.w-3 {
width: .75rem
}
.w-4 {
width: 1rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-8 {
width: 2rem
}
.w-10 {
width: 2.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-16 {
width: 4rem
}
.w-20 {
width: 5rem
}
.w-24 {
width: 6rem
}
.h-full {
height: 100%
}
.h-auto {
height: auto
}
.h-px {
height: 1px
}
.h-1 {
height: .25rem
}
.h-2 {
height: .5rem
}
.h-3 {
height: .75rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.h-6 {
height: 1.5rem
}
.h-8 {
height: 2rem
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-14 {
height: 3.5rem
}
.h-16 {
height: 4rem
}
.h-20 {
height: 5rem
}
.h-24 {
height: 6rem
}
.min-h-screen {
min-height: 100vh
}
.h-screen {
height: 100vh
}
.max-w-none {
max-width: none
}
.max-w-xs {
max-width: 20rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-md {
max-width: 28rem
}
.max-w-lg {
max-width: 32rem
}
.max-w-xl {
max-width: 36rem
}
.max-w-2xl {
max-width: 42rem
}
.max-w-3xl {
max-width: 48rem
}
.max-w-5xl {
max-width: 64rem
}
.max-w-7xl {
max-width: 80rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mt-1 {
margin-top: .25rem
}
.mt-2 {
margin-top: .5rem
}
.mt-3 {
margin-top: .75rem
}
.mt-4 {
margin-top: 1rem
}
.mt-5 {
margin-top: 1.25rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mt-10 {
margin-top: 2.5rem
}
.mt-12 {
margin-top: 3rem
}
.mt-16 {
margin-top: 4rem
}
.mt-20 {
margin-top: 5rem
}
.mt-24 {
margin-top: 6rem
}
.mb-1 {
margin-bottom: .25rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mb-16 {
margin-bottom: 4rem
}
.p-2 {
padding: .5rem
}
.p-3 {
padding: .75rem
}
.p-4 {
padding: 1rem
}
.p-5 {
padding: 1.25rem
}
.p-6 {
padding: 1.5rem
}
.p-8 {
padding: 2rem
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.pt-2 {
padding-top: .5rem
}
.pt-4 {
padding-top: 1rem
}
.pt-6 {
padding-top: 1.5rem
}
.pt-8 {
padding-top: 2rem
}
.pt-16 {
padding-top: 4rem
}
.pb-2 {
padding-bottom: .5rem
}
.pb-4 {
padding-bottom: 1rem
}
.pb-6 {
padding-bottom: 1.5rem
}
.pb-8 {
padding-bottom: 2rem
}
.pb-16 {
padding-bottom: 4rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.font-mono {
font-family: var(--font-mono)
}
.font-display {
font-family: var(--font-display)
}
.font-light {
font-weight: 300
}
.font-normal {
font-weight: 400
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.font-bold {
font-weight: 700
}
.font-extrabold {
font-weight: 800
}
.font-black {
font-weight: 900
}
.uppercase {
text-transform: uppercase
}
.lowercase {
text-transform: lowercase
}
.capitalize {
text-transform: capitalize
}
.italic {
font-style: italic
}
.leading-none {
line-height: 1
}
.leading-tight {
line-height: 1.15
}
.leading-snug {
line-height: 1.3
}
.leading-normal {
line-height: 1.5
}
.leading-relaxed {
line-height: 1.65
}
.tracking-tighter {
letter-spacing: -.05em
}
.tracking-tight {
letter-spacing: -.025em
}
.tracking-normal {
letter-spacing: 0
}
.tracking-wide {
letter-spacing: .06em
}
.tracking-wider {
letter-spacing: .12em
}
.tracking-widest {
letter-spacing: .2em
}
.overflow-hidden {
overflow: hidden
}
.overflow-visible {
overflow: visible
}
.rounded-none {
border-radius: 0
}
.rounded {
border-radius: .25rem
}
.rounded-md {
border-radius: .375rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-xl {
border-radius: .75rem
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-3xl {
border-radius: 1.5rem
}
.rounded-full {
border-radius: 9999px
}
.border {
border-width: 1px
}
.border-0 {
border-width: 0
}
.border-t {
border-top-width: 1px
}
.border-b {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-r {
border-right-width: 1px
}
.border-line {
border-color: var(--line)
}
.border-line-2 {
border-color: var(--line-2)
}
.border-signal {
border-color: var(--signal)
}
.border-bone {
border-color: var(--bone)
}
.bg-transparent {
background-color: transparent
}
.bg-ink {
background-color: var(--ink)
}
.bg-panel {
background-color: var(--panel)
}
.bg-panel-2 {
background-color: var(--panel-2)
}
.bg-bone {
background-color: var(--bone)
}
.bg-signal {
background-color: var(--signal)
}
.bg-amber {
background-color: var(--amber)
}
.text-bone {
color: var(--bone)
}
.text-muted {
color: var(--muted)
}
.text-dim {
color: var(--dim)
}
.text-signal {
color: var(--signal)
}
.text-amber {
color: var(--amber)
}
.text-ink {
color: var(--ink)
}
.opacity-0 {
opacity: 0
}
.opacity-40 {
opacity: .4
}
.opacity-50 {
opacity: .5
}
.opacity-60 {
opacity: .6
}
.opacity-70 {
opacity: .7
}
.opacity-100 {
opacity: 1
}
.select-none {
user-select: none
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-auto {
pointer-events: auto
}
.cursor-pointer {
cursor: pointer
}
.cursor-grab {
cursor: grab
}
.will-change-transform {
will-change: transform
}
.origin-center {
transform-origin: center
}
.origin-left {
transform-origin: left
}
.whitespace-nowrap {
white-space: nowrap
}
.list-none {
list-style: none
}
.backdrop-blur {
backdrop-filter: blur(12px)
}
.transition {
transition-property: color, background-color, border-color, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-300 {
transition-duration: .3s
}
.duration-500 {
transition-duration: .5s
}
.duration-700 {
transition-duration: .7s
}
.text-\[10px\] {
font-size: 10px
}
.text-\[11px\] {
font-size: 11px
}
.text-\[12px\] {
font-size: 12px
}
.text-\[13px\] {
font-size: 13px
}
.text-xs {
font-size: .75rem;
line-height: 1.1rem
}
.text-sm {
font-size: .875rem;
line-height: 1.35rem
}
.text-base {
font-size: 1rem;
line-height: 1.55rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.7rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.8rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 1.2
}
.text-3xl {
font-size: 1.875rem;
line-height: 1.15
}
.text-4xl {
font-size: 2.25rem;
line-height: 1.1
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
@media (min-width:768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.md\:flex {
display: flex
}
.md\:hidden {
display: none
}
.md\:block {
display: block
}
.md\:flex-row {
flex-direction: row
}
.md\:text-left {
text-align: left
}
.md\:text-right {
text-align: right
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.md\:py-12 {
padding-top: 3rem;
padding-bottom: 3rem
}
.md\:gap-8 {
gap: 2rem
}
.md\:gap-12 {
gap: 3rem
}
.md\:text-sm {
font-size: .875rem;
line-height: 1.35rem
}
.md\:col-span-1 {
grid-column: span 1/span 1
}
}
@media (min-width:1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.lg\:flex {
display: flex
}
.lg\:hidden {
display: none
}
.lg\:block {
display: block
}
.lg\:px-12 {
padding-left: 3rem;
padding-right: 3rem
}
}
:root {
--ink: #141414;
--ink-deep: #0d0d0d;
--panel: #1c1c1e;
--panel-2: #232326;
--line: rgba(255, 255, 255, .11);
--line-2: rgba(255, 255, 255, .20);
--bone: #f4f3f0;
--muted: #8e8e95;
--dim: #5c5c63;
--signal: #fb3732;
--amber: #ffa31a;
--volt: #3b49e4;
--font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;  /* antes JetBrains Mono; Host Grotesk por peticion de la usuaria, 25-09-2026 */
--gut: clamp(18px, 3.4vw, 48px);
--rail: clamp(64px, 7vw, 96px);
--e-out: cubic-bezier(.16, 1, .3, 1);
--e-io: cubic-bezier(.76, 0, .24, 1);
--e-soft: cubic-bezier(.25, .46, .45, .94);
--e-back: cubic-bezier(.34, 1.56, .64, 1);
}
html {
background: var(--ink);
scroll-behavior: auto
}
body {
background: var(--ink);
color: var(--bone);
font-family: var(--font-mono);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked {
overflow: hidden;
height: 100vh
}
::selection {
background: var(--signal);
color: #fff
}
::-webkit-scrollbar {
width: 9px;
height: 9px
}
::-webkit-scrollbar-track {
background: var(--ink)
}
::-webkit-scrollbar-thumb {
background: #2e2e33;
border-radius: 9px;
border: 2px solid var(--ink)
}
::-webkit-scrollbar-thumb:hover {
background: #43434a
}
:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: 2px
}
.d-mega {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.4rem, 13.2vw, 11.5rem);
line-height: .82;
letter-spacing: -.045em;
text-transform: uppercase;
}
.d-xl {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.4rem, 7.6vw, 6rem);
line-height: .9;
letter-spacing: -.04em;
text-transform: uppercase
}
.d-lg {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.9rem, 4.4vw, 3.4rem);
line-height: .98;
letter-spacing: -.03em
}
.d-md {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.35rem, 2.3vw, 1.9rem);
line-height: 1.06;
letter-spacing: -.02em
}
.d-sm {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.15;
letter-spacing: -.01em
}
.mono-xs {
font-family: var(--font-mono);
font-size: clamp(9.5px, .72vw, 11px);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--muted)
}
.mono-sm {
font-family: var(--font-mono);
font-size: clamp(11px, .86vw, 13px);
letter-spacing: .01em;
line-height: 1.75;
color: var(--muted)
}
.mono-md {
font-family: var(--font-mono);
font-size: clamp(13px, 1.12vw, 16px);
letter-spacing: .005em;
line-height: 1.72;
color: var(--bone)
}
.shell {
width: 100%;
max-width: 1560px;
margin-inline: auto;
padding-inline: var(--gut)
}
.sec {
position: relative;
padding-block: clamp(84px, 11vw, 168px)
}
.sec--tight {
padding-block: clamp(56px, 7vw, 104px)
}
.eyebrow {
display: inline-block;
position: relative;
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(10.5px, .82vw, 12.5px);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--signal);
padding-block: 2px;
}
/* 28-09-2026: fuera la raya roja que tachaba las etiquetas (eyebrow) de la referencia, a peticion
   de la usuaria ("quit the over lining of the headlines"). La etiqueta se distingue por la tipografia. */
.chip {
display: inline-flex;
align-items: center;
gap: .45em;
font-family: var(--font-mono);
font-size: clamp(10px, .78vw, 12px);
letter-spacing: .04em;
line-height: 1;
padding: .62em 1.05em;
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--bone);
background: transparent;
white-space: nowrap;
transition: background .34s var(--e-soft), color .34s var(--e-soft), border-color .34s var(--e-soft);
}
.chip:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
.chip--solid {
background: #000;
border-color: #000;
color: var(--bone)
}
.chip--signal {
background: var(--signal);
border-color: var(--signal);
color: #fff
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(11px, .85vw, 13px);
letter-spacing: .09em;
text-transform: uppercase;
padding: 1.05em 2.1em;
border-radius: 999px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--bone);
background: var(--bone);
color: var(--ink);
cursor: pointer;
transition: color .42s var(--e-io), border-color .42s var(--e-io);
}
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--signal);
transform: translateY(101%);
transition: transform .5s var(--e-io);
}
.btn:hover {
color: #fff;
border-color: var(--signal)
}
.btn:hover::before {
transform: translateY(0)
}
.btn--ghost {
background: transparent;
color: var(--bone);
border-color: var(--line-2)
}
.btn--ghost:hover {
border-color: var(--signal)
}
.box {
position: relative;
border: 1px solid var(--line);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 62%), var(--panel);
overflow: hidden;
}
.box::after {
content: "";
position: absolute;
left: 14%;
right: 14%;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
}
.frame-mark {
position: fixed;
z-index: 40;
width: 16px;
height: 16px;
pointer-events: none;
opacity: .34
}
.frame-mark i {
position: absolute;
background: var(--bone)
}
.frame-mark i:first-child {
width: 100%;
height: 1px
}
.frame-mark i:last-child {
width: 1px;
height: 100%
}
.fm-tl {
top: calc(var(--rail) - 8px);
left: var(--gut)
}
.fm-tl i:first-child {
top: 0;
left: 0
}
.fm-tl i:last-child {
top: 0;
left: 0
}
.fm-bl {
bottom: 26px;
left: var(--gut)
}
.fm-bl i:first-child {
bottom: 0;
left: 0
}
.fm-bl i:last-child {
bottom: 0;
left: 0
}
.fm-tr {
top: calc(var(--rail) - 8px);
right: var(--gut)
}
.fm-tr i:first-child {
top: 0;
right: 0
}
.fm-tr i:last-child {
top: 0;
right: 0
}
.fm-br {
bottom: 26px;
right: var(--gut)
}
.fm-br i:first-child {
bottom: 0;
right: 0
}
.fm-br i:last-child {
bottom: 0;
right: 0
}
[data-rise] {
opacity: 0;
transform: translate3d(0, var(--rise, 34px), 0);
transition: opacity .95s var(--e-out), transform 1.05s var(--e-out)
}
.is-in[data-rise],
[data-rise].is-in {
opacity: 1;
transform: none
}
[data-mask] {
overflow: hidden;
display: block
}
[data-mask]>* {
display: block;
transform: translate3d(0, 105%, 0);
transition: transform 1.05s var(--e-out)
}
.is-in [data-mask]>*,
[data-mask].is-in>* {
transform: none
}
.stagger>* {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity .8s var(--e-out), transform .8s var(--e-out)
}
.stagger.is-in>* {
opacity: 1;
transform: none
}
.stagger.is-in>*:nth-child(1) {
transition-delay: .02s
}
.stagger.is-in>*:nth-child(2) {
transition-delay: .09s
}
.stagger.is-in>*:nth-child(3) {
transition-delay: .16s
}
.stagger.is-in>*:nth-child(4) {
transition-delay: .23s
}
.stagger.is-in>*:nth-child(5) {
transition-delay: .30s
}
.stagger.is-in>*:nth-child(6) {
transition-delay: .37s
}
.stagger.is-in>*:nth-child(7) {
transition-delay: .44s
}
.stagger.is-in>*:nth-child(8) {
transition-delay: .51s
}
.wordwash span {
color: rgba(244, 243, 240, .13);
transition: color .42s linear
}
.wordwash span.lit {
color: var(--bone)
}
.grain {
position: fixed;
inset: -120px;
z-index: 95;
pointer-events: none;
opacity: .05;
background-image: var(--grain-url);
background-size: 180px 180px;
animation: grainShift 6s steps(6) infinite;
mix-blend-mode: overlay;
}
@keyframes grainShift {
0% {
transform: translate(0, 0)
}
16% {
transform: translate(-12px, 8px)
}
33% {
transform: translate(9px, -14px)
}
50% {
transform: translate(-16px, -6px)
}
66% {
transform: translate(14px, 11px)
}
83% {
transform: translate(-7px, 15px)
}
100% {
transform: translate(0, 0)
}
}
.vignette {
position: fixed;
inset: 0;
z-index: 38;
pointer-events: none;
background: radial-gradient(125% 92% at 50% 45%, transparent 52%, rgba(0, 0, 0, .5) 100%)
}
#loader {
position: fixed;
inset: 0;
z-index: 100;
background: var(--ink-deep);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: var(--gut);
will-change: transform
}
#loader.done {
transform: translate3d(0, -101%, 0);
transition: transform 1.15s var(--e-io) .18s
}
#loader .lo-count {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.6rem, 15vw, 12rem);
line-height: .78;
letter-spacing: -.05em;
color: var(--bone);
font-variant-numeric: tabular-nums
}
#loader .lo-side {
text-align: right;
padding-bottom: .7em
}
#loader .lo-bar {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: calc(var(--gut) - 1px);
height: 1px;
background: var(--line)
}
#loader .lo-bar i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--signal)
}
#loader .lo-word {
position: absolute;
left: var(--gut);
top: var(--gut);
display: flex;
gap: .5em;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dim)
}
#loader .lo-word b {
color: var(--signal);
font-weight: 500
}
.hdr {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
height: var(--rail);
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--gut);
pointer-events: none
}
.hdr>* {
pointer-events: auto
}
.hdr::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(20, 20, 20, .92), rgba(20, 20, 20, 0));
opacity: 0;
transition: opacity .5s var(--e-soft)
}
.hdr.stuck::before {
opacity: 1;
backdrop-filter: blur(9px)
}
.mark {
display: inline-flex;
align-items: center;
gap: .34em;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(15px, 1.35vw, 19px);
letter-spacing: .02em;
color: var(--bone);
line-height: 1
}
.mark i {
display: block;
height: 2px;
width: 22px;
background: var(--bone);
transition: width .55s var(--e-io), background .35s
}
.mark:hover i {
width: 40px;
background: var(--signal)
}
.navchain {
display: flex;
align-items: center
}
.navchain a {
position: relative;
font-family: var(--font-mono);
font-size: clamp(10px, .78vw, 12.5px);
letter-spacing: .02em;
line-height: 1;
color: var(--bone);
padding: .72em 1.15em;
border: 1px solid var(--line-2);
border-radius: 999px;
margin-left: -.7em;
background: rgba(20, 20, 20, .55);
backdrop-filter: blur(6px);
transition: color .34s var(--e-soft), border-color .34s var(--e-soft), transform .4s var(--e-back);
overflow: hidden;
isolation: isolate;
}
.navchain a:first-child {
margin-left: 0
}
.navchain a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--bone);
transform: scale(.2);
opacity: 0;
border-radius: 999px;
transition: transform .45s var(--e-io), opacity .3s var(--e-io)
}
.navchain a:hover {
color: var(--ink);
border-color: var(--bone);
transform: translateY(-2px);
z-index: 2
}
.navchain a:hover::before {
transform: scale(1);
opacity: 1
}
.navchain a.on {
border-color: var(--signal)
}
.burger {
display: none;
width: 44px;
height: 38px;
border: 1px solid var(--line-2);
border-radius: 999px;
align-items: center;
justify-content: center;
gap: 4px;
flex-direction: column;
background: rgba(20, 20, 20, .6)
}
.burger i {
display: block;
width: 15px;
height: 1.5px;
background: var(--bone);
transition: transform .45s var(--e-io), opacity .3s
}
.burger.open i:nth-child(1) {
transform: translateY(2.75px) rotate(45deg)
}
.burger.open i:nth-child(2) {
opacity: 0
}
.burger.open i:nth-child(3) {
transform: translateY(-2.75px) rotate(-45deg)
}
#drawer {
position: fixed;
inset: 0;
z-index: 59;
background: var(--ink-deep);
display: flex;
flex-direction: column;
justify-content: center;
gap: .1em;
padding: var(--gut);
clip-path: inset(0 0 100% 0);
transition: clip-path .8s var(--e-io);
pointer-events: none
}
#drawer.open {
clip-path: inset(0 0 0 0);
pointer-events: auto
}
#drawer > a {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.2rem, 11vw, 4.2rem);
line-height: 1.02;
letter-spacing: -.03em;
text-transform: uppercase;
color: var(--bone);
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--e-out), transform .7s var(--e-out)
}
#drawer.open > a {
opacity: 1;
transform: none
}
#drawer.open > a:nth-child(1) {
transition-delay: .20s
}
#drawer.open > a:nth-child(2) {
transition-delay: .27s
}
#drawer.open > a:nth-child(3) {
transition-delay: .34s
}
#drawer.open > a:nth-child(4) {
transition-delay: .41s
}
#drawer.open > a:nth-child(5) {
transition-delay: .48s
}
#drawer > a:hover {
color: var(--signal)
}
#hero {
position: relative;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-rows: var(--rail) 1fr auto
}
.hero-stage {
position: relative;
grid-row: 2;
will-change: transform, opacity
}
.hero-word {
position: absolute;
z-index: 3;
pointer-events: none;
user-select: none
}
.hero-word .d-mega {
display: block
}
.hw-a {
top: 0;
left: var(--gut)
}
.hw-b {
bottom: 0;
right: var(--gut)
}
@media(max-width:640px) {
.hw-a {
top: 2vh
}
.hw-b {
bottom: 2vh
}
}
.collage {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center
}
.collage-in {
position: relative;
width: clamp(260px, 34vw, 470px);
aspect-ratio: 1/1;
transform-style: preserve-3d;
will-change: transform
}
.tile {
position: absolute;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .4);
will-change: transform;
backface-visibility: hidden
}
.tile img,
.tile canvas {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09)
}
.hero-list {
position: absolute;
left: var(--gut);
bottom: 0;
z-index: 4
}
.hero-list li {
font-family: var(--font-mono);
font-size: clamp(11px, .88vw, 13.5px);
color: var(--muted);
line-height: 2.05;
transition: color .3s;
cursor: default
}
.hero-list li:hover {
color: var(--bone)
}
.hero-meta {
position: absolute;
right: var(--gut);
top: 0;
z-index: 4;
text-align: right
}
.scrollcue {
grid-row: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding-bottom: 22px;
z-index: 4
}
.scrollcue span {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--dim)
}
.scrollcue i {
display: block;
width: 1px;
height: 38px;
background: var(--line-2);
position: relative;
overflow: hidden
}
.scrollcue i::after {
content: "";
position: absolute;
inset: 0;
background: var(--bone);
animation: cueRun 2.1s var(--e-io) infinite
}
@keyframes cueRun {
0% {
transform: translateY(-100%)
}
55%,
100% {
transform: translateY(100%)
}
}
.dock {
display: inline-flex;
align-items: center;
gap: .72em;
position: relative;
background: #0a0a0b;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
padding: .5em .95em .5em .5em;
box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9);
animation: dockFloat 6.5s ease-in-out infinite
}
@keyframes dockFloat {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-7px)
}
}
.dock-av {
width: 46px;
height: 46px;
border-radius: 10px;
overflow: hidden;
flex: none;
background: var(--amber)
}
.dock-av canvas,
.dock-av img {
width: 100%;
height: 100%;
display: block
}
.dock p {
font-family: var(--font-mono);
font-size: clamp(10px, .76vw, 12px);
line-height: 1.5;
color: var(--bone)
}
.dock .bub {
position: absolute;
left: -42%;
bottom: 78%;
background: var(--signal);
color: #fff;
border-radius: 9px 9px 9px 2px;
padding: .55em .8em;
font-family: var(--font-mono);
font-size: clamp(9px, .68vw, 10.5px);
line-height: 1.42;
white-space: nowrap;
transform-origin: bottom left;
transform: scale(.6) translateY(8px);
opacity: 0;
transition: transform .55s var(--e-back), opacity .35s ease
}
.dock .bub.show {
transform: none;
opacity: 1
}
.dock .bub::after {
content: "";
position: absolute;
left: 2px;
top: 100%;
border: 6px solid transparent;
border-top-color: var(--signal);
border-right-width: 9px;
border-left-width: 0
}
.hero-dock {
position: absolute;
right: calc(var(--gut) + 2vw);
bottom: 26%;
z-index: 5
}
@media(max-width:900px) {
.hero-dock {
display: none
}
}
#dust {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .55
}
#services {
position: relative
}
.cyl-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
overflow: hidden
}
.cyl-intro {
padding-top: calc(var(--rail) + 2vh);
text-align: center
}
.cyl-intro p {
max-width: 44ch;
margin-inline: auto
}
.cyl-wrap {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: clamp(260px, 34vw, 400px);
overflow: hidden;
perspective: 1150px;
perspective-origin: 50% 50%
}
.cyl {
position: relative;
width: min(1000px, 88vw);
height: clamp(230px, 30vw, 340px);
transform-style: preserve-3d;
will-change: transform
}
.cyl-row {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.2vw, 20px);
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
}
.cyl-row h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 5.2vw, 4.4rem);
line-height: 1;
letter-spacing: -.038em;
text-transform: uppercase;
color: var(--signal);
white-space: nowrap;
transition: color .3s linear;
}
.cyl-row.mid h3 {
color: var(--bone)
}
.cyl-thumb {
width: clamp(30px, 3.6vw, 54px);
aspect-ratio: 1/1;
border-radius: 11px;
overflow: hidden;
flex: none;
box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8)
}
.cyl-thumb canvas,
.cyl-thumb img {
width: 100%;
height: 100%;
display: block
}
.cyl-wrap::before,
.cyl-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 34%;
z-index: 4;
pointer-events: none
}
.cyl-wrap::before {
top: 0;
background: linear-gradient(180deg, var(--ink) 22%, rgba(20, 20, 20, .55) 62%, transparent)
}
.cyl-wrap::after {
bottom: 0;
background: linear-gradient(0deg, var(--ink) 22%, rgba(20, 20, 20, .55) 62%, transparent)
}
.cyl-side {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5
}
.cyl-side.l {
left: var(--gut)
}
.cyl-side.r {
right: var(--gut)
}
@media(max-width:860px) {
.cyl-side {
display: none
}
}
.stat {
padding: clamp(16px, 1.9vw, 26px) clamp(16px, 1.9vw, 26px) clamp(18px, 2.1vw, 30px);
min-height: clamp(96px, 10vw, 138px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color .45s var(--e-soft), transform .55s var(--e-out)
}
.stat:hover {
border-color: var(--line-2);
transform: translateY(-5px)
}
.stat b {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.75rem, 3.9vw, 3.1rem);
line-height: .94;
letter-spacing: -.035em;
color: var(--bone);
font-variant-numeric: tabular-nums;
display: flex;
align-items: flex-start;
gap: .12em
}
.stat b sup {
font-size: .36em;
color: var(--amber);
line-height: 1;
margin-top: .25em
}
.stat .pips {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 3px
}
.stat .pips i {
width: 2.5px;
height: 2.5px;
border-radius: 50%;
background: var(--dim)
}
#works {
position: relative
}
.stack-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
place-items: center;
overflow: hidden
}
.stack {
position: relative;
width: clamp(230px, 27vw, 380px);
aspect-ratio: 1/1;
transform-style: preserve-3d;
perspective: 1400px
}
.pcard {
position: absolute;
inset: 0;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .85);
will-change: transform, opacity, filter;
backface-visibility: hidden;
transition: filter .45s var(--e-soft);
}
.pcard canvas,
.pcard img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.pcard::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13)
}
.pcard .tags {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(9px);
transition: opacity .4s var(--e-soft), transform .5s var(--e-out)
}
.pcard.front .tags {
opacity: 1;
transform: none
}
.pcard .tags .chip {
background: rgba(8, 8, 9, .72);
backdrop-filter: blur(7px);
border-color: rgba(255, 255, 255, .2)
}
.pcard .tags .chip:hover {
background: rgba(8, 8, 9, .72);
color: var(--bone)
}
.pcard .yr {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .12em;
color: rgba(255, 255, 255, .72);
opacity: 0;
transition: opacity .4s
}
.pcard.front .yr {
opacity: 1
}
#viewdot {
position: fixed;
z-index: 70;
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--bone);
color: var(--ink);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
pointer-events: none;
transform: translate3d(-50%, -50%, 0) scale(0);
opacity: 0;
transition: transform .48s var(--e-back), opacity .3s ease, background .3s ease, color .3s ease;
will-change: transform;
left: 0;
top: 0
}
#viewdot.on {
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 1
}
#viewdot.press {
background: var(--signal);
color: #fff
}
#viewdot i {
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px solid rgba(20, 20, 20, .22);
animation: dotPulse 2.6s var(--e-io) infinite
}
@keyframes dotPulse {
0%,
100% {
transform: scale(.86);
opacity: .9
}
50% {
transform: scale(1.02);
opacity: .25
}
}
.works-rail {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: clamp(26px, 5vh, 58px);
z-index: 6;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
pointer-events: none
}
.works-rail .idx {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 5vw, 4rem);
line-height: .85;
letter-spacing: -.04em;
color: var(--bone);
font-variant-numeric: tabular-nums
}
.works-rail .idx em {
font-style: normal;
color: var(--dim);
font-size: .42em;
vertical-align: super
}
.works-prog {
position: relative;
flex: 1;
max-width: 340px;
height: 1px;
background: var(--line);
margin-bottom: .7em
}
.works-prog i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--signal);
transition: width .45s var(--e-soft)
}
#glword {
position: relative;
height: 210svh
}
.gl-pin {
position: sticky;
top: 0;
height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
overflow: hidden
}
#glcanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1
}
.gl-cap {
grid-row: 2;
z-index: 3;
padding-bottom: clamp(38px, 7vh, 90px);
text-align: center;
max-width: 46ch
}
.gl-badge {
position: absolute;
z-index: 3;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dim)
}
.gl-badge.l {
left: var(--gut);
top: calc(var(--rail) + 8px)
}
.gl-badge.r {
right: var(--gut);
top: calc(var(--rail) + 8px)
}
#process {
position: relative
}
.hz-pin {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden
}
.hz-head {
padding-inline: var(--gut);
padding-top: calc(var(--rail) + 1vh);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap
}
.hz-track {
display: flex;
align-items: stretch;
gap: clamp(16px, 2vw, 30px);
padding-inline: var(--gut);
will-change: transform;
margin-block: auto
}
.phase {
position: relative;
flex: none;
width: clamp(255px, 29vw, 400px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
padding: clamp(20px, 2.2vw, 32px);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color .5s var(--e-soft), background .5s var(--e-soft), transform .6s var(--e-out)
}
.phase:hover {
border-color: var(--line-2);
background: var(--panel-2);
transform: translateY(-6px)
}
.phase .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .16em;
color: var(--signal)
}
.phase h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.3rem, 2.2vw, 1.95rem);
line-height: 1.03;
letter-spacing: -.026em;
text-transform: uppercase;
color: var(--bone)
}
.phase .bar {
height: 1px;
background: var(--line);
position: relative;
overflow: hidden
}
.phase .bar i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--signal);
transition: width .8s var(--e-io)
}
.phase:hover .bar i {
width: 100%
}
.phase ul li {
position: relative;
padding-left: 16px;
font-family: var(--font-mono);
font-size: clamp(10.5px, .8vw, 12.5px);
line-height: 1.95;
color: var(--muted)
}
.phase ul li::before {
content: "";
position: absolute;
left: 0;
top: .88em;
width: 6px;
height: 1px;
background: var(--dim)
}
.hz-prog {
position: absolute;
left: var(--gut);
right: var(--gut);
bottom: clamp(24px, 4vh, 46px);
height: 1px;
background: var(--line)
}
.hz-prog i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--bone)
}
.arc {
position: relative;
height: clamp(400px, 42vw, 600px);
perspective: 1250px;
perspective-origin: 50% 46%;
overflow: hidden;
cursor: grab;
touch-action: pan-y
}
.arc.drag {
cursor: grabbing
}
.arc-in {
position: absolute;
inset: 0;
transform-style: preserve-3d
}
.tcard {
position: absolute;
left: 50%;
top: 50%;
width: clamp(196px, 21vw, 320px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
padding: clamp(12px, 1.1vw, 17px);
text-align: center;
will-change: transform, opacity;
transform-style: preserve-3d;
backface-visibility: hidden
}
.tcard .ph {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1/1.13;
background: #cfd0d3;
margin-bottom: 14px
}
.tcard .ph canvas,
.tcard .ph img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.tcard h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(13.5px, 1.15vw, 17px);
letter-spacing: -.01em;
color: var(--bone);
line-height: 1.2
}
.tcard p {
font-family: var(--font-mono);
font-size: clamp(9.5px, .72vw, 11px);
color: var(--muted);
margin-top: 5px;
line-height: 1.4
}
.tcard .chip {
margin-top: 13px;
font-size: 10px;
padding: .55em 1em
}
.arc-cursor {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
text-align: center;
z-index: 6
}
.cw {
position: relative;
height: clamp(420px, 42vw, 580px);
perspective: 1250px;
overflow: hidden;
cursor: grab;
touch-action: pan-y
}
.cw.drag {
cursor: grabbing
}
.cw-in {
position: absolute;
inset: 0;
transform-style: preserve-3d
}
.qcard {
position: absolute;
left: 50%;
top: 50%;
width: clamp(240px, 26vw, 390px);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(20px, 2vw, 30px) clamp(16px, 1.6vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .9)
}
.qcard .stars {
display: flex;
gap: 4px;
color: var(--amber);
font-size: clamp(13px, 1.15vw, 17px);
line-height: 1
}
.qcard .stars i {
opacity: .22
}
.qcard .stars i.on {
opacity: 1
}
.qcard blockquote {
font-family: var(--font-mono);
font-size: clamp(10.5px, .82vw, 12.5px);
line-height: 1.85;
color: var(--muted);
text-align: center;
flex: 1
}
.qcard .who {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
margin-top: 2px
}
.qcard .who .av {
width: clamp(46px, 4.4vw, 62px);
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
background: var(--panel-2)
}
.qcard .who .av canvas,
.qcard .who .av img {
width: 100%;
height: 100%;
display: block
}
.qcard .who h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(12.5px, 1.05vw, 15.5px);
color: var(--bone)
}
.qcard .who p {
font-family: var(--font-mono);
font-size: clamp(9px, .68vw, 10.5px);
color: var(--dim);
margin-top: 3px
}
.cw-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: clamp(14px, 2vw, 26px)
}
.cw-nav button {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
color: var(--bone);
background: transparent;
cursor: pointer;
transition: background .35s var(--e-soft), color .35s var(--e-soft), border-color .35s
}
.cw-nav button:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
.cw-dots {
display: flex;
gap: 6px;
margin-inline: 8px
}
.cw-dots i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--dim);
transition: background .3s, transform .3s
}
.cw-dots i.on {
background: var(--signal);
transform: scale(1.5)
}
.plan {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6vw, 22px);
padding: clamp(22px, 2.4vw, 34px);
transition: transform .6s var(--e-out), border-color .5s var(--e-soft)
}
.plan:hover {
transform: translateY(-8px);
border-color: var(--line-2)
}
.plan.feat {
background: linear-gradient(180deg, rgba(251, 55, 50, .09), rgba(255, 255, 255, 0) 46%), var(--panel-2);
border-color: rgba(251, 55, 50, .4)
}
.plan .price {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: .95;
letter-spacing: -.04em;
color: var(--bone);
display: flex;
align-items: baseline;
gap: .18em
}
.plan .price small {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: .09em;
color: var(--dim);
text-transform: uppercase
}
.plan ul {
display: flex;
flex-direction: column;
gap: 11px
}
.plan ul li {
position: relative;
padding-left: 19px;
font-family: var(--font-mono);
font-size: clamp(10.5px, .8vw, 12.5px);
line-height: 1.6;
color: var(--muted)
}
.plan ul li::before {
content: "";
position: absolute;
left: 0;
top: .58em;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid var(--dim)
}
.plan.feat ul li::before {
border-color: var(--signal)
}
.plan .flag {
position: absolute;
top: -1px;
right: 22px;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
background: var(--signal);
padding: .45em .8em;
border-radius: 0 0 7px 7px
}
.faq {
border-top: 1px solid var(--line)
}
.faq:last-child {
border-bottom: 1px solid var(--line)
}
.faq button {
width: 100%;
display: flex;
align-items: center;
gap: clamp(12px, 2vw, 26px);
padding: clamp(19px, 2.1vw, 29px) 0;
text-align: left;
cursor: pointer;
background: none
}
.faq .n {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .13em;
color: var(--dim);
flex: none;
width: 2.4em;
transition: color .35s
}
.faq h4 {
flex: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1rem, 1.72vw, 1.45rem);
line-height: 1.25;
letter-spacing: -.015em;
color: var(--bone);
transition: color .35s, transform .5s var(--e-out)
}
.faq .pm {
position: relative;
flex: none;
width: 16px;
height: 16px
}
.faq .pm i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1.5px;
background: var(--bone);
transition: transform .5s var(--e-io), background .35s
}
.faq .pm i:last-child {
transform: rotate(90deg)
}
.faq[open] .pm i:last-child,
.faq.open .pm i:last-child {
transform: rotate(0)
}
.faq.open .n {
color: var(--signal)
}
.faq.open h4 {
color: var(--signal)
}
.faq.open .pm i {
background: var(--signal)
}
.faq button:hover h4 {
transform: translateX(6px)
}
.faq .body {
overflow: hidden;
height: 0;
transition: height .6s var(--e-io)
}
.faq .body p {
padding: 0 0 clamp(22px, 2.4vw, 30px) calc(2.4em + clamp(12px, 2vw, 26px));
max-width: 74ch;
font-family: var(--font-mono);
font-size: clamp(11px, .85vw, 13px);
line-height: 1.95;
color: var(--muted)
}
#cta {
position: relative;
min-height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
background: var(--ink-deep)
}
.ghosts {
position: absolute;
inset: -14%;
z-index: 1;
pointer-events: none;
will-change: transform
}
.ghosts span {
position: absolute;
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.03em;
color: #fff;
white-space: nowrap;
opacity: .05;
user-select: none
}
.cta-core {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 38px);
padding-inline: var(--gut);
text-align: center
}
.cta-head {
position: relative;
display: inline-block
}
.cta-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.5rem, 10.4vw, 9rem);
line-height: .9;
letter-spacing: -.05em;
text-transform: uppercase;
color: var(--bone)
}
.cta-underline {
position: absolute;
left: -2%;
right: -2%;
bottom: -.02em;
height: .22em;
overflow: visible
}
.cta-underline path {
fill: none;
stroke: var(--signal);
stroke-width: 19;
stroke-linecap: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 1.25s var(--e-io) .25s
}
#cta.is-in .cta-underline path {
stroke-dashoffset: 0
}
.cta-mail {
font-family: var(--font-mono);
font-size: clamp(11px, 1.05vw, 15px);
letter-spacing: .05em;
color: var(--muted);
position: relative;
display: inline-block
}
.cta-mail::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: var(--bone);
transform: scaleX(0);
transform-origin: right;
transition: transform .55s var(--e-io)
}
.cta-mail:hover {
color: var(--bone)
}
.cta-mail:hover::after {
transform: scaleX(1);
transform-origin: left
}
.magnet {
display: inline-block;
will-change: transform
}
footer {
position: relative;
background: var(--ink-deep);
border-top: 1px solid var(--line);
z-index: 2
}
.fcol h4 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 16px
}
.fcol a {
display: block;
font-family: var(--font-mono);
font-size: clamp(11px, .85vw, 13px);
color: var(--muted);
line-height: 2.1;
transition: color .3s, transform .4s var(--e-out);
width: fit-content
}
.fcol a:hover {
color: var(--bone);
transform: translateX(5px)
}
.marquee {
overflow: hidden;
border-block: 1px solid var(--line);
padding-block: clamp(12px, 1.4vw, 20px);
display: flex;
user-select: none
}
.marquee ul {
display: flex;
align-items: center;
gap: clamp(24px, 3vw, 48px);
flex: none;
padding-right: clamp(24px, 3vw, 48px);
animation: mq 26s linear infinite
}
.marquee li {
display: flex;
align-items: center;
gap: clamp(24px, 3vw, 48px);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.1rem, 2.4vw, 2rem);
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--bone);
white-space: nowrap
}
.marquee li em {
font-style: normal;
color: var(--signal)
}
@keyframes mq {
to {
transform: translateX(-100%)
}
}
.totop {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
transition: background .35s, color .35s, border-color .35s;
cursor: pointer
}
.totop:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone)
}
@media(max-width:900px) {
.navchain {
display: none
}
.burger {
display: flex
}
.hero-meta {
display: none
}
.cyl {
width: 94vw
}
.works-rail .idx {
font-size: 2.3rem
}
}
@media(max-width:640px) {
#glword {
height: 170svh
}
.hero-list {
bottom: auto;
top: 0
}
.hw-a {
top: 8vh
}
.arc {
height: 430px
}
.cw {
height: 430px
}
.marquee ul {
animation-duration: 18s
}
}
@media (prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important
}
[data-rise],
[data-mask]>*,
.stagger>* {
opacity: 1 !important;
transform: none !important
}
.grain {
display: none
}
.dock {
animation: none
}
.cyl-pin,
.stack-pin,
.gl-pin,
.hz-pin {
position: relative;
height: auto;
min-height: auto;
padding-block: 60px
}
#glword,
#services,
#works,
#process {
height: auto
}
.hz-track {
flex-wrap: wrap;
transform: none !important
}
}
#process .hz-track {
width: max-content;
max-width: none;
flex-wrap: nowrap;
}
#process .phase {
flex-shrink: 0;
}
@media (max-width: 1024px) {
#process .hz-track {
gap: 18px;
}
#process .phase {
width: clamp(245px, 36vw, 350px);
}
}
@media (max-width: 640px) {
#process .hz-track {
gap: 14px;
}
#process .phase {
width: min(82vw, 300px);
}
}

/* NordSur: lo que cambia sobre la hoja de la referencia.
   Contenido de NordSur, accesibilidad y los componentes que la referencia
   no trae (idiomas, cookies, enlaces en las tarjetas). */

.object-cover { object-fit: cover }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0 }
.max-w-3xl { max-width: 48rem }

.skip-link { position: fixed; left: -9999px; top: 12px; z-index: 200; background: var(--bone); color: var(--ink); padding: .9em 1.3em; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; border-radius: 999px }
.skip-link:focus { left: var(--gut) }

/* cabecera: el logo de NordSur en el sitio de la marca, y tres cadenas de pastillas */
.mark img { display: block; height: clamp(17px, 1.5vw, 23px); width: auto }
.hdr-right { display: flex; align-items: center; gap: 12px }
.navchain a[aria-current="true"] { color: var(--bone); background: rgba(244, 243, 240, .08) }
@media (max-width: 900px) { .hdr-right { display: none } }

/* cajon del movil: enlaces grandes arriba, idiomas y botones abajo */
.drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 2.2rem; opacity: 0; transform: translateY(28px); transition: opacity .6s var(--e-out) .5s, transform .7s var(--e-out) .5s }
#drawer.open .drawer-foot { opacity: 1; transform: none }
.drawer-lang { display: flex; gap: 8px; width: 100% }
.drawer-lang a { min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; border: 1px solid var(--line-2); border-radius: 999px; color: var(--bone); padding: 0 1em }
.drawer-lang a[aria-current="true"] { border-color: var(--signal) }
.drawer-foot .btn { min-height: 48px }

/* el h1 de siempre, partido en las dos esquinas del hero */
.hero-h1 { font: inherit; margin: 0 }
.hero-h1 .d-mega { font-size: clamp(2.45rem, 8.2vw, 7.6rem); width: min-content; line-height: .86 }
.hw-b .d-mega { text-align: right; margin-left: auto }
.hero-meta a { transition: color .3s }
.hero-meta a:hover { color: var(--bone) }
a.scrollcue:hover span { color: var(--bone) }

/* servicios: titular y entradilla en el sitio del parrafo, palabras del tambor ajustadas a su largo */
.cyl-intro h2 { max-width: 44ch; margin-inline: auto; font-weight: 400 }
.cyl-intro .cyl-lead { max-width: 52ch; margin-inline: auto; margin-top: .5em; font-size: clamp(12px, .95vw, 14px) }
.cyl-row .cyl-word { font-family: var(--font-display); font-weight: 800; font-size: min(clamp(1.7rem, 5.2vw, 4.4rem), calc(min(1000px, 88vw) * .82 / (var(--n, 10) * .64))); line-height: 1; letter-spacing: -.038em; text-transform: uppercase; color: var(--signal); white-space: nowrap; transition: color .3s linear }
.cyl-row.mid .cyl-word { color: var(--bone) }
.cyl-side.r a { transition: color .3s }
.cyl-side.r a:hover { color: var(--bone) }
a.stat { color: inherit }
.stat h3 { margin: 0; padding-right: 26px }
.stat-desc { font-family: var(--font-display); font-weight: 600; font-size: clamp(12.5px, 1.08vw, 16px); line-height: 1.32; letter-spacing: -.005em; color: var(--bone); margin-top: 14px }

/* trabajos y blog: la tarjeta entera es el enlace */
.pcard-link { position: absolute; inset: 0; z-index: 4; border-radius: 20px }
.tcard-link { display: block; color: inherit }
.tcard .tx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-mono); font-size: clamp(9.5px, .72vw, 11px); line-height: 1.55; color: var(--muted); margin-top: 8px }
.tcard .tmeta { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.tcard .tmeta .chip { margin-top: 0 }
.blog-foot { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 22px }
.blog-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }

/* testimonios: la foto arriba, como en la referencia, y el texto de NordSur debajo */
.qcard .qph { width: 100%; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--panel-2) }
.qcard .qph img { width: 100%; height: 100%; object-fit: cover; display: block }
.qcard .qt { font-family: var(--font-mono); font-size: clamp(10.5px, .8vw, 12px); line-height: 1.8; color: var(--muted); text-align: center }
.qcard h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.2; color: var(--bone); text-align: center; margin: 0 }
.words-link { display: flex; justify-content: center; margin-top: clamp(18px, 2vw, 28px) }

/* pasos y servicios en cajas de plan */
.plan h3 { margin: 0 }
.plan .price small { align-self: flex-end; margin-bottom: .5em }
.plan .step-no { font-variant-numeric: tabular-nums }

/* preguntas: el boton va dentro del titulo */
.faq h3 { margin: 0; font: inherit }
.faq .q { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.72vw, 1.45rem); line-height: 1.25; letter-spacing: -.015em; color: var(--bone); transition: color .35s, transform .5s var(--e-out) }
.faq button:hover .q { transform: translateX(6px) }
.faq.open .q { color: var(--signal) }

/* llamada final */
.cta-head h2 { font-size: clamp(2.2rem, 7.4vw, 6.6rem); max-width: 14ch; margin-inline: auto }
.cta-lead { max-width: 52ch }

/* pie */
.fcol h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 16px }
.fcol .flbl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 12px }
.fcol .flbl:first-of-type { margin-top: 0 }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 14px }
.foot-legal a { color: var(--muted); transition: color .3s }
.foot-legal a:hover { color: var(--bone) }

/* aviso de cookies con el lenguaje de la caja */
.cookie { position: fixed; left: var(--gut); bottom: calc(var(--gut) + 24px); z-index: 80; max-width: 25rem; padding: 18px; display: flex; flex-wrap: wrap; gap: 10px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9) }
.cookie[hidden] { display: none }
.cookie p { flex: 1 1 100%; margin: 0 0 4px }
.cookie p a { color: var(--bone); text-decoration: underline; text-underline-offset: .2em }
.cookie button { min-height: 44px }
@media (max-width: 640px) { .cookie { left: 12px; right: 12px; bottom: 12px; max-width: none } }

@media (max-width: 640px) {
  .plan .price { font-size: 2.4rem }
}

/* ajustes tras la primera revision en navegador (25-09-2026) */
.phase h3 { font-size: clamp(1.1rem, 1.7vw, 1.6rem); overflow-wrap: anywhere }
.cta-underline { width: 104%; left: -2%; right: auto }
.fcol h4.mt-6 { margin-top: 26px }
.cookie { max-width: 22rem; padding: 14px; gap: 8px }
.cookie p { font-size: 11px; line-height: 1.6 }
.cookie .btn { padding: .8em 1.4em; font-size: 10.5px }
@media (max-width: 640px) {
  .hw-a { top: calc(8vh + 30px) }
  .cookie { left: 10px; right: 10px; bottom: 10px; padding: 12px }
  .cookie p { font-size: 10.5px }
}
.stat-desc { overflow-wrap: anywhere; hyphens: auto }
.cyl-stats.is-out { position: relative; z-index: 2; padding-top: 8px; padding-bottom: 40px }
@media (max-width: 640px) {
  .stat { padding: 14px }
  .stat-desc { font-size: 12.5px; margin-top: 10px }
}
.burger { height: 44px; width: 48px }
#drawer > a { min-height: 44px; display: flex; align-items: center }
/* kollaasi con imagenes de las demos de NordSur: encuadre un poco por encima del centro */
.tile img { object-position: 50% 30% }

/* titular del hero en Outfit (peticion de la usuaria, 25-09-2026). Mismo peso, mayusculas y escala. */
.hero-h1 .d-mega { font-family: 'Outfit', var(--font-display) }
/* titular del hero con la mayuscula solo en la primera letra, como se escribe (peticion de la usuaria, 25-09-2026) */
.hero-h1 .d-mega { text-transform: none; letter-spacing: -.028em }

/* intro de pixeles (25-09-2026). Negro desde el primer instante, el canvas lo dibuja el script. */
#intro { position: fixed; inset: 0; z-index: 100; display: none; background: var(--ink-deep) }
html.intro-on #intro, html.intro-run #intro { display: block }
html.intro-run #intro { background: transparent }
#intro canvas { display: block; width: 100%; height: 100% }
/* el hero espera al final del intro para entrar */
html:not(.ready) #hero [data-mask] > * { transform: translate3d(0, 105%, 0) }
html:not(.ready) #hero .stagger > * { opacity: 0; transform: translate3d(0, 20px, 0) }

/* clientes: marquesina de logos tras los servicios, como en lamalama.com (25-09-2026).
   Los logos son siluetas blancas con transparencia y aqui se pintan de un gris solido. */
.asiakkaat { position: relative; z-index: 2; padding-top: clamp(40px, 6vw, 88px) }
.asiakkaat-otsikko { padding-bottom: clamp(18px, 2.4vw, 30px) }
.marquee--logot { padding-block: clamp(34px, 4.5vw, 64px) }
.marquee--logot ul { gap: clamp(56px, 7vw, 120px); padding-right: clamp(56px, 7vw, 120px); animation-duration: 38s }
.marquee--logot li { display: flex; align-items: center; gap: 0 }
.marquee--logot:hover ul { animation-play-state: paused }
.asiakas { display: block; width: auto; filter: brightness(.56); user-select: none }
.asiakas--surussa { height: clamp(48px, 4.6vw, 70px) }
.asiakas--lemmikkiapu { height: clamp(30px, 2.9vw, 44px) }
.asiakas--smt { height: clamp(20px, 1.9vw, 29px) }
.asiakas--finestbolt { height: clamp(16.4px, 1.56vw, 23.8px) }
.asiakas--teksti { filter: none; color: #8f8f8f; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.1vw, 32px); letter-spacing: -.02em; line-height: 1; white-space: nowrap; text-transform: none }

/* la entradilla de la home en el hero, abajo a la izquierda, encima de
   Web Studio / Digital Marketing / Designers (25-09-2026, al quitar la palabra 3D) */
.hero-lead { position: absolute; z-index: 4; left: var(--gut); bottom: calc(3 * 2.05 * clamp(11px, .88vw, 13.5px) + clamp(14px, 1.6vw, 24px)); max-width: min(34ch, calc((100% - clamp(260px, 34vw, 470px)) / 2 - var(--gut) - 24px)) }
.hero-lead p { color: var(--muted); line-height: 1.7 }
@media (max-width: 640px) {
  #hero { min-height: calc(100svh + 70px) }
  .hero-lead { left: var(--gut); right: var(--gut); bottom: 1vh; max-width: none }
  .hero-lead p { font-size: 11.5px }
  .collage { bottom: 100px }
  .hw-b { bottom: calc(2vh + 104px) }
}

/* sin numeros 01 02 (25-09-2026): la respuesta de cada pregunta alinea con la pregunta */
.faq .body p { padding-left: 0 }
/* relojes con cifras de ancho fijo, para que no bailen al cambiar de segundo */
#clock, #clock2 { font-variant-numeric: tabular-nums }

/* botones de la cabecera mas grandes (peticion de la usuaria, 25-09-2026) */
.navchain a { font-size: clamp(12.5px, 1.02vw, 15.5px) }
.hdr-right { gap: 14px }

/* texto pequeno al estilo del parrafo del hero de lamalama.com (25-09-2026):
   grotesca suiza, mas grande, clara y algo apretada, en caja baja. Ellos usan
   Suisse Int'l (de pago); aqui Inter, libre y muy parecida. Los botones de la
   cabecera se quedan en Host Grotesk. */
:root { --font-text: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: var(--font-text) }
.navchain a, .drawer-foot, .drawer-foot a, .drawer-foot .btn { font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif }
.mono-md { font-size: clamp(16px, 1.32vw, 19px); line-height: 1.36; letter-spacing: -.014em; color: var(--bone) }
.mono-sm { font-size: clamp(14px, 1.04vw, 15.5px); line-height: 1.5; letter-spacing: -.008em; color: #b3b2ad }
.mono-xs { letter-spacing: .07em }
.cyl-intro .cyl-lead { font-size: clamp(14.5px, 1.12vw, 16.5px); line-height: 1.45; color: #cfcdc8 }
.faq .body p { font-size: clamp(14px, 1.04vw, 15.5px); line-height: 1.6; letter-spacing: -.008em; color: #b3b2ad }
.qcard .qt { font-size: clamp(13.5px, .98vw, 15px); line-height: 1.5; letter-spacing: -.006em }
.tcard .tx { font-size: clamp(12.5px, .9vw, 14px); line-height: 1.45 }
.hero-list li { font-size: clamp(13px, 1vw, 15px); letter-spacing: -.005em }
.hero-lead { bottom: calc(3 * 2.05 * clamp(13px, 1vw, 15px) + clamp(14px, 1.6vw, 24px)) }
.fcol a { font-size: clamp(13.5px, 1vw, 15px) }
.dock p { font-size: clamp(12px, .9vw, 14px); line-height: 1.4 }
.cookie p { font-size: 13px; line-height: 1.5 }
@media (max-width: 640px) {
  .hero-lead { bottom: 1vh }
  .hero-lead p { font-size: 13.5px; line-height: 1.5 }
  .cookie p { font-size: 12.5px }
}

/* texto pequeno mas grande y mas legible (peticion de la usuaria, 25-09-2026):
   mas cuerpo, interletra normal, algo mas de interlineado y tinta mas clara */
.mono-md { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; letter-spacing: -.005em }
.mono-sm { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; letter-spacing: 0; color: #c4c2bd }
.mono-xs { font-size: clamp(11px, .84vw, 12.5px) }
.cyl-intro .cyl-lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #d6d4cf }
.faq .body p { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.65; letter-spacing: 0; color: #c4c2bd }
.qcard .qt { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; letter-spacing: 0 }
.tcard .tx { font-size: clamp(14px, 1vw, 15.5px); line-height: 1.5 }
.hero-list li { font-size: clamp(14px, 1.08vw, 16px) }
.hero-lead { bottom: calc(3 * 2.05 * clamp(14px, 1.08vw, 16px) + clamp(14px, 1.6vw, 24px)); max-width: min(38ch, calc((100% - clamp(260px, 34vw, 470px)) / 2 - var(--gut) - 24px)) }
.fcol a { font-size: clamp(15px, 1.1vw, 16.5px) }
.dock p { font-size: clamp(13px, .98vw, 15px) }
.cookie p { font-size: 14px; line-height: 1.55 }
@media (max-width: 640px) {
  #hero { min-height: calc(100svh + 110px) }
  .hero-lead { bottom: 1vh; left: var(--gut); right: var(--gut); max-width: none }
  .hero-lead p { font-size: 15px; line-height: 1.55 }
  .collage { bottom: 140px }
  .hw-b { bottom: calc(2vh + 144px) }
  .cookie p { font-size: 13.5px }
}

/* Web Studio / Digital Marketing / Designers en Host Grotesk, como los botones de la cabecera (25-09-2026) */
.hero-list li { font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0 }

/* la lista del hero pasa arriba a la derecha, al sitio del idioma y la hora,
   con los tres servicios nuevos; la entradilla baja al hueco que deja (25-09-2026) */
.hero-list--oikea { left: auto; right: var(--gut); bottom: auto; top: 0; text-align: right }
.hero-list__varaa a { color: var(--dim); transition: color .3s }
.hero-list__varaa a:hover { color: var(--bone) }
@media (min-width: 641px) { .hero-lead { bottom: 0 } }
@media (max-width: 640px) {
  .hero-list--oikea { right: auto; left: var(--gut); text-align: left }
  .hero-list__varaa { display: none }
}

/* Web Development / SEO & AI Visibility / Automation & Booking en la letra original de la plantilla, JetBrains Mono (25-09-2026) */
.hero-list li { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0 }

/* la lista del hero vuelve a Host Grotesk, como los botones de la cabecera, y un poco mas pequena (25-09-2026) */
.hero-list li { font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0; font-size: clamp(12.5px, .97vw, 14px); line-height: 2 }

/* banda final: sede y alcance, con un globo de pixeles que gira y Tallin en rojo (25-09-2026).
   Compone como el hero: un texto arriba a la izquierda, otro abajo a la derecha, el globo en medio. */
.banda { position: relative; z-index: 2; background: var(--ink-deep); border-top: 1px solid var(--line); min-height: clamp(460px, 44vw, 660px); padding: clamp(48px, 5vw, 84px) var(--gut); display: grid; place-items: center; overflow: hidden }
.banda-teksti { position: absolute; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; color: var(--bone); margin: 0; pointer-events: none }
.banda-teksti--a { top: clamp(48px, 5vw, 84px); left: var(--gut); text-align: left }
.banda-teksti--b { bottom: clamp(48px, 5vw, 84px); right: var(--gut); text-align: right }
.banda-pallo { position: relative; z-index: 1; width: clamp(260px, 32vw, 460px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end }
.banda-pallo canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.banda-ns { position: relative; height: clamp(16px, 1.5vw, 22px); width: auto; opacity: .9 }
@media (max-width: 760px) {
  .banda { display: flex; flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; padding-block: 52px 60px }
  .banda-teksti { position: static; font-size: clamp(1.9rem, 10vw, 2.8rem) }
  .banda-pallo { align-self: center; width: min(78vw, 320px); margin-block: 4px 10px }
}

/* la banda final usa la letra del titular del hero (Outfit en la web publicada), 25-09-2026 */
.banda-teksti { font-family: 'Outfit', var(--font-display); letter-spacing: -.03em }
/* con una sola palabra por esquina, mas grande, como NORD / SUR */
.banda-teksti { font-size: clamp(2.6rem, 6.4vw, 6.6rem) }
@media (max-width: 760px) { .banda-teksti { font-size: clamp(2.4rem, 12vw, 3.4rem) } }

/* campana: una tarjeta que se puede comprar, tras servicios y clientes (25-09-2026).
   Es una fila: cuando lleguen verkkokauppa y los demas planes, entran a su lado. */
.kampanja-rivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 460px)); justify-content: center; gap: 16px }
.kampanja-kortti { gap: clamp(18px, 1.8vw, 24px) }
.kampanja-kortti h2 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15 }
.kampanja-hinnat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding-block: 6px 16px; border-bottom: 1px solid var(--line) }
.kampanja-hinnat .price { margin: 0; white-space: nowrap }
.kampanja-hinnat .price small { margin-left: .35em }
.kampanja-selite { margin: 8px 0 0; color: var(--muted) }
.kampanja-kortti ul { margin: 0; padding: 0; list-style: none }
.kampanja-kortti .plan ul li, .kampanja-kortti ul li { font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.5; color: #c4c2bd }
.kampanja-nappi { margin-top: 6px }
@media (max-width: 420px) { .kampanja-hinnat .price { font-size: 1.9rem } }
.kampanja-rivi { grid-template-columns: repeat(auto-fit, minmax(290px, 520px)) }
.kampanja-hinnat .price { font-size: clamp(1.9rem, 2.7vw, 2.7rem) }
@media (max-width: 380px) { .kampanja-hinnat { grid-template-columns: 1fr; gap: 14px } }

/* fila de precios con tres tarjetas (25-09-2026): campana destacada, verkkokauppa y a medida */
.kampanja-eyebrow { margin: 0 0 clamp(20px, 2.4vw, 32px); display: block; text-align: center }
.kampanja-rivi { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch }
.kampanja-kortti { display: flex; flex-direction: column }
.kampanja-kortti h3 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; min-height: 2.3em }
.kampanja-kortti .kampanja-nappi { margin-top: auto }
.kampanja-hinnat--yksi { grid-template-columns: 1fr }
.price-alk { font-family: var(--font-mono); font-size: .36em; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-right: .3em; align-self: center }
.price--teksti { font-size: clamp(1.6rem, 2.2vw, 2.2rem) !important; line-height: 1.05 }
@media (min-width: 1100px) { .kampanja-rivi { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.kampanja-eyebrow { display: table; margin: 0 auto clamp(20px, 2.4vw, 32px) }
@media (min-width: 700px) and (max-width: 1099px) {
  .kampanja-rivi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kampanja-rivi > .kampanja-kortti:first-child { grid-column: 1 / -1 }
}
@media (max-width: 699px) { .kampanja-rivi { grid-template-columns: minmax(0, 1fr) } }

/* hinnasto completo (25-09-2026): tres paquetes, lisapalvelut y proyectos grandes.
   La cuota mensual es la cifra grande; el aloitusmaksu va pequeno debajo, como en la competencia. */
.kampanja-kortti h4 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; min-height: 2.3em }
.kampanja-kortti .flag { font-family: var(--font-mono) }
.hinnat-ryhma { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.02em; color: var(--bone); margin: clamp(48px, 5vw, 80px) 0 clamp(16px, 1.6vw, 22px) }
.kampanja-eyebrow + .hinnat-ryhma { margin-top: 0 }
.hinnat-ryhma-teksti { margin: -8px 0 clamp(16px, 1.6vw, 22px) }
.hinnat-ehdot { margin: 18px 0 0; text-align: center; color: var(--muted) }
.lisa-rivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px }
.lisa-kortti { padding: clamp(18px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 6px; transition: transform .6s var(--e-out), border-color .5s var(--e-soft) }
.lisa-kortti:hover { transform: translateY(-4px); border-color: var(--line-2) }
.lisa-kortti h4 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--bone) }
.lisa-hinta { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.9vw, 1.9rem); letter-spacing: -.03em; color: var(--bone); line-height: 1 }
.lisa-hinta small { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .09em; color: var(--dim); text-transform: uppercase; margin-left: .4em }
.lisa-kortti .kampanja-selite { margin: 2px 0 4px }
.lisa-kuvaus { margin: 0; font-size: clamp(14px, 1vw, 15px); line-height: 1.5; color: #c4c2bd; flex: 1 }
.lisa-linkki { margin-top: 10px; font-size: 14px; color: var(--bone); min-height: 44px; display: inline-flex; align-items: center; transition: color .3s }
.lisa-linkki:hover { color: var(--signal) }
@media (min-width: 1100px) { .kampanja-rivi--kaksi { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 700px) and (max-width: 1099px) { .kampanja-rivi--kaksi > .kampanja-kortti:first-child { grid-column: auto } }
@media (min-width: 700px) and (max-width: 1099px) {
  .kampanja-rivi > .kampanja-kortti:first-child { grid-column: auto }
  .kampanja-rivi > .kampanja-kortti.feat { grid-column: 1 / -1 }
}
.lisa-linkki { gap: .4em }
@media (max-width: 640px) {
  .lisa-rivi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .lisa-kortti { padding: 14px; gap: 4px }
  .lisa-kortti h4 { font-size: 15px; overflow-wrap: anywhere; hyphens: auto }
  .lisa-hinta { font-size: 1.35rem }
  .lisa-hinta small { font-size: 9.5px; margin-left: .25em }
  .lisa-kortti .kampanja-selite { font-size: 9.5px }
  .lisa-kuvaus { font-size: 13px }
  .lisa-linkki { font-size: 13px; margin-top: 4px }
}

/* sin fotos bajo el hero (28-09-2026, "for now without photos. we will add photos later"): las
   tarjetas de "Google-hausta yhteydenottoon", las del blog y el aviso de WhatsApp del contacto se
   quedan sin imagen hasta que haya fotos reales. Contenedores mas bajos para que no queden huecos. */
.qcard { justify-content: center; min-height: clamp(200px, 16vw, 250px) }
.cw { height: clamp(320px, 30vw, 420px) }
.arc { height: clamp(300px, 27vw, 390px) }
.tcard .tx { -webkit-line-clamp: 4 }
.dock-av--merkki { display: grid; place-items: center; background: var(--panel-2) }
.dock-av--merkki img { width: 68%; height: auto; object-fit: contain }
@media(max-width:640px) { .cw { height: 330px } .arc { height: 310px } }

/* Palvelut abre una lista al hacer clic (28-09-2026, "put it back like it was and then if somebody clicks on
   product or services a drop down menu with the ai chat bot, website etc"). La cabecera es la de antes, y la
   lista va en letra mas grande que las pastillas para que se lea bien. Fuente del HTML: _build/valikko.py. */
.nav-ryhma { position: relative; display: flex }
.nav-ryhma[open] { z-index: 3 }
.nav-ryhma > summary { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: .72em 1.15em; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(20, 20, 20, .55); backdrop-filter: blur(6px); font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(12.5px, 1.02vw, 15.5px); letter-spacing: .02em; line-height: 1; color: var(--bone); list-style: none; cursor: pointer; user-select: none; overflow: hidden; isolation: isolate; transition: color .34s var(--e-soft), border-color .34s var(--e-soft) }
.nav-ryhma > summary::-webkit-details-marker { display: none }
.nav-ryhma > summary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); border-radius: 999px; transform: scale(.2); opacity: 0; transition: transform .45s var(--e-io), opacity .3s var(--e-io) }
.nav-ryhma > summary:hover, .nav-ryhma[open] > summary { color: var(--ink); border-color: var(--bone) }
.nav-ryhma > summary:hover::before, .nav-ryhma[open] > summary::before { transform: scale(1); opacity: 1 }
.nav-ryhma > summary svg, .drawer-ryhma > summary svg { width: .75em; height: .75em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e-soft) }
.nav-ryhma[open] > summary svg, .drawer-ryhma[open] > summary svg { transform: rotate(180deg) }
.nav-ala { position: absolute; top: calc(100% + 10px); left: 0; z-index: 80; display: flex; flex-direction: column; min-width: 270px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; background: rgba(20, 20, 20, .97); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85) }
.navchain .nav-ala a { margin: 0; padding: .8em 1em; border: 0; border-radius: 10px; background: transparent; backdrop-filter: none; font-size: 16px; letter-spacing: 0; line-height: 1.2; white-space: nowrap }
.navchain .nav-ala a { flex-shrink: 0 }
.navchain .nav-ala a::before { border-radius: 10px }
.navchain .nav-ala a:hover { transform: none; border-color: transparent }
.navchain .nav-ala a[aria-current="page"] { background: rgba(244, 243, 240, .1) }
.navchain .nav-ala a.nav-ala-kaikki { margin-top: 6px; color: #b3b2ad }
.navchain .nav-ala a.nav-ala-kaikki:hover { color: var(--ink) }

/* el cajon del movil: Palvelut se despliega igual, con las siete paginas debajo en letra normal */
#drawer.drawer--avattava { justify-content: flex-start; overflow-y: auto; padding-top: calc(var(--rail) + 8px) }
/* la cruz de cerrar: las rayas estan a 5,5px una de otra (4px de hueco y 1,5px de grosor), asi que se mueven
   5,5px para cruzarse en el centro. Con 2,75px la cruz salia torcida */
.burger.open i:nth-child(1) { transform: translateY(5.5px) rotate(45deg) }
.burger.open i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) }
#drawer.drawer--avattava > :first-child { margin-top: auto }
#drawer.drawer--avattava > :last-child { margin-bottom: auto }
#drawer > .drawer-ryhma { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--e-out), transform .7s var(--e-out) }
#drawer.open > .drawer-ryhma { opacity: 1; transform: none; transition-delay: .2s }
#drawer.open > .drawer-ryhma + .drawer-ryhma { transition-delay: .27s }
.drawer-ryhma > summary { display: flex; align-items: center; gap: .3em; min-height: 44px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 11vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; color: var(--bone); list-style: none; cursor: pointer }
.drawer-ryhma > summary::-webkit-details-marker { display: none }
.drawer-ryhma > summary svg { width: .4em; height: .4em }
.drawer-ala { display: flex; flex-direction: column; padding: 6px 0 14px 2px }
.drawer-ala a { display: flex; align-items: center; min-height: 44px; padding: 5px 0; font-family: var(--font-text); font-size: 1.3rem; line-height: 1.25; color: #c4c2bd; transition: color .3s }
.drawer-ala a:hover, .drawer-ala a[aria-current="page"] { color: var(--bone) }

/* botones con el nombre del servicio en las tarjetas de la portada (28-09-2026, "On the front page needs to a
   button that says the ai chatbot"): la tarjeta entera ya era un enlace, pero no lo parecia. En el movil las
   tarjetas van una debajo de otra para que el nombre quepa entero. */
.stat-nappi { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; margin-top: 18px; padding: .75em 1.25em; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1.1; transition: background .3s, color .3s }
a.stat:hover .stat-nappi, a.stat:focus-visible .stat-nappi { background: var(--signal); color: #fff }
@media (max-width: 640px) {
  .cyl-stats .grid { grid-template-columns: minmax(0, 1fr) }
  .stat-nappi { font-size: 14px }
}
@media (prefers-reduced-motion: reduce) {
  .nav-ryhma > summary, .nav-ryhma > summary::before, .nav-ryhma > summary svg, .drawer-ryhma > summary svg, .drawer-ala a, .stat-nappi { transition: none }
  #drawer > .drawer-ryhma { transition: none }
}

/* Hero NORD / SUR (29-09-2026, "we go live with the last version of everything"): lo que era la vista previa local en
   Oblisk pasa a la web, en Saira Extra Condensed 900 (libre, eleccion de Amanda). NORD arriba a la izquierda y SUR abajo
   a la derecha, y el h1 de siempre visible y pequeno encima del texto del hero ("Show it small"), porque Google da mas
   peso a lo que el visitante ve. */
.hero-nordsur { --fs: clamp(5rem, 16vw, 14rem) }
.hero-nordsur .d-mega { font-family: 'Saira Extra Condensed', var(--font-display); font-weight: 900; font-synthesis: none; text-transform: uppercase; letter-spacing: 0; line-height: .8; font-size: var(--fs); width: auto }
/* en escritorio NORD y SUR van centradas en el hueco entre el borde de la pagina y las fotos */
@media (min-width: 1024px) {
  .hero-nordsur .hero-word { width: calc((100% - clamp(260px, 34vw, 470px)) / 2); display: flex; justify-content: center }
  .hero-nordsur .hw-a { left: 0 }
  .hero-nordsur .hw-b { right: 0 }
  .hero-nordsur .hw-b .d-mega { margin-left: 0 }
}
/* la burbuja "Löydy Googlesta..." habla desde la S de SUR, con la caja de "Pyydä tarjous" justo encima */
.hero-nordsur .sur-wrap { position: relative; display: inline-block }
.say-s { position: absolute; left: calc(var(--fs) * .08); bottom: calc(100% - var(--fs) * .07 + 15px); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: auto; width: max-content }
.say-s .dock { margin-left: clamp(0px, calc(100vw - 1024px + 30px), 70px) }
.bub-s { position: relative; background: var(--signal); color: #fff; border-radius: 9px 9px 9px 2px; padding: .6em .85em; font-family: var(--font-mono); font-size: clamp(9.5px, .74vw, 11.5px); line-height: 1.45; white-space: normal; max-width: calc(((100vw - clamp(260px, 34vw, 470px)) / 2 + var(--fs) * .78) / 2 - var(--fs) * .08 - var(--gut) * .5); transform-origin: bottom left; transform: scale(.6) translateY(8px); opacity: 0; transition: transform .55s var(--e-back), opacity .35s ease }
.bub-s.show { transform: none; opacity: 1 }
.bub-s::after { content: ""; position: absolute; left: 2px; top: 100%; border: 7px solid transparent; border-top-color: var(--signal); border-right-width: 10px; border-left-width: 0 }
@media (max-width: 900px) { .say-s { display: none } }
@media (prefers-reduced-motion: reduce) { .bub-s { transition: none } }
.hero-h1-pieni { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.15; letter-spacing: -.01em; color: var(--bone) }
/* la banda final (Working / worldwide) en la misma letra que NORD / SUR, una palabra por esquina */
.banda-teksti { font-family: 'Saira Extra Condensed', var(--font-display); font-weight: 900; font-synthesis: none; letter-spacing: 0; line-height: .84; font-size: clamp(4rem, 8.4vw, 8.4rem) }
@media (max-width: 760px) { .banda-teksti { font-size: clamp(3.2rem, 16vw, 4.8rem) } }
/* en el movil el h1 pequeno ocupa una o dos lineas mas encima del texto del hero: SUR, el kollaasi y el alto del hero
   suben lo mismo para que el titulo no pise la palabra SUR (29-09-2026) */
@media (max-width: 640px) {
  .hero-h1-pieni { font-size: 1.1rem; margin-bottom: 10px }
  #hero { min-height: calc(100svh + 170px) }
  .collage { bottom: 200px }
  .hw-b { bottom: calc(2vh + 204px) }
}

/* las palabras del tambor de servicios llevan a su pagina (29-09-2026, "can we make these clickabe"): el enlace solo
   ocupa la palabra y su icono, no la banda entera */
a.cyl-row { width: auto; color: inherit; text-decoration: none; cursor: pointer }
a.cyl-row:hover .cyl-word { color: var(--bone) }
a.cyl-row:focus-visible { outline: 2px solid var(--bone); outline-offset: 6px; border-radius: 12px }
/* el texto pequeno del hero no toca las esquinas del marco (.frame-mark, fijas en la pantalla): 16px de aire, lo mismo
   en horizontal que en vertical (29-09-2026, "move all the little text so its symmetrically away from the corner a
   few mills") */
.hero-list--oikea { right: calc(var(--gut) + 16px); top: 8px }
@media (min-width: 641px) {
  .hero-lead { left: calc(var(--gut) + 16px); max-width: min(38ch, calc((100% - clamp(260px, 34vw, 470px)) / 2 - var(--gut) - 40px)) }
}
@media (max-width: 640px) {
  .hero-list--oikea { left: calc(var(--gut) + 16px); right: auto }
  .hero-lead { left: calc(var(--gut) + 16px); right: calc(var(--gut) + 16px) }
}