@font-face {
font-family: "PP Neue Montreal";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Neue Montreal Medium 500.otf) format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Teko";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Teko-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Teko";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Teko-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nippo";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Nippo-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nippo";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Nippo-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Nippo";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Nippo-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Array";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Array-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Array Wide";
src: url(//urbz.ee/wp-content/themes/URBZ/assets/fonts/Array-Wide.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root { --ink: #0C0D0E;
--paper: #F0ECE4;
--orange: #FF4A2F;
--petrol: #12373D;
--steel: #8FA3AD; --font-display: "Teko", sans-serif;
--font-body: "Nippo", sans-serif;
--font-accent: "Array", sans-serif;
--font-accent-wide: "Array Wide", sans-serif;
--text-hero: clamp(72px, 6vw, 112px);
--text-scene: clamp(58px, 4.8vw, 88px);
--text-section: clamp(36px, 3vw, 56px);
--text-card: clamp(28px, 2.2vw, 36px);
--text-large: 18px;
--text-body: 16px;
--text-small: 13px;
--text-meta: 12px;
--text-button: 13px; --grid-columns: 12;
--grid-gap: 24px;
--page-margin: clamp(64px, 6vw, 110px);
--content-max: 1520px; --space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px; --radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px; --shadow-card:
0 8px 22px rgba(0, 0, 0, 0.12),
0 28px 70px rgba(0, 0, 0, 0.18);
--shadow-card-hover:
0 12px 28px rgba(0, 0, 0, 0.16),
0 38px 90px rgba(0, 0, 0, 0.24); --ease-urbz: cubic-bezier(.22, 1, .36, 1);
--speed-fast: 180ms;
--speed-ui: 320ms;
--speed-scene: 700ms;
--black: var(--ink);
--grey: var(--steel);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--black);
color: var(--paper);
font-family: var(--font-body);
overflow-x: hidden;
}
.text-small {
font-size: var(--text-small);
line-height: 1.45;
}
.meta {
font-size: var(--text-meta);
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.button-text {
font-size: var(--text-button);
font-weight: 500;
}
.accent-word {
font-family: var(--font-accent);
}
a {
color: inherit;
}
::selection {
background: var(--orange);
color: var(--black);
} .site-header {
position: fixed;
inset: 0 0 auto 0;
height: 78px;
padding: 0 var(--page-x);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
mix-blend-mode: difference;
}
.site-logo {
color: white;
text-decoration: none;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.05em;
}
.site-logo span {
color: var(--orange);
}
.site-nav ul {
display: flex;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav a {
color: white;
text-decoration: none;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
} .scene {
position: relative;
min-height: 100svh;
} .hero {
background:
radial-gradient(
circle at 72% 30%,
rgba(255, 75, 31, 0.08),
transparent 31%
),
var(--black);
overflow: hidden;
}
.hero-grid {
min-height: 100svh;
padding:
110px
var(--page-x)
48px;
display: grid;
grid-template-columns:
minmax(0, 1.35fr)
minmax(330px, 0.65fr);
grid-template-rows:
auto
1fr;
column-gap: clamp(40px, 6vw, 120px);
}
.hero-meta {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
padding-bottom: 16px;
border-bottom:
1px solid rgba(238, 233, 223, 0.18);
color: var(--grey);
font-size: 10px;
letter-spacing: 0.12em;
}
.hero-main {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: clamp(60px, 10vh, 130px);
padding-bottom: 60px;
}
.hero-title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(58px, 6vw, 112px);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.hero-title span {
display: block;
}
.hero-title em {
color: var(--orange);
font-style: normal;
}
.hero-bottom {
display: grid;
grid-template-columns:
minmax(220px, 390px)
auto;
gap: 50px;
align-items: end;
margin-top: 80px;
}
.hero-description {
margin: 0;
max-width: 390px;
color: rgba(238, 233, 223, 0.75);
font-size: 16px;
line-height: 1.55;
}
.hero-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
} .button {
text-decoration: none;
}
.button-primary {
display: inline-flex;
align-items: center;
justify-content: space-between;
min-width: 230px;
padding: 15px 18px;
background: var(--orange);
color: var(--black);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
transition:
transform .35s var(--ease-out),
background .35s var(--ease-out);
}
.button-primary span {
margin-left: 30px;
}
.button-primary:hover {
transform: translateY(-3px);
background: var(--paper);
}
.button-link {
display: inline-flex;
gap: 16px;
padding-bottom: 5px;
border-bottom:
1px solid rgba(238, 233, 223, .4);
color: rgba(238, 233, 223, .75);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
} .hero-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 650px;
}
.hero-number {
position: absolute;
top: 5%;
right: -4%;
color: rgba(238, 233, 223, .04);
font-size: clamp(210px, 25vw, 430px);
font-weight: 800;
line-height: .8;
letter-spacing: -.1em;
pointer-events: none;
}
.browser-object {
position: relative;
z-index: 2;
width: min(100%, 570px);
background: var(--paper);
color: var(--black);
transform: rotate(-2deg);
transform-origin: center;
box-shadow:
0 50px 120px rgba(0, 0, 0, .45);
}
.browser-top {
height: 37px;
display: flex;
align-items: center;
padding: 0 13px;
border-bottom:
1px solid rgba(10, 10, 10, .18);
}
.browser-dots {
display: flex;
gap: 5px;
}
.browser-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(10, 10, 10, .32);
}
.browser-url {
margin-left: auto;
color: rgba(10, 10, 10, .45);
font-size: 8px;
letter-spacing: .08em;
}
.browser-content {
min-height: 390px;
padding: clamp(30px, 4vw, 55px);
display: flex;
flex-direction: column;
}
.browser-label {
font-size: 8px;
letter-spacing: .12em;
}
.browser-headline {
margin-top: auto;
font-size: clamp(42px, 5vw, 80px);
line-height: .78;
font-weight: 800;
letter-spacing: -.07em;
}
.browser-headline strong {
color: var(--orange);
}
.browser-line {
height: 1px;
margin-top: 35px;
background: rgba(10, 10, 10, .22);
}
.browser-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
color: rgba(10, 10, 10, .5);
font-size: 7px;
letter-spacing: .1em;
}
.orange-block {
position: absolute;
width: 145px;
height: 145px;
right: 2%;
bottom: 13%;
background: var(--orange);
transform: rotate(8deg);
} .hero-scroll {
position: absolute;
left: var(--page-x);
bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
font-size: 8px;
letter-spacing: .12em;
}
.hero-scroll div {
width: 60px;
height: 1px;
background: rgba(238, 233, 223, .4);
} .scene-placeholder {
min-height: 100svh;
padding:
110px
var(--page-x)
60px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.scene-light {
background: var(--paper);
color: var(--black);
}
.scene-index {
font-size: 11px;
letter-spacing: .12em;
}
.scene-placeholder h2 {
margin: 0;
font-size: clamp(64px, 8.5vw, 150px);
line-height: .92;
letter-spacing: -.08em;
text-transform: uppercase;
}
.scene-placeholder h2 em {
color: var(--orange);
font-style: normal;
} @media (max-width: 900px) {
.site-header {
height: 68px;
}
.site-nav {
display: none;
}
.hero-grid {
display: flex;
flex-direction: column;
padding-top: 90px;
}
.hero-main {
padding-top: 50px;
padding-bottom: 20px;
}
.hero-title {
font-size: clamp(48px, 12vw, 74px);
}
.hero-bottom {
display: block;
margin-top: 45px;
}
.hero-actions {
margin-top: 30px;
}
.hero-art {
min-height: 450px;
margin-top: 10px;
}
.browser-object {
width: 92%;
}
.browser-content {
min-height: 300px;
}
.orange-block {
width: 95px;
height: 95px;
}
.hero-scroll {
display: none;
}
} .hero-v2 {
position: relative;
min-height: 100svh;
padding:
105px
var(--page-margin)
32px;
background: var(--ink);
color: var(--paper);
overflow: hidden;
}
.hero-v2__grid {
width: min(100%, var(--content-max));
min-height: calc(100svh - 170px);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto 1fr;
gap: var(--grid-gap);
}
.hero-v2__meta {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(240, 236, 228, 0.16);
color: var(--steel);
} .hero-v2__copy {
grid-column: 1 / span 7;
display: flex;
flex-direction: column;
justify-content: center;
padding-block:
clamp(70px, 9vh, 130px)
var(--space-16);
}
.hero-v2__kicker {
margin: 0 0 var(--space-8);
color: var(--steel);
}
.hero-v2__title {
margin: 0;
}
.hero-v2__title span {
display: block;
}
.hero-v2__title em {
color: var(--orange);
font-style: normal;
}
.hero-v2__bottom {
margin-top: clamp(48px, 6vw, 80px);
display: grid;
grid-template-columns: minmax(220px, 380px) 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: end;
}
.hero-v2__description {
margin: 0;
max-width: 390px;
color: rgba(240, 236, 228, 0.72);
} .hero-v2__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
padding:
14px
18px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-button);
font-weight: 500;
text-decoration: none;
transition:
transform var(--speed-ui) var(--ease-urbz),
background var(--speed-ui) var(--ease-urbz),
color var(--speed-ui) var(--ease-urbz),
box-shadow var(--speed-ui) var(--ease-urbz);
}
.btn-primary {
min-width: 240px;
background: var(--orange);
color: var(--ink);
box-shadow:
0 8px 24px rgba(255, 74, 47, 0.14);
}
.btn-primary:hover {
transform: translateY(-2px);
background: var(--paper);
box-shadow:
0 12px 34px rgba(0, 0, 0, 0.24);
}
.btn-secondary {
color: var(--paper);
border: 1px solid rgba(240, 236, 228, 0.22);
background: rgba(240, 236, 228, 0.02);
}
.btn-secondary:hover {
transform: translateY(-2px);
border-color: rgba(240, 236, 228, 0.5);
background: rgba(240, 236, 228, 0.06);
}
.btn:active {
transform: translateY(0) scale(0.98);
}
.btn-arrow {
transition:
transform var(--speed-ui) var(--ease-urbz);
}
.btn:hover .btn-arrow {
transform: translate(3px, -2px);
} .hero-v2__visual {
grid-column: 8 / -1;
position: relative;
min-height: 590px;
display: flex;
align-items: center;
justify-content: center;
} .hero-v2__signal {
position: absolute;
width: 52%;
aspect-ratio: 1;
right: -10%;
top: 17%;
border-radius: 50%;
background: var(--orange);
opacity: 0.92;
transform: rotate(-6deg);
} .showcase-card--desktop {
position: relative;
z-index: 2;
width: min(100%, 560px);
min-height: 420px;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transform: translateX(-2%) rotate(-1.4deg);
transition:
transform var(--speed-ui) var(--ease-urbz),
box-shadow var(--speed-ui) var(--ease-urbz);
}
.hero-v2__visual:hover .showcase-card--desktop {
transform:
translateX(-2%)
translateY(-5px)
rotate(-1deg);
box-shadow: var(--shadow-card-hover);
}
.showcase-card__top {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-6);
border-bottom: 1px solid rgba(12, 13, 14, 0.12);
font-family: var(--font-body);
font-size: 11px;
color: rgba(12, 13, 14, 0.56);
}
.showcase-card__content {
flex: 1;
padding: clamp(32px, 4vw, 52px);
display: flex;
flex-direction: column;
}
.showcase-card__content > .meta {
color: rgba(12, 13, 14, 0.52);
}
.showcase-card__headline {
margin-top: auto;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(58px, 5vw, 88px);
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.showcase-card__headline strong {
color: var(--orange);
font-weight: 600;
}
.showcase-card__fake-nav {
margin-top: var(--space-8);
padding-top: var(--space-4);
display: flex;
justify-content: space-between;
gap: var(--space-4);
border-top: 1px solid rgba(12, 13, 14, 0.14);
font-size: 11px;
color: rgba(12, 13, 14, 0.58);
} .showcase-card--mobile {
position: absolute;
z-index: 4;
width: clamp(160px, 31%, 205px);
min-height: 330px;
right: -3%;
bottom: 7%;
padding:
var(--space-6)
var(--space-4);
display: flex;
flex-direction: column;
background: var(--petrol);
color: var(--paper);
border-radius: var(--radius-lg);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.26),
0 34px 80px rgba(0, 0, 0, 0.30);
transform: rotate(3deg);
transition:
transform var(--speed-ui) var(--ease-urbz);
}
.hero-v2__visual:hover .showcase-card--mobile {
transform:
translateY(-8px)
rotate(2deg);
}
.showcase-mobile__logo {
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
}
.showcase-mobile__logo span {
color: var(--orange);
}
.showcase-mobile__headline {
margin-top: auto;
font-family: var(--font-display);
font-size: clamp(34px, 3vw, 46px);
line-height: 0.9;
text-transform: uppercase;
}
.showcase-mobile__headline strong {
color: var(--orange);
font-weight: 600;
}
.showcase-mobile__button {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgba(240, 236, 228, 0.18);
font-size: 10px;
} .hero-v2__note {
position: absolute;
left: -1%;
bottom: 5%;
color: var(--steel);
line-height: 1.55;
} .hero-v2__footer {
width: min(100%, var(--content-max));
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--steel);
}
.hero-v2__scroll {
display: flex;
align-items: center;
gap: var(--space-3);
} .build-placeholder {
min-height: 70vh;
padding:
var(--space-32)
var(--page-margin);
background: var(--paper);
color: var(--ink);
} @media (max-width: 1100px) {
.hero-v2__copy {
grid-column: 1 / span 7;
}
.hero-v2__visual {
grid-column: 8 / -1;
min-height: 520px;
}
.hero-v2__bottom {
display: block;
}
.hero-v2__actions {
margin-top: var(--space-8);
}
.showcase-card--mobile {
right: -8%;
}
} @media (max-width: 760px) {
.hero-v2 {
padding:
90px
20px
28px;
}
.hero-v2__grid {
display: block;
min-height: auto;
}
.hero-v2__meta {
margin-bottom: var(--space-16);
}
.hero-v2__meta span:last-child {
display: none;
}
.hero-v2__copy {
padding: 0;
}
.hero-v2__kicker {
margin-bottom: var(--space-6);
}
.hero-v2__title {
font-size: clamp(54px, 16vw, 76px);
}
.hero-v2__bottom {
margin-top: var(--space-12);
}
.hero-v2__description {
max-width: 330px;
}
.hero-v2__actions {
margin-top: var(--space-8);
}
.btn-primary {
width: 100%;
}
.hero-v2__visual {
min-height: 480px;
margin-top: var(--space-16);
}
.showcase-card--desktop {
width: 92%;
min-height: 340px;
}
.showcase-card__headline {
font-size: clamp(46px, 14vw, 68px);
}
.showcase-card--mobile {
width: 145px;
min-height: 260px;
right: 0;
bottom: 4%;
}
.hero-v2__signal {
width: 62%;
right: -20%;
top: 18%;
}
.hero-v2__note {
display: none;
}
.hero-v2__footer {
margin-top: var(--space-12);
}
} .hero-v2__copy {
grid-column: 1 / span 6;
padding-block:
clamp(60px, 8vh, 110px)
var(--space-16);
}
.hero-v2__title {
max-width: 760px;
font-size: clamp(76px, 6.6vw, 124px);
line-height: 0.91;
}
.hero-v2__bottom {
margin-top: clamp(40px, 4.5vw, 64px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
}
.hero-v2__description {
max-width: 430px;
}
.hero-v2__actions {
flex-direction: row;
align-items: center;
} .hero-v2__visual {
grid-column: 7 / -1;
min-height: 620px;
transform: translateX(4%);
}
.showcase-card--desktop {
width: min(108%, 650px);
min-height: 455px;
transform:
translateX(-1%)
rotate(-0.8deg);
}
.hero-v2__visual:hover .showcase-card--desktop {
transform:
translateX(-1%)
translateY(-5px)
rotate(-0.4deg);
}
.showcase-card--mobile {
width: clamp(165px, 29%, 215px);
right: -1%;
bottom: 7%;
transform: rotate(2deg);
} .hero-v2__signal {
width: 48%;
height: 62%;
right: -14%;
top: 18%;
aspect-ratio: auto;
border-radius: var(--radius-lg);
transform: rotate(4deg);
} .hero-v2__note {
left: 5%;
bottom: 4%;
} .btn-primary {
min-width: 230px;
}
.btn-secondary {
min-width: 140px;
} @media (max-width: 1100px) {
.hero-v2__title {
font-size: clamp(68px, 7.5vw, 98px);
}
.hero-v2__visual {
transform: none;
}
} @media (max-width: 760px) {
.hero-v2__title {
font-size: clamp(58px, 16vw, 82px);
}
.hero-v2__actions {
flex-direction: column;
width: 100%;
}
.btn-primary,
.btn-secondary {
width: 100%;
}
} .hero-v2__visual {
isolation: isolate;
} .web-preview--desktop {
position: relative;
z-index: 3;
width: min(108%, 660px);
background: var(--paper);
color: var(--ink);
border-radius: 14px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.18),
0 42px 100px rgba(0, 0, 0, 0.28);
overflow: hidden;
transform: translateX(-1%) rotate(-0.7deg);
transition:
transform var(--speed-ui) var(--ease-urbz),
box-shadow var(--speed-ui) var(--ease-urbz);
}
.hero-v2__visual:hover .web-preview--desktop {
transform:
translateX(-1%)
translateY(-5px)
rotate(-0.3deg);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.22),
0 52px 120px rgba(0, 0, 0, 0.34);
}
.web-preview__bar {
min-height: 38px;
display: flex;
align-items: center;
padding: 0 14px;
border-bottom: 1px solid rgba(12, 13, 14, 0.10);
color: rgba(12, 13, 14, 0.45);
font-size: 9px;
}
.web-preview__dots {
display: flex;
gap: 5px;
margin-right: auto;
}
.web-preview__dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(12, 13, 14, 0.22);
} .demo-site {
min-height: 430px;
display: flex;
flex-direction: column;
}
.demo-site__nav {
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
border-bottom: 1px solid rgba(12, 13, 14, 0.09);
}
.demo-site__nav strong {
font-family: var(--font-body);
font-size: 18px;
}
.demo-site__nav div {
display: flex;
gap: 22px;
font-size: 10px;
color: rgba(12, 13, 14, 0.55);
}
.demo-site__hero {
flex: 1;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
min-height: 320px;
}
.demo-site__copy {
padding:
42px
26px
34px;
display: flex;
flex-direction: column;
}
.demo-site__copy > .meta {
color: rgba(12, 13, 14, 0.45);
}
.demo-site__copy h3 {
margin:
auto
0
18px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(46px, 4.2vw, 68px);
line-height: 0.88;
text-transform: uppercase;
}
.demo-site__copy h3 em {
color: var(--orange);
font-style: normal;
}
.demo-site__copy p {
margin: 0 0 24px;
max-width: 240px;
font-size: 11px;
line-height: 1.5;
color: rgba(12, 13, 14, 0.62);
}
.demo-site__cta {
width: fit-content;
padding-bottom: 4px;
border-bottom: 1px solid rgba(12, 13, 14, 0.28);
font-size: 10px;
} .demo-site__image {
position: relative;
overflow: hidden;
background:
linear-gradient(
145deg,
var(--petrol) 0%,
#1b4b52 42%,
#091011 100%
);
}
.demo-site__shape {
position: absolute;
inset:
18%
-12%
-18%
18%;
background:
linear-gradient(
135deg,
#34474b,
#142326 65%
);
clip-path: polygon(
0 28%,
58% 0,
100% 17%,
100% 100%,
0 100%
);
box-shadow:
-26px 24px 60px rgba(0, 0, 0, 0.28);
}
.demo-site__image::after {
content: "";
position: absolute;
width: 38%;
height: 54%;
right: 12%;
bottom: 0;
background: var(--orange);
opacity: 0.86;
clip-path: polygon(
12% 0,
100% 14%,
100% 100%,
0 100%
);
}
.demo-site__image > span {
position: absolute;
right: 18px;
bottom: 14px;
z-index: 2;
color: rgba(240, 236, 228, 0.68);
font-size: 9px;
}
.demo-site__footer {
min-height: 42px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(12, 13, 14, 0.09);
font-size: 9px;
color: rgba(12, 13, 14, 0.5);
} .web-preview--mobile {
position: absolute;
z-index: 5;
width: 180px;
min-height: 350px;
right: -2%;
bottom: 4%;
padding: 14px;
display: flex;
flex-direction: column;
background: var(--petrol);
color: var(--paper);
border-radius: 18px;
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.28),
0 42px 90px rgba(0, 0, 0, 0.34);
transform: rotate(2.3deg);
transition:
transform var(--speed-ui) var(--ease-urbz);
}
.hero-v2__visual:hover .web-preview--mobile {
transform:
translateY(-8px)
rotate(1.4deg);
}
.mobile-demo__top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(240, 236, 228, 0.16);
font-size: 11px;
}
.mobile-demo__visual {
position: relative;
height: 135px;
margin-top: 16px;
overflow: hidden;
border-radius: 8px;
background:
linear-gradient(
145deg,
#335157,
#0c1719
);
}
.mobile-demo__visual::after {
content: "";
position: absolute;
width: 58%;
height: 86%;
right: -8%;
bottom: -12%;
background: var(--orange);
transform: rotate(11deg);
}
.mobile-demo__content {
margin-top: auto;
padding-top: 22px;
}
.mobile-demo__content > .meta {
color: rgba(240, 236, 228, 0.48);
}
.mobile-demo__content h4 {
margin:
14px
0
18px;
font-family: var(--font-display);
font-weight: 600;
font-size: 32px;
line-height: 0.9;
text-transform: uppercase;
}
.mobile-demo__content h4 em {
color: var(--orange);
font-style: normal;
}
.mobile-demo__link {
font-size: 9px;
color: rgba(240, 236, 228, 0.72);
} .hero-v2__signal {
z-index: 1;
width: 46%;
height: 64%;
right: -13%;
top: 16%;
background: var(--orange);
opacity: 0.92;
border-radius: 18px;
transform: rotate(4deg);
} @media (max-width: 760px) {
.web-preview--desktop {
width: 94%;
}
.demo-site__hero {
grid-template-columns: 1fr;
}
.demo-site__image {
min-height: 180px;
}
.demo-site__nav div {
display: none;
}
.web-preview--mobile {
width: 142px;
min-height: 275px;
right: 0;
bottom: 1%;
}
.mobile-demo__visual {
height: 92px;
}
.mobile-demo__content h4 {
font-size: 25px;
}
} .hero-v2__visual {
position: relative;
isolation: isolate;
} .hero-v2__signal {
position: absolute;
z-index: 0;
width: 300px;
height: 390px;
right: -55px;
top: 110px;
background: var(--orange);
border-radius: 14px;
opacity: 1;
transform: rotate(4deg);
pointer-events: none;
} .web-preview--desktop {
position: relative;
z-index: 2;
} .web-preview--mobile {
position: absolute;
z-index: 4;
right: -20px;
bottom: 45px;
} .hero-v2__note {
z-index: 3;
} .hero-v2__title {
font-family: "PP Neue Montreal", sans-serif;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 0.94;
} .hero-v2 {
position: relative;
background:
radial-gradient(
circle at 72% 34%,
rgba(18, 55, 61, 0.30),
transparent 38%
),
radial-gradient(
circle at 18% 78%,
rgba(143, 163, 173, 0.06),
transparent 32%
),
linear-gradient(
135deg,
#121516 0%,
#0f1213 52%,
#101719 100%
);
overflow: hidden;
} .hero-v2::before {
content: "";
position: absolute;
inset: -20%;
pointer-events: none;
background:
radial-gradient(
circle at 65% 40%,
rgba(18, 55, 61, 0.18),
transparent 30%
),
radial-gradient(
circle at 35% 65%,
rgba(255, 74, 47, 0.035),
transparent 24%
);
filter: blur(40px);
animation: heroAmbient 20s ease-in-out infinite alternate;
} .hero-v2::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
background-image:
repeating-radial-gradient(
circle at 0 0,
rgba(255,255,255,0.35) 0,
rgba(255,255,255,0.35) 0.5px,
transparent 0.7px,
transparent 3px
);
background-size: 7px 7px;
} .hero-v2__grid,
.hero-v2__footer {
position: relative;
z-index: 2;
}
@keyframes heroAmbient {
0% {
transform: translate3d(-2%, -1%, 0) scale(1);
}
50% {
transform: translate3d(2%, 1%, 0) scale(1.04);
}
100% {
transform: translate3d(1%, -2%, 0) scale(1.02);
}
} @media (prefers-reduced-motion: reduce) {
.hero-v2::before {
animation: none;
}
} .site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding:
24px
var(--page-margin);
transition:
padding 500ms var(--ease-urbz),
background 500ms var(--ease-urbz),
backdrop-filter 500ms var(--ease-urbz),
border-color 500ms var(--ease-urbz);
} body.admin-bar .site-header {
top: 32px;
}
.site-header__inner {
position: relative;
width: min(100%, var(--content-max));
height: 54px;
margin-inline: auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
transition:
height 500ms var(--ease-urbz);
} .site-header__logo {
grid-column: 2;
width: 112px;
display: block;
position: relative;
z-index: 4;
transition:
transform 600ms var(--ease-urbz),
width 500ms var(--ease-urbz);
}
.site-header__logo img {
display: block;
width: 100%;
height: auto;
} .site-header__nav {
display: flex;
align-items: center;
gap: 28px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
}
.site-header__nav--left {
justify-self: start;
}
.site-header__nav--right {
justify-self: end;
}
.site-header__nav a {
position: relative;
color: var(--paper);
text-decoration: none;
opacity: 0.76;
transition:
opacity 180ms ease,
transform 180ms ease;
}
.site-header__nav > a:not(.site-header__cta)::after {
content: "";
position: absolute;
width: 5px;
height: 5px;
left: 50%;
bottom: -10px;
border-radius: 50%;
background: var(--orange);
opacity: 0;
transform:
translateX(-50%)
translateY(4px);
transition:
opacity 180ms ease,
transform 180ms ease;
}
.site-header__nav > a:not(.site-header__cta):hover {
opacity: 1;
transform: translateY(-1px);
}
.site-header__nav > a:not(.site-header__cta):hover::after {
opacity: 1;
transform:
translateX(-50%)
translateY(0);
} .site-header__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid rgba(240, 236, 228, 0.18);
border-radius: 10px;
opacity: 1 !important;
transition:
background 180ms ease,
border-color 180ms ease,
transform 180ms ease !important;
}
.site-header__cta span {
color: var(--orange);
transition:
transform 180ms ease;
}
.site-header__cta:hover {
background: rgba(240, 236, 228, 0.06);
border-color: rgba(240, 236, 228, 0.34);
transform: translateY(-1px);
}
.site-header__cta:hover span {
transform: translate(2px, -2px);
} .site-header.is-scrolled {
padding-top: 12px;
padding-bottom: 12px;
background: rgba(15, 18, 19, 0.76);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom:
1px solid rgba(240, 236, 228, 0.07);
}
.site-header.is-scrolled .site-header__inner {
height: 42px;
grid-template-columns:
auto
1fr;
} .site-header.is-scrolled .site-header__logo {
grid-column: 1;
grid-row: 1;
width: 84px;
justify-self: start;
} .site-header.is-scrolled .site-header__nav--left {
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-right: 300px;
}
.site-header.is-scrolled .site-header__nav--right {
grid-column: 2;
grid-row: 1;
justify-self: end;
} @media (max-width: 900px) {
.site-header {
padding:
18px
22px;
}
.site-header__inner {
display: flex;
justify-content: space-between;
}
.site-header__logo {
width: 88px;
}
.site-header__nav--left,
.site-header__nav--right > a:not(.site-header__cta) {
display: none;
}
.site-header__nav--right {
margin-left: auto;
}
.site-header.is-scrolled .site-header__nav--left {
display: none;
}
.site-header.is-scrolled .site-header__logo {
width: 76px;
}
}
@media (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
} .site-header__inner {
position: relative;
display: flex;
align-items: center;
width: min(100%, var(--content-max));
height: 54px;
margin-inline: auto;
} .site-header__nav--left {
margin-right: auto;
transition:
margin-left 700ms var(--ease-urbz);
} .site-header__nav--right {
margin-left: auto;
} .site-header__logo {
position: absolute;
left: 50%;
top: 50%;
width: 112px;
transform:
translate(-50%, -50%);
transition:
left 700ms var(--ease-urbz),
transform 700ms var(--ease-urbz),
width 500ms var(--ease-urbz);
} .site-header.is-scrolled .site-header__inner {
display: flex;
align-items: center;
height: 42px;
} .site-header.is-scrolled .site-header__logo {
left: 0;
width: 84px;
transform:
translate(0, -50%);
} .site-header.is-scrolled .site-header__nav--left {
margin-left: 115px;
margin-right: auto;
} .site-header.is-scrolled .site-header__nav--right {
margin-left: auto;
} @media (min-width: 901px) {
.site-header__inner {
position: relative;
display: flex;
align-items: center;
width: min(100%, var(--content-max));
height: 54px;
margin-inline: auto;
}
.site-header__nav--right {
margin-left: auto;
}
.site-header__logo {
position: absolute;
left: 50%;
top: 50%;
width: 112px;
transform: translate(-50%, -50%);
transition:
left 700ms var(--ease-urbz),
transform 700ms var(--ease-urbz),
width 500ms var(--ease-urbz);
}
.site-header.is-scrolled .site-header__inner {
height: 42px;
}
.site-header.is-scrolled .site-header__logo {
left: 0;
width: 84px;
transform: translate(0, -50%);
}
} .hero-v2__copy {
padding-block: clamp(32px, 4vh, 56px) 88px;
}
.hero-v2__kicker {
margin-bottom: 28px;
}
.hero-v2__title {
font-size: clamp(64px, 6.25vw, 112px);
line-height: 0.99;
letter-spacing: -0.035em;
text-wrap: balance;
}
.hero-v2__bottom {
margin-top: clamp(32px, 3vw, 44px);
gap: 28px;
}
.hero-v2__description {
line-height: 1.55;
text-wrap: pretty;
}
.hero-v2__actions {
gap: 24px;
margin-top: 0;
flex-wrap: wrap;
}
.hero-v2__actions .btn-secondary {
position: relative;
width: auto;
min-width: 0;
min-height: 44px;
padding: 10px 0;
gap: 18px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: rgba(240, 236, 228, 0.8);
letter-spacing: 0.015em;
transform: none;
}
.hero-v2__actions .btn-secondary::after {
content: "";
position: absolute;
inset: auto 0 5px;
height: 1px;
background: currentColor;
opacity: 0.3;
transition: opacity 180ms ease;
}
.hero-v2__actions .btn-secondary:hover,
.hero-v2__actions .btn-secondary:focus-visible {
color: var(--paper);
}
.hero-v2__actions .btn-secondary:hover::after {
opacity: 0.8;
}
.hero-v2__actions .btn-secondary:hover .btn-arrow {
transform: translateY(3px);
}
.hero-v2__actions a:focus-visible {
outline: 2px solid var(--paper);
outline-offset: 5px;
}
.hero-v2__footer {
margin-top: 12px;
padding-bottom: 4px;
}
@media (min-width: 761px) and (max-width: 1100px) {
.hero-v2__title {
font-size: clamp(52px, 6.1vw, 68px);
}
}
@media (max-width: 760px) {
.hero-v2__meta {
margin-bottom: 40px;
}
.hero-v2__copy {
padding-block: 0;
}
.hero-v2__title {
font-size: clamp(42px, 11.8vw, 82px);
line-height: 1.02;
letter-spacing: -0.03em;
}
.hero-v2__actions {
align-items: flex-start;
gap: 12px;
}
.hero-v2__footer {
margin-top: 28px;
padding-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-v2__actions .btn-secondary .btn-arrow {
transition: none;
}
} .hero-v2 {
padding-top: 128px;
padding-bottom: 32px;
}
.hero-v2__grid {
min-height: 0;
row-gap: 0;
}
.hero-v2__meta {
padding-bottom: 18px;
font-size: 10px;
letter-spacing: .09em;
}
.hero-v2__copy {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0 24px;
padding: 56px 0 64px;
align-items: end;
}
.hero-v2__kicker {
grid-column: 1 / -1;
margin: 0 0 28px;
font-size: 10px;
}
.hero-v2__title {
grid-column: 1 / span 8;
max-width: none;
font-size: clamp(64px, 7.8vw, 136px);
line-height: .98;
letter-spacing: -.045em;
}
.hero-v2__title em { color: inherit; }
.hero-v2__bottom {
grid-column: 10 / -1;
margin: 0 0 5px;
gap: 26px;
}
.hero-v2__description {
font-size: 14px;
line-height: 1.65;
max-width: 290px;
}
.hero-v2__actions {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.hero-v2__actions .btn-primary {
min-width: 0;
min-height: 44px;
padding: 0;
background: transparent;
box-shadow: none;
color: var(--paper);
border-radius: 0;
gap: 20px;
}
.hero-v2__actions .btn-primary .btn-arrow {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255,74,47,.65);
border-radius: 50%;
color: var(--orange);
}
.hero-v2__actions .btn-primary:hover { transform: none; color: var(--orange); }
.hero-v2__actions .btn-secondary { font-size: 11px; min-height: 36px; }
.studio-work-label {
grid-column: 1 / span 2;
align-self: start;
padding-top: 18px;
border-top: 1px solid rgba(240,236,228,.18);
color: var(--steel);
font-size: 10px;
line-height: 1.7;
}
.studio-work-label strong {
display: block;
margin: 14px 0 8px;
font-family: "PP Neue Montreal", sans-serif;
font-weight: 500;
font-size: 26px;
text-transform: none;
letter-spacing: -.02em;
color: var(--paper);
}
.studio-work-label span { display: block; }
.studio-work-label .studio-work-index { color: var(--orange); }
.hero-v2__visual {
scroll-margin-top: 110px;
grid-column: 3 / -1;
min-height: 0;
padding: 0 62px 66px 0;
display: block;
transform: none;
margin: 0;
}
.hero-v2__visual .web-preview--desktop,
.hero-v2__visual:hover .web-preview--desktop {
width: 100%;
transform: none;
border-radius: 5px;
box-shadow: 0 16px 48px rgba(0,0,0,.16);
}
.hero-v2__visual .web-preview--mobile,
.hero-v2__visual:hover .web-preview--mobile {
width: clamp(142px, 19%, 190px);
right: 0;
bottom: 36px;
transform: none;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,.24);
}
.hero-v2__signal { display: none; }
.hero-v2__note {
left: 0;
bottom: 10px;
font-size: 9px;
line-height: 1.5;
color: var(--steel);
}
.hero-v2__footer {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid rgba(240,236,228,.15);
font-size: 10px;
}
@media (max-width: 1100px) and (min-width: 761px) {
.hero-v2__title { font-size: 7.3vw; grid-column: 1 / span 8; }
.hero-v2__bottom { grid-column: 9 / -1; }
.hero-v2__description { font-size: 13px; }
.hero-v2__visual { grid-column: 3 / -1; }
}
@media (max-width: 760px) {
.hero-v2 { padding-top: 100px; }
.hero-v2__meta { margin-bottom: 0; }
.hero-v2__copy { display: block; padding: 40px 0; }
.hero-v2__kicker { margin-bottom: 22px; }
.hero-v2__title { font-size: clamp(42px, 10vw, 76px); line-height: 1.02; letter-spacing: -.035em; }
.hero-v2__bottom { margin-top: 30px; gap: 20px; }
.hero-v2__description { max-width: 360px; font-size: 14px; }
.hero-v2__actions { flex-direction: row; align-items: center; gap: 12px 24px; }
.hero-v2__actions .btn-primary { width: auto; }
.studio-work-label { padding-top: 14px; margin-bottom: 20px; }
.studio-work-label strong { display: inline; margin-right: 12px; font-size: 22px; }
.studio-work-label span { display: inline; margin-right: 8px; }
.studio-work-label .studio-work-index { display: block; margin-bottom: 8px; }
.hero-v2__visual { min-height: 0; padding: 0 20px 65px 0; }
.hero-v2__visual .web-preview--desktop { width: 100%; }
.hero-v2__visual .web-preview--mobile { width: 130px; right: 0; bottom: 0; }
.hero-v2__footer { margin-top: 28px; }
} .hero-v2--glass {
isolation: isolate;
min-height: max(760px, 100svh);
display: flex;
flex-direction: column;
background: #0c1011;
}
.hero-v2--glass::before { display: none; }
.hero-v2--glass::after { opacity: .018; z-index: 1; }
.hero-glass {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hero-glass {
background: radial-gradient(ellipse at 72% 30%, #173a3f, transparent 60%), #080e10;
}
.hero-glass canvas { display: block; width: 100%; height: 100%; }
.hero-glass::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,10,11,.12), transparent 38%, rgba(6,10,11,.64)), linear-gradient(90deg, rgba(6,10,11,.3), transparent 55%);
}
.hero-motion-toggle[hidden] { display: none; }
.hero-v2--glass .hero-v2__grid {
display: flex;
flex: 1;
flex-direction: column;
width: min(100%, var(--content-max));
}
.hero-v2--glass .hero-v2__meta { border-color: rgba(240,236,228,.18); }
.hero-v2--glass .hero-v2__copy {
width: 100%;
margin-top: auto;
padding-top: 120px;
padding-bottom: 56px;
}
.hero-v2--glass .hero-v2__title {
font-size: clamp(64px,7.8vw,136px);
text-shadow: 0 2px 28px rgba(0,0,0,.16);
}
.hero-v2--glass .hero-v2__description { color: rgba(240,236,228,.88); }
.hero-v2--glass .hero-v2__footer { margin-top: 0; }
.hero-motion-toggle {
font: inherit;
text-transform: none;
letter-spacing: .02em;
color: var(--paper);
border: 1px solid rgba(240,236,228,.28);
border-radius: 20px;
padding: 10px 15px;
min-height: 40px;
background: rgba(12,16,17,.32);
cursor: pointer;
}
.hero-motion-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.hero-motion-toggle:hover { background: rgba(240,236,228,.1); }
.hero-v2--glass[data-motion-paused="true"] .hero-glass img,
.hero-v2--glass[data-motion-paused="true"] .hero-glass__light { animation-play-state: paused; }
.hero-v2--glass[data-motion-visible="false"] .hero-glass img,
.hero-v2--glass[data-motion-visible="false"] .hero-glass__light { animation-play-state: paused; }
.studio-showcase {
padding: 88px var(--page-margin) 72px;
background: #111617;
color: var(--paper);
scroll-margin-top: 78px;
}
.studio-showcase__inner { width: min(100%,var(--content-max)); margin-inline: auto; }
.studio-showcase__heading {
font-family: "PP Neue Montreal", sans-serif;
font-size: clamp(36px,4vw,60px);
font-weight: 500;
letter-spacing: -.035em;
line-height: 1.08;
margin: 0 0 48px;
}
.studio-showcase__grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; }
@media (max-width:1100px) and (min-width:761px) {
.hero-v2--glass .hero-v2__title { font-size: 7.3vw; }
}
@media (max-width:760px) {
.hero-v2--glass { min-height: max(740px,100svh); }
.hero-glass::after { background: linear-gradient(180deg,rgba(6,10,11,.2),rgba(6,10,11,.18) 30%,rgba(6,10,11,.88) 75%); }
.hero-v2--glass .hero-v2__copy { padding: 120px 0 32px; }
.hero-v2--glass .hero-v2__title { font-size: clamp(42px,10vw,76px); }
.hero-v2--glass .hero-v2__bottom { margin-top: 24px; }
.hero-v2--glass .hero-v2__footer { gap: 12px; flex-wrap: wrap; }
.hero-v2--glass .hero-v2__scroll { display: none; }
.studio-showcase { padding: 56px 20px; }
.studio-showcase__heading { margin-bottom: 32px; }
.studio-showcase__grid { display: block; }
}
@media (prefers-reduced-motion:reduce) {
.hero-glass img,.hero-glass__light { animation: none; }
.hero-motion-toggle { display: none; }
} .hero-glass::after { background: linear-gradient(180deg,rgba(5,10,11,.18),transparent 30%,rgba(5,10,11,.12) 50%,rgba(5,10,11,.77)),linear-gradient(90deg,rgba(5,10,11,.44),transparent 65%); } .hero-v2--glass .hero-v2__copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;margin-top:0;padding:40px 0 100px;gap:0}
.hero-v2--glass .hero-v2__kicker{margin:0 0 26px}
.hero-v2--glass .hero-v2__title{font-size:clamp(58px,6.5vw,112px);line-height:1.01;letter-spacing:-.04em;margin:0}
.hero-v2--glass .hero-v2__bottom{display:flex;flex-direction:column;align-items:flex-start;margin:28px 0 0;gap:26px}
.hero-v2--glass .hero-v2__description{max-width:340px;margin:0;font-size:14px;line-height:1.65;color:#d2d4d0}
.hero-v2--glass .hero-v2__actions{margin:0;gap:0}
.hero-v2--glass .contact-button{text-decoration:none;font-family:inherit}
.hero-v2--glass .hero-motion-toggle{border:0;border-bottom:1px solid #f0ece433;border-radius:0;background:transparent;padding:10px 2px}
@media(max-width:760px){.hero-v2--glass .hero-v2__copy{padding:64px 0 48px}.hero-v2--glass .hero-v2__title{font-size:clamp(40px,10vw,76px)}.hero-v2--glass .hero-v2__description{font-size:13px}.hero-v2--glass .hero-v2__bottom{margin-top:24px}}
.hero-v2--glass .contact-button{
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
min-height:54px;padding:17px 28px 17px 47px;gap:0;
border:0;border-radius:999px;
background:#12373d;color:#f0ece4;
font-size:13px;line-height:1.3;letter-spacing:.015em;
box-shadow:0 6px 16px #00000030,0 18px 40px #00000026;
transition:color 180ms ease,box-shadow 300ms ease,transform 300ms ease;
}
.hero-v2--glass .contact-button::before{
content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
background:#ff4a2f;
clip-path:circle(4px at 25px 50%);
transition:clip-path 520ms cubic-bezier(.22,1,.36,1);
}
.hero-v2--glass .contact-button:hover,
.hero-v2--glass .contact-button:focus-visible{background:#12373d;color:#0c0d0e;transform:translateY(-2px);box-shadow:0 8px 20px #00000038,0 22px 46px #00000030}
.hero-v2--glass .contact-button:hover::before,
.hero-v2--glass .contact-button:focus-visible::before{clip-path:circle(120% at 25px 50%)}
.hero-v2--glass .contact-button:focus-visible{outline:2px solid #ff4a2f;outline-offset:5px}
.hero-v2--glass .contact-button:active::before{background:#ed432a}
@media(prefers-reduced-motion:reduce){.hero-v2--glass .contact-button,.hero-v2--glass .contact-button::before{transition:none}} .concept-section{position:relative;z-index:2;margin-top:-24px;border-radius:32px 32px 0 0;background:#f0ece4;color:#12373d;padding:38px var(--page-margin) 32px;overflow:hidden}
.concept-inner{max-width:var(--content-max);margin:auto}
.concept-top,.concept-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.06em}
.concept-top{padding-bottom:26px;border-bottom:1px solid #12373d25}.concept-tag{letter-spacing:0;text-transform:none}
.concept-layout{display:grid;grid-template-columns: .85fr 1.65fr;gap:5%;align-items:center;padding:84px 0 72px}
.concept-copy h2{font:500 clamp(38px,3.8vw,64px)/1.04 "PP Neue Montreal",sans-serif;letter-spacing:-.045em;margin:0 0 30px}.concept-copy h2 span{color:#12373d99}
.concept-copy>p{font-size:14px;line-height:1.75;max-width:355px;margin:0 0 18px;color:#29484b}
.concept-note{display:flex;gap:12px;margin-top:38px}.concept-dot{width:7px;height:7px;border-radius:50%;background:#ff4a2f;margin-top:6px;flex:none}.concept-note strong{display:block;font-size:11px;font-weight:400}.concept-note small{display:block;font-size:10px;line-height:1.65;color:#536567;margin-top:7px}
.device-scene{position:relative;margin:0;padding:26px 55px 62px 0;min-width:0;container-type:inline-size}.concept-laptop{position:relative;width:94%;margin-top:12px}.laptop-lid{position:relative;background:#111315;padding:13px 8px 10px;border-radius:16px 16px 5px 5px;border:2px solid #575958;box-shadow:0 25px 35px #12373d25}.laptop-camera{position:absolute;top:4px;left:50%;width:4px;height:4px;background:#343d40;border-radius:50%}.laptop-base{height:13px;background:linear-gradient(#a8aaa8,#d5d5d1 30%,#7e827f);margin:0 -5%;border-radius:2px 2px 50% 50%;position:relative}.laptop-base:before{content:"";position:absolute;top:0;left:40%;width:20%;height:4px;border-radius:0 0 7px 7px;background:#747876}
.barber-demo{position:relative;aspect-ratio:1.58;background:#161918;color:#ede6d9;overflow:hidden;font-family:"PP Neue Montreal",sans-serif}.barber-demo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#121715f5 5%,#121715b8 42%,#12171515 100%),url(//urbz.ee/wp-content/themes/URBZ/assets/images/barber-concept-v2.jpg) center 55%/cover;filter:saturate(.45)}
.barber-nav,.barber-content,.barber-bottom{position:relative;z-index:1}.barber-nav{display:flex;align-items:center;justify-content:space-between;padding:4% 5%;font-size:1.15cqw;border-bottom:1px solid #ede6d920}.barber-nav strong{font-size:3cqw;letter-spacing:-.06em}.barber-nav strong span{font-size:1cqw;vertical-align:top;margin-left:3px}.barber-book{padding:6px 9px;border:1px solid #ede6d960;border-radius:2px}.barber-content{padding:6% 6% 8%}.barber-eyebrow{font-size:1cqw;letter-spacing:.12em;color:#c9aa84}.barber-content h3{font-size:6.4cqw;line-height:.98;letter-spacing:-.045em;font-weight:500;color:#ede6d9;margin:4% 0}.barber-content p{font-size:1.4cqw;line-height:1.5;margin:0 0 5%;color:#d5cfc3}.barber-cta{display:inline-flex;gap:18px;align-items:center;font-size:1.3cqw;border-bottom:1px solid #c9aa8480;padding-bottom:7px}.barber-cta i{width:5px;height:5px;background:#c9aa84;border-radius:50%;animation:barber-breathe 4s ease-in-out infinite}.barber-bottom{display:flex;justify-content:space-between;font-size:.85cqw;letter-spacing:.1em;padding:0 6% 4%;color:#c9bca9}
.concept-phone{position:absolute;right:0;bottom:52px;width:24%;padding:6px;background:#111;border:2px solid #666b68;border-radius:29px;box-shadow:0 18px 32px #12373d30}.concept-phone .barber-demo{aspect-ratio: .47;border-radius:21px}.phone-island{position:absolute;top:11px;left:32%;width:36%;height:12px;background:#080909;border-radius:12px;z-index:4}.phone-home{position:absolute;bottom:12px;left:33%;width:34%;height:3px;border-radius:4px;background:#ede6d9;z-index:4}.concept-phone .barber-nav{padding:28px 10px 12px}.concept-phone .barber-nav strong{font-size:2.8cqw}.concept-phone .barber-menu{display:none}.concept-phone .barber-book{font-size:1cqw;padding:3px}.concept-phone .barber-demo:before{background:linear-gradient(0deg,#121715e6,transparent 80%),url(//urbz.ee/wp-content/themes/URBZ/assets/images/barber-concept-v2.jpg) 62% center/cover}.concept-phone .barber-content{padding:48% 8% 8%}.concept-phone .barber-content h3{font-size:4cqw;margin:12% 0}.concept-phone .barber-content p{font-size:1.3cqw}.concept-phone .barber-eyebrow{font-size:.85cqw}.concept-phone .barber-cta{font-size:1.2cqw;margin-top:10%}.concept-phone .barber-bottom{display:none}.device-scene figcaption{text-align:center;font-size:10px;color:#536567;margin-top:30px}
.concept-foot{border-top:1px solid #12373d25;padding-top:24px}.concept-motion{font:inherit;color:inherit;border:0;border-bottom:1px solid #12373d50;background:none;padding:8px 0;cursor:pointer}.concept-motion:focus-visible{outline:2px solid #ff4a2f;outline-offset:5px}.concept-section[data-paused="true"] .barber-cta i{animation-play-state:paused}@keyframes barber-breathe{50%{opacity:.35;box-shadow:0 0 0 4px #c9aa8418}}
@media(max-width:1000px){.concept-layout{grid-template-columns:1fr;padding-top:52px;gap:35px}.concept-copy{max-width:600px}.concept-copy>p{max-width:500px}.concept-note{margin-top:24px}.device-scene{max-width:800px;width:100%;margin:auto}.concept-copy h2{font-size:52px}}
@media(max-width:600px){.concept-section{border-radius:24px 24px 0 0;padding:28px 20px}.concept-layout{padding:40px 0 28px}.concept-copy h2{font-size:42px}.concept-copy>p{font-size:13px}.device-scene{padding:12px 20px 40px 0}.concept-phone{border-radius:18px;padding:3px;bottom:48px}.concept-phone .barber-demo{border-radius:13px}.phone-island{height:6px;top:7px}.concept-phone .barber-nav{padding:16px 5px 7px}.laptop-lid{padding:8px 4px 5px;border-radius:9px 9px 3px 3px}.laptop-base{height:8px}.concept-foot>span:last-child{display:none}.concept-foot,.concept-top{font-size:8px}.concept-phone .barber-book{display:none}}
@media(prefers-reduced-motion:reduce){.barber-cta i{animation:none}.concept-motion{display:none}}
.barber-demo:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 10%,#dec5a333,transparent 65%);animation:barber-light 7s ease-in-out infinite alternate}.concept-section[data-paused='true'] .barber-demo:after{animation-play-state:paused}@keyframes barber-light{from{opacity:.15}to{opacity:.65}}@media(prefers-reduced-motion:reduce){.barber-demo:after{animation:none}} .concept-copy h2{font-size:clamp(44px,4.1vw,70px);line-height:.99;letter-spacing:-.055em}.concept-copy h2 span{color:#12373d}.concept-copy h2:after{content:"";display:block;width:38px;height:5px;background:#ff4a2f;margin-top:26px;border-radius:3px}
.device-scene{isolation:isolate}.device-scene:before{content:"";position:absolute;z-index:-1;inset:7% -6% 0 -7%;background:radial-gradient(ellipse at 50% 60%,#28697538,transparent 68%);filter:blur(25px);pointer-events:none}
.concept-phone{box-shadow:0 18px 32px #12373d30,0 0 45px #28697525}.laptop-lid{box-shadow:0 25px 35px #12373d25,0 0 55px #28697520}
.barber-demo{background:#292721;font-family:Arial,sans-serif;isolation:isolate;display:flex;flex-direction:column;aspect-ratio:1.58}
.barber-demo:before,.barber-demo:after{display:none}.barber-photo{position:absolute;z-index:-1;inset:0 0 0 46%;background:linear-gradient(90deg,#292721 0%,#29272120 30%,#29272120),url(//urbz.ee/wp-content/themes/URBZ/assets/images/barber-concept-v2.jpg) 35% center/cover;filter:sepia(.4) saturate(.65);opacity:.8}
.barber-nav{padding:3% 5%;border-bottom:1px solid #e6d8bb25;min-height:0;background:#292721e8;gap:12px;font-size:1.12cqw}.barber-nav strong{font:italic 600 4.5cqw/.8 Georgia,serif;letter-spacing:-.08em;color:#eadcc1}.barber-nav strong span{display:block;font:normal 600 .65cqw/1 Arial,sans-serif;letter-spacing:.2em;margin:9px 0 0 3px;color:#bdad91}.barber-book{border:0;background:#d4bb8e;color:#292721;padding:8px 12px;border-radius:0;font-size:1cqw}.barber-hamburger{display:none}
.barber-content{padding:6% 5% 5%;flex:1}.barber-eyebrow{font:500 .95cqw/1.2 Arial,sans-serif;letter-spacing:.18em;color:#c9b393}.barber-content h3{font:normal 4.8cqw/1.1 Georgia,serif;letter-spacing:-.055em;text-transform:none;margin:4% 0;color:#f1e7d2}.barber-content h3 em{font-weight:400;color:#d0b98f}.barber-content p{font:normal 1.2cqw/1.6 Arial,sans-serif;margin:0 0 4%;color:#d1c5ae}.barber-cta{font:500 1.05cqw/1.3 Arial,sans-serif;display:inline-flex;align-items:center;gap:22px;background:#d4bb8e;color:#292721;border:0;padding:10px 15px}.barber-cta span{font-size:1.5cqw}.barber-bottom{flex:none;padding:3% 5%;border-top:1px solid #e6d8bb25;font:normal .72cqw/1 Arial,sans-serif;letter-spacing:.12em;align-items:center;background:#292721}
.barber-pole{width:9%;height:7px;border-radius:2px;background:repeating-linear-gradient(120deg,#cfb58a 0 6px,#4b493d 6px 12px);background-size:28px 100%;animation:barber-stripes 2s linear infinite}
@keyframes barber-stripes{to{background-position:28px 0}}
.concept-phone .barber-demo{display:flex;aspect-ratio:.47}.concept-phone .barber-nav{padding:25px 10px 12px;gap:8px;background:#292721;align-items:center;flex:none}.concept-phone .barber-nav strong{font:italic 600 3.7cqw/.85 Georgia,serif;letter-spacing:-.08em}.concept-phone .barber-nav strong span{font:normal 600 .62cqw/1 Arial,sans-serif;letter-spacing:.13em;margin:5px 0 0 1px}.concept-phone .barber-menu,.concept-phone .barber-book{display:none}.concept-phone .barber-hamburger{display:flex;width:13px;gap:4px;flex-direction:column}.barber-hamburger i{height:1px;width:100%;background:#eadcc1}
.concept-phone .barber-photo{inset:22% 0 0;background:linear-gradient(0deg,#292721 3%,#292721f2 38%,#29272138 82%),url(//urbz.ee/wp-content/themes/URBZ/assets/images/barber-concept-v2.jpg) 25% top/cover;opacity:.8}
.concept-phone .barber-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16% 9% 12%;min-height:0}.concept-phone .barber-eyebrow{font:500 .8cqw/1.2 Arial,sans-serif;letter-spacing:.1em}.concept-phone .barber-content h3{font:normal 2.7cqw/1.15 Georgia,serif;letter-spacing:-.06em;margin:10% 0}.concept-phone .barber-content p{font:normal 1cqw/1.55 Arial,sans-serif;margin:0 0 12%}.concept-phone .barber-cta{font:500 .95cqw/1.2 Arial,sans-serif;margin:0;padding:7px 8px;gap:12px}.concept-phone .barber-bottom{display:flex;justify-content:center;padding:0 10% 15%;background:#292721;border:0}.concept-phone .barber-bottom>span{display:none}.concept-phone .barber-pole{width:45%;height:4px}.concept-section[data-paused="true"] .barber-pole{animation-play-state:paused}
@media(max-width:1000px){.concept-copy h2{font-size:60px}}
@media(max-width:600px){.concept-copy h2{font-size:44px}.barber-nav{gap:4px}.barber-nav strong span{margin-top:4px}.barber-book{padding:4px}.barber-cta{padding:5px 7px;gap:8px}.concept-phone .barber-nav{padding:15px 5px 7px}.concept-phone .barber-nav strong span{margin-top:3px}.concept-phone .barber-hamburger{width:7px;gap:2px}.concept-phone .barber-cta{padding:4px;gap:5px}.barber-pole{height:4px}.concept-phone .barber-pole{height:3px}}
@media(prefers-reduced-motion:reduce){.barber-pole{animation:none}} .barber-demo,.concept-phone .barber-demo{background:#202123;color:#f3f3f1}
.barber-demo:before{display:block;z-index:-1;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.28' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:140px;filter:none;opacity:.2;animation:tera-grain 1.4s steps(3) infinite}
@keyframes tera-grain{0%,100%{transform:translate(0,0)}33%{transform:translate(2%,-2%)}66%{transform:translate(-2%,1%)}}
.barber-photo{z-index:0;inset:18% 4% 10% 53%;background:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-editorial.png) center 12%/120% auto no-repeat;filter:grayscale(1);opacity:1;border-radius:2px;box-shadow:0 0 0 1px #ffffff18}
.barber-nav{background:transparent;border-color:#ffffff22;padding:3% 5%}.barber-nav strong{font:700 3.8cqw/.85 Arial,sans-serif;letter-spacing:-.085em;color:#f4f4f2}.barber-nav strong span{color:#aeb0b2;letter-spacing:.21em;font-size:.55cqw;margin-top:7px}.barber-menu{color:#c5c6c7;font-size:1cqw}.barber-book{background:none;border:1px solid #ffffff55;border-radius:30px;color:#f3f3f1;padding:7px 13px;font-size:.95cqw}
.barber-content{padding:7% 5% 6%;width:54%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.barber-eyebrow{color:#a7a9ac;font-size:.85cqw;letter-spacing:.15em}.barber-content h3{font:400 4.7cqw/1.08 Georgia,serif;letter-spacing:-.055em;color:#f5f5f2;margin:7% 0}.barber-content h3 em{color:#aeb1b5}.barber-content p{color:#bfc1c3;font-size:1.1cqw;line-height:1.6;margin-bottom:10%}.barber-cta{background:#f2f2ef;color:#242528;font-size:1.02cqw;border-radius:30px;padding:10px 17px;gap:16px}.barber-cta span{display:none}.barber-bottom{background:transparent;border-color:#ffffff22;color:#979b9f;font-size:.68cqw;padding:2.4% 5%}.barber-pole{height:2px;width:10%;border-radius:0;background:linear-gradient(90deg,#ffffff15,#e0e2e4,#ffffff15);background-size:200% 100%;animation:tera-line 3s ease-in-out infinite alternate}
@keyframes tera-line{from{background-position:0% 0}to{background-position:100% 0}}
.concept-phone .barber-nav{background:#202123;padding:27px 10px 12px;border-bottom:1px solid #ffffff22}.concept-phone .barber-nav strong{font:700 3.1cqw/.9 Arial,sans-serif;letter-spacing:-.085em;color:#f3f3f1}.concept-phone .barber-nav strong span{font-size:.53cqw;color:#aeb0b2;letter-spacing:.12em}.barber-hamburger i{background:#e1e2e2}
.concept-phone .barber-demo:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.28' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:140px;opacity:.2}
.concept-phone .barber-photo{inset:23% 8% 41%;background:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-editorial.png) center 20%/100% auto no-repeat;filter:grayscale(1);opacity:1}
.concept-phone .barber-content{width:100%;padding:0 9% 7%;justify-content:flex-end}.concept-phone .barber-eyebrow{display:none}.concept-phone .barber-content h3{font:400 2.5cqw/1.1 Georgia,serif;margin:0 0 7%;color:#f3f3f1}.concept-phone .barber-content p{font-size:.9cqw;line-height:1.5;margin-bottom:8%;color:#bfc1c3}.concept-phone .barber-cta{background:#f2f2ef;color:#242528;font-size:.85cqw;padding:6px 11px;border-radius:30px}.concept-phone .barber-bottom{background:transparent;padding:0 9% 12%}.concept-phone .barber-pole{height:1px;width:35%}
.concept-section[data-paused="true"] .barber-demo:before{animation-play-state:paused}
@media(max-width:600px){.barber-book{padding:4px 6px}.barber-cta{padding:5px 8px}.concept-phone .barber-nav{padding:15px 5px 7px}.concept-phone .barber-cta{padding:3px 6px}.barber-nav strong span{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.barber-demo:before,.barber-pole{animation:none}} .tera-stage{position:relative;container-type:inline-size;isolation:isolate;aspect-ratio:1.58;overflow:hidden;background:#d5d5d2;color:#202123;font-family:Arial,Helvetica,sans-serif}
.tera-stage:before{content:"";position:absolute;z-index:4;inset:-20%;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.4' d='M0 0h140v140H0z'/%3E%3C/svg%3E");animation:tera-grain 1.4s steps(3) infinite}
.tera-nav{position:absolute;z-index:3;top:0;left:3%;right:3%;height:8%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20212340;font-size:1.05cqw;font-weight:700;letter-spacing:-.02em}.tera-menu{display:none}
.tera-word{position:absolute;z-index:2;top:7%;left:1%;font-family:'Arial Black',Arial,sans-serif;font-size:32cqw;font-weight:900;line-height:.82;letter-spacing:-.09em;transform:scaleX(1.2);transform-origin:left top;mix-blend-mode:multiply}.tera-word>span{font:700 3cqw Arial;vertical-align:top;display:inline-block;margin-top:2%;letter-spacing:0}
.tera-photo{position:absolute;z-index:1;left:44%;right:4%;top:28%;bottom:7%;background:#777 url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-editorial.png) center 25%/110% auto no-repeat;filter:grayscale(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.tera-side{position:absolute;left:4%;top:53%;display:flex;flex-direction:column;gap:3cqw;font-size:1cqw;font-weight:700}.tera-side>span:last-child{font-size:4.4cqw;line-height:.93;font-weight:900;letter-spacing:-.055em}
.tera-caption{position:absolute;z-index:2;right:7%;bottom:16%;font-size:4.1cqw;line-height:.93;letter-spacing:-.05em;font-weight:900;color:#fff;text-shadow:0 1px 12px #0006}
.tera-book{position:absolute;left:4%;bottom:13%;display:flex;align-items:center;justify-content:space-between;width:30%;padding:1.6cqw 1.7cqw;background:#202123;color:#f4f4f1;font-size:1.25cqw;font-weight:700;border-radius:2px}.tera-book>span{font-size:2cqw;line-height:1}
.tera-ticker{position:absolute;left:0;right:0;bottom:0;height:7%;background:#202123;color:#eee;display:flex;align-items:center;overflow:hidden;font-size:1.15cqw;font-weight:700;letter-spacing:.08em}.tera-ticker>div{white-space:nowrap;animation:tera-marquee 22s linear infinite;min-width:max-content}
@keyframes tera-marquee{to{transform:translateX(-50%)}}
.concept-phone .tera-stage{aspect-ratio:.47;border-radius:21px}.concept-phone .tera-nav{top:7%;height:7%;left:7%;right:7%;font-size:3.1cqw}.concept-phone .tera-nav>span:first-child{font-size:2.9cqw}.concept-phone .tera-nav>span:nth-child(2){display:none}.concept-phone .tera-menu{display:block;font-size:2.9cqw}
.concept-phone .tera-word{top:17%;left:3%;font-size:32cqw;transform:scaleX(1.18)}.concept-phone .tera-word>span{font-size:3cqw}.concept-phone .tera-photo{left:7%;right:7%;top:31%;bottom:25%;background-position:center 18%;background-size:110% auto}.concept-phone .tera-side{left:10%;top:35%;z-index:2;color:#fff;gap:0;text-shadow:0 1px 8px #0008}.concept-phone .tera-side>span:first-child{display:none}.concept-phone .tera-side>span:last-child{font-size:7.2cqw;line-height:.96}.concept-phone .tera-caption{right:11%;bottom:29%;font-size:7cqw}.concept-phone .tera-book{left:7%;bottom:12%;width:86%;font-size:3.7cqw;padding:4cqw 5cqw}.concept-phone .tera-book>span{font-size:5cqw}.concept-phone .tera-ticker{height:6%;bottom:4%;font-size:2.8cqw}.concept-phone .tera-stage:after{content:"";position:absolute;inset:auto 0 0;height:4%;background:#202123}
.concept-section[data-paused="true"] .tera-ticker>div,.concept-section[data-paused="true"] .tera-stage:before{animation-play-state:paused}
@media(max-width:600px){.concept-phone .tera-stage{border-radius:13px}}
@media(prefers-reduced-motion:reduce){.tera-ticker>div,.tera-stage:before{animation:none}}
.tera-word{transform:scaleX(1.08)}.tera-side{gap:2cqw}.tera-side>span:last-child{font-size:3.6cqw}.tera-caption{left:48%;right:auto;font-size:3.4cqw}.concept-phone .tera-word{transform:scaleX(1.08)}.concept-phone .tera-caption{left:auto;right:11%;font-size:7cqw}.concept-phone .tera-side{gap:0}.concept-phone .tera-side>span:last-child{font-size:7.2cqw}
.concept-note strong{font-size:14px;line-height:1.6}.compare-open{display:inline-block;margin-top:12px;padding:0 0 5px;border:0;border-bottom:1px solid #ff4a2f;background:none;color:#12373d;font:inherit;font-size:13px;cursor:pointer}.compare-open:hover{color:#db3b23}.compare-open:focus-visible,.compare-close:focus-visible{outline:2px solid #ff4a2f;outline-offset:5px}
.compare-dialog{width:min(1200px,94vw);max-height:90svh;padding:32px;border:0;border-radius:22px;background:#f0ece4;color:#12373d;overflow:auto;box-shadow:0 30px 100px #0008}.compare-dialog::backdrop{background:#071214bb;backdrop-filter:blur(8px)}.compare-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.compare-head p{font-size:10px;margin:0 0 12px;letter-spacing:.08em}.compare-head h2{font:500 clamp(28px,4vw,48px)/1.05 'PP Neue Montreal',sans-serif;letter-spacing:-.04em;margin:0}.compare-close{font:inherit;font-size:12px;border:0;background:none;color:inherit;cursor:pointer;padding:8px}.compare-close span{font-size:22px;margin-left:8px}.compare-intro{font-size:13px;line-height:1.7;max-width:650px;margin:22px 0 30px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.compare-grid article{min-width:0}.compare-grid h3{font:inherit;font-size:12px;margin:0 0 12px}.compare-detail{font-size:12px;line-height:1.7;margin:16px 0}.compare-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid #12373d22;margin:16px 0 22px;padding-top:20px}.compare-notes p{font-size:12px;line-height:1.7;margin:0}.compare-notes strong{display:block;font-weight:500;margin-bottom:6px}.compare-dialog>small{font-size:10px;color:#536567}.basic-demo{aspect-ratio:1.58;background:#fff;color:#333;font-family:Arial,sans-serif;container-type:inline-size;padding:0 6%;overflow:hidden}.basic-nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding:5% 0;font-size:1.7cqw}.basic-nav strong{font-size:3.4cqw}.basic-content{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin-top:8%}.basic-content h4{font:700 3.8cqw/1.2 Arial;margin:0 0 10%}.basic-content p{font:400 2cqw/1.5 Arial;margin:0 0 14%}.basic-book{font-size:1.8cqw;background:#444;color:white;padding:8px 12px;display:inline-block}.basic-photo{height:31cqw;background:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-editorial.png) center 15%/110% auto;filter:grayscale(1)}.basic-footer{font-size:1.5cqw;text-align:center;margin:7% 0;color:#777}@media(max-width:700px){.compare-dialog{padding:22px;width:94vw}.compare-grid{grid-template-columns:1fr}.compare-notes{grid-template-columns:1fr;gap:16px}} .basic-demo{padding:0;background:#e4d3be;color:#493a2e;font-family:Verdana,Arial,sans-serif}
.basic-nav{background:#654a38;color:#fff;padding:4% 6%;border-bottom:0;font-size:1.65cqw;min-height:15cqw}
.basic-nav strong{font:700 4.8cqw/1 Georgia,serif;letter-spacing:.03em;color:#fff}
.basic-content{margin:6% 6% 0;gap:6%;grid-template-columns:1.05fr 1fr}
.basic-content h4{font:700 3.5cqw/1.18 Georgia,serif;color:#493a2e;margin:0 0 7%}
.basic-content p{font:400 1.85cqw/1.55 Verdana,Arial,sans-serif;margin:0 0 9%;color:#594a3e}
.basic-book{font:700 1.7cqw/1.4 Verdana,Arial,sans-serif;background:#76563e;color:#fff;border:1px solid #644730;border-radius:4px;padding:1.7cqw 2cqw;white-space:nowrap}
.basic-photo{height:30cqw;border:3px solid #f5eade;filter:none;border-radius:3px}
.basic-footer{font:400 1.4cqw/1.4 Verdana,Arial,sans-serif;margin:5% 6% 0;padding-top:3%;border-top:1px solid #76563e40;color:#695443} .compare-dialog{width:min(1360px,94vw);max-height:90svh;padding:10px;overflow:hidden;border-radius:26px;box-shadow:0 40px 110px #0007,0 12px 36px #0005;border:1px solid #ffffff35}
.compare-scroll{max-height:calc(90svh - 22px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:18px 32px 28px;scrollbar-width:thin;scrollbar-color:#718b95 #dce0dc;border-radius:17px}
.compare-scroll::-webkit-scrollbar{width:7px}.compare-scroll::-webkit-scrollbar-track{background:#dce0dc;border-radius:12px}.compare-scroll::-webkit-scrollbar-thumb{background:#718b95;border-radius:12px;border:1px solid #dce0dc}
.compare-head{position:sticky;top:-18px;z-index:5;background:#f0ece4;padding:20px 0 18px;align-items:center;border-bottom:1px solid #12373d18}
.compare-head h2{font-size:clamp(28px,3.4vw,48px)}.compare-head p{margin-bottom:10px}.compare-close{display:flex;align-items:center;gap:10px;border-radius:30px;padding:10px 17px;background:#12373d0b;flex:none}.compare-close span{margin:0;line-height:1}.compare-close:hover{background:#12373d15}
.compare-intro{margin:22px 0 34px;font-size:13px;max-width:none}.compare-grid{gap:32px}.compare-grid h3{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:15px}.compare-index{font-size:10px;color:#637a7e}.compare-orange{height:6px;width:6px;background:#ff4a2f;border-radius:50%;margin-left:2px}.compare-detail{font-size:14px;line-height:1.8;margin:22px 0 8px;max-width:56ch}
.compare-notes{display:block;background:var(--steel,#8fa3ad);color:#102f35;border:0;border-radius:14px;padding:8px 28px;margin:34px 0 22px}
.compare-notes p{display:grid;grid-template-columns:80px minmax(160px,.7fr) minmax(0,1.7fr);align-items:start;column-gap:24px;font-size:14px;line-height:1.8;padding:28px 0;margin:0;border-bottom:1px solid #12373d30}.compare-notes p:last-child{border-bottom:0}.compare-notes strong{font-family:'Nippo',sans-serif;font-size:17px;font-weight:400;line-height:1.4;margin:4px 0 0}.compare-number{font:400 36px/1.2 'Nippo',sans-serif;letter-spacing:-.06em;white-space:nowrap}.compare-number>span{color:#ff4a2f;margin-left:3px}.compare-scroll>small{font-size:10px;line-height:1.6;color:#536567;display:block}
.compare-dialog[open]{animation:compare-enter 220ms ease-out}.compare-dialog[open]::backdrop{animation:compare-backdrop 220ms ease-out}@keyframes compare-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes compare-backdrop{from{background:#07121400}to{background:#071214bb}}
@media(max-width:700px){.compare-dialog{padding:7px;border-radius:20px}.compare-scroll{padding:8px 14px 22px;max-height:calc(90svh - 16px)}.compare-head{top:-8px;padding:14px 0;gap:12px}.compare-head h2{font-size:28px}.compare-head p{font-size:8px}.compare-close{font-size:10px;padding:8px 10px;gap:5px}.compare-intro{font-size:12px;margin:18px 0 24px}.compare-grid{gap:24px}.compare-detail{font-size:13px;margin-top:16px}.compare-notes{padding:0 18px;margin-top:26px}.compare-notes p{grid-template-columns:46px 1fr;gap:10px 12px;font-size:13px;padding:22px 0}.compare-number{font-size:28px;grid-row:1 / span 2}.compare-notes strong{font-size:16px;margin:0}.compare-notes p{display:grid}.compare-notes p:after{display:none}}
@media(prefers-reduced-motion:reduce){.compare-dialog[open],.compare-dialog[open]::backdrop{animation:none}} .compare-accordion{background:#e7e4dd;color:#12373d;border-radius:14px;padding:0 28px;overflow:hidden}
.compare-accordion details{border-bottom:1px solid #12373d26}.compare-accordion details:last-child{border-bottom:0}
.compare-accordion summary{display:grid;grid-template-columns:120px 1fr 32px;align-items:center;gap:24px;height:94px;overflow:hidden;cursor:pointer;list-style:none;position:relative}
.compare-accordion summary::-webkit-details-marker{display:none}
.compare-accordion summary .compare-number{align-self:start;font:400 100px/1.1 'Nippo',sans-serif;letter-spacing:-.08em;transform:translateY(20px);transition:transform 260ms ease;color:#12373d}
.compare-accordion .compare-number>span{color:#ff4a2f;margin-left:2px}.compare-question{font:400 20px/1.3 'Nippo',sans-serif}
.compare-expand{position:relative;width:28px;height:28px;border:1px solid #12373d45;border-radius:50%}.compare-expand:before,.compare-expand:after{content:'';position:absolute;left:8px;right:8px;top:12px;height:1px;background:#12373d}.compare-expand:after{transform:rotate(90deg);transition:transform 200ms ease}
.compare-accordion details[open] summary{height:126px}.compare-accordion details[open] .compare-number{transform:translateY(6px)}.compare-accordion details[open] .compare-expand:after{transform:rotate(0)}.compare-accordion summary:hover .compare-question{color:#b63c27}.compare-accordion summary:focus-visible{outline:2px solid #ff4a2f;outline-offset:-4px;border-radius:5px}
.compare-accordion .compare-answer{padding:0 56px 30px 144px;animation:compare-answer-in 220ms ease-out}.compare-accordion .compare-answer p{display:block;border:0;padding:0;margin:0;font-size:14px;line-height:1.85;max-width:72ch}
@keyframes compare-answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.compare-accordion{padding:0 18px}.compare-accordion summary{grid-template-columns:72px 1fr 26px;gap:12px;height:80px}.compare-accordion summary .compare-number{font-size:72px;transform:translateY(22px);grid-row:auto}.compare-question{font-size:16px}.compare-accordion details[open] summary{height:100px}.compare-accordion details[open] .compare-number{transform:translateY(8px)}.compare-accordion .compare-answer{padding:0 0 24px 84px}.compare-accordion .compare-answer p{font-size:13px}.compare-expand{width:24px;height:24px}.compare-expand:before,.compare-expand:after{left:6px;right:6px;top:10px}}
@media(prefers-reduced-motion:reduce){.compare-accordion .compare-answer{animation:none}.compare-accordion summary .compare-number,.compare-expand:after{transition:none}} .tera-photo,.concept-phone .tera-photo{filter:none}
.tera-word{mix-blend-mode:normal;text-shadow:0 2px 2px #0000000c,0 6px 14px #00000014}
.tera-word>span{color:#bf302b;text-shadow:none}
.tera-book{width:auto;min-width:0;gap:3cqw;justify-content:flex-start;border-radius:7px;padding:1.45cqw 2cqw;box-shadow:0 3px 8px #00000025,0 8px 18px #00000012}
.tera-book>span{color:#ed655b}.concept-phone .tera-book{width:auto;right:auto;gap:10cqw;border-radius:5px;padding:3.7cqw 5cqw;box-shadow:0 3px 8px #0003}
.tera-sticker{position:absolute;z-index:3;left:35%;top:53%;width:9cqw;height:9cqw;display:grid;place-content:center;text-align:center;background:#bf302b;color:#fff5ef;font:900 1.65cqw/.95 Arial,sans-serif;letter-spacing:-.06em;transform:rotate(-12deg);clip-path:polygon(50% 0,60% 7%,73% 4%,79% 16%,93% 20%,92% 34%,100% 45%,92% 56%,95% 70%,82% 77%,77% 91%,63% 91%,51% 100%,40% 92%,26% 96%,20% 83%,6% 78%,8% 63%,0 51%,7% 39%,4% 25%,17% 19%,22% 6%,37% 8%)}
.tera-side>span:first-child:before{content:'';display:inline-block;width:.7cqw;height:.7cqw;margin-right:.8cqw;border-radius:50%;background:#bf302b}
.tera-ticker{border-top:2px solid #bf302b}
.concept-phone .tera-sticker{left:auto;right:4%;top:28%;width:21cqw;height:21cqw;font-size:3.9cqw;transform:rotate(12deg)}
@media(max-width:600px){.tera-book{border-radius:3px}.concept-phone .tera-book{border-radius:3px}}
.concept-phone .tera-side{display:none}.concept-phone .tera-book{left:7%;right:7%;top:75%;bottom:auto;width:auto;min-height:9%;box-sizing:border-box;justify-content:space-between;gap:0;border-radius:0 0 5px 5px;margin:0;padding:4cqw 5cqw}.concept-phone .tera-photo{bottom:25%} .tera-deboss{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;clip-path:polygon(0 0,100% 0,0 100%)}
.tera-deboss:before,.tera-deboss:after{content:'';position:absolute;width:150%;height:210%;left:-42%;top:-78%;background:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-pattern.jpg) right center/100% 100% no-repeat;transform:rotate(48deg);transform-origin:center;mix-blend-mode:multiply;opacity:.075}
.tera-deboss:after{filter:invert(1);mix-blend-mode:screen;opacity:.16;translate:1px 2px}
.tera-side,.tera-book,.tera-ticker{z-index:2}.concept-phone .tera-deboss:before,.concept-phone .tera-deboss:after{width:220%;height:150%;left:-85%;top:-45%;transform:rotate(28deg)} .tera-deboss{clip-path:none}
.tera-deboss:before,.tera-deboss:after,.concept-phone .tera-deboss:before,.concept-phone .tera-deboss:after{width:170%;height:300%;left:-35%;top:-100%;transform:rotate(-135deg);transform-origin:center;background:#777975;mask:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-pattern-cutout.webp) center/100% 100% no-repeat;-webkit-mask:url(//urbz.ee/wp-content/themes/URBZ/assets/images/tera-pattern-cutout.webp) center/100% 100% no-repeat;mix-blend-mode:normal;filter:none;opacity:.18;translate:0 0}
.tera-deboss:after,.concept-phone .tera-deboss:after{background:#fff;opacity:.36;translate:1px 2px}
.tera-deboss:before,.concept-phone .tera-deboss:before{translate:-1px -1px}
.concept-section{padding-bottom:76px}
.urbz-services{position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:76px;margin-top:-32px;border-radius:32px 32px 0 0;padding:38px var(--page-margin) 100px;background:#101314;color:#f0ece4}
.urbz-services:before{content:'';position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 95% 8%,#19454b88,transparent 56%),radial-gradient(ellipse at 3% 90%,#12373d33,transparent 55%);pointer-events:none}
.urbz-services:after{content:'';position:absolute;z-index:-1;inset:0;opacity:.065;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.services-inner{max-width:var(--content-max);margin:auto}.services-meta{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #f0ece425;padding-bottom:25px;font:400 10px/1.5 'Nippo',sans-serif;letter-spacing:.08em;color:#9fb0b2}
.services-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin:72px 0 54px}.services-heading h2{font:500 clamp(48px,6vw,88px)/1.02 'PP Neue Montreal',sans-serif;letter-spacing:-.055em;margin:0}.services-heading h2>span{color:#ff4a2f}.services-heading>p{max-width:300px;font-size:14px;line-height:1.75;color:#afbcbd;margin:0 0 5px}
.services-list details{border-top:1px solid #f0ece430}.services-list details:last-child{border-bottom:1px solid #f0ece430}.services-list summary{list-style:none;display:grid;grid-template-columns:170px 1fr 42px;gap:28px;align-items:center;height:112px;overflow:hidden;cursor:pointer}.services-list summary::-webkit-details-marker{display:none}.service-number{font:400 116px/1.1 'Nippo',sans-serif;letter-spacing:-.075em;align-self:start;transform:translateY(25px);color:#d1d8d5;transition:transform 260ms ease}.service-number>span{color:#ff4a2f}.services-list h3{font:500 clamp(24px,2.5vw,38px)/1.15 'PP Neue Montreal',sans-serif;letter-spacing:-.025em;margin:0;transition:color 180ms ease}.service-toggle{position:relative;width:38px;height:38px;border:1px solid #f0ece44d;border-radius:50%}.service-toggle:before,.service-toggle:after{content:'';position:absolute;left:12px;right:12px;top:18px;height:1px;background:#f0ece4}.service-toggle:after{transform:rotate(90deg);transition:transform 200ms ease}.services-list details[open] summary{height:142px}.services-list details[open] .service-number{transform:translateY(7px)}.services-list details[open] .service-toggle:after{transform:rotate(0)}.services-list summary:hover h3{color:#ff795f}.services-list summary:focus-visible{outline:2px solid #ff4a2f;outline-offset:-4px}
.service-content{padding:0 70px 38px 198px;animation:service-reveal 260ms ease-out}.service-content p{max-width:620px;font-size:15px;line-height:1.8;color:#bdc8c6;margin:0 0 24px}.service-content a{display:inline-flex;align-items:center;gap:14px;padding:8px 0;color:#f0ece4;border-bottom:1px solid #ff4a2f;text-decoration:none;font-size:13px}.service-content a>span{height:6px;width:6px;background:#ff4a2f;border-radius:50%;transition:transform 180ms}.service-content a:hover>span{transform:scale(1.5)}.service-content a:focus-visible{outline:2px solid #ff4a2f;outline-offset:5px}@keyframes service-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.urbz-services{padding:30px 20px 64px;border-radius:24px 24px 0 0;margin-top:-24px}.services-meta{font-size:9px}.services-heading{display:block;margin:48px 0 36px}.services-heading h2{font-size:clamp(42px,10vw,68px)}.services-heading>p{margin-top:20px;font-size:13px;max-width:290px}.services-list summary{grid-template-columns:76px 1fr 30px;gap:12px;height:90px}.service-number{font-size:76px;transform:translateY(24px)}.services-list h3{font-size:24px}.service-toggle{width:28px;height:28px}.service-toggle:before,.service-toggle:after{left:8px;right:8px;top:13px}.services-list details[open] summary{height:106px}.service-content{padding:0 10px 30px 88px}.service-content p{font-size:13px;line-height:1.8}.service-content a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.service-content{animation:none}.service-number,.services-list h3,.service-toggle:after,.service-content a>span{transition:none}}
.urbz-services{z-index:3}
@media(max-width:760px){.services-list summary{grid-template-columns:86px 1fr 28px;gap:12px}.service-number{font-size:68px}.service-content{padding-left:98px}.services-list h3{font-size:22px}} .urbz-services .services-heading h2>span,.urbz-services .service-number>span{text-shadow:0 0 9px #ff4a2f38,0 0 24px #ff4a2f20}
.urbz-services .service-content a>span{box-shadow:0 0 7px #ff4a2f66,0 0 17px #ff4a2f30}
.urbz-services .service-content a{box-shadow:0 3px 7px -5px #ff4a2f99}
.urbz-process{position:relative;z-index:4;margin-top:-32px;border-radius:32px 32px 0 0;background:#f0ece4;color:#12373d;padding:84px var(--page-margin) 104px;scroll-margin-top:90px}
.process-inner{width:min(100%,var(--content-max));margin:auto}
.urbz-process h2{font:500 clamp(42px,5.3vw,80px)/1.05 'PP Neue Montreal',sans-serif;letter-spacing:-.05em;margin:0 0 68px}.urbz-process h2>span{color:#ff4a2f}
.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;list-style:none;padding:0;margin:0;position:relative}
.process-steps:before{content:'';position:absolute;top:5px;left:5px;right:calc((100% - 96px)/3 - 5px);height:1px;background:#12373d30}
.process-steps li{position:relative;padding-top:40px;min-width:0}.process-dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:#ff4a2f;box-shadow:0 0 8px #ff4a2f38,0 0 18px #ff4a2f18}
.process-steps h3{font:500 clamp(24px,2.2vw,32px)/1.2 'PP Neue Montreal',sans-serif;letter-spacing:-.025em;margin:0 0 22px}.process-steps p{font:400 14px/1.85 'Nippo',sans-serif;color:#3b5356;margin:0;max-width:44ch}
@media(max-width:900px){.process-steps{gap:28px}.process-steps:before{right:calc((100% - 56px)/3 - 5px)}.process-steps p{font-size:13px}.process-steps h3{font-size:25px}}
@media(max-width:700px){.urbz-process{margin-top:-24px;border-radius:24px 24px 0 0;padding:54px 20px 64px}.urbz-process h2{font-size:clamp(40px,10vw,60px);margin-bottom:42px}.process-steps{display:block}.process-steps:before{top:7px;bottom:0;left:5px;right:auto;width:1px;height:auto}.process-steps li{padding:0 0 38px 32px}.process-steps li:last-child{padding-bottom:0}.process-dot{top:7px}.process-steps h3{font-size:26px;margin-bottom:16px}.process-steps p{font-size:13px;max-width:52ch}} .urbz-contact{position:relative;z-index:5;isolation:isolate;overflow:hidden;margin-top:-32px;border-radius:32px 32px 0 0;background:#101314;color:#f0ece4;padding:38px var(--page-margin) 112px;scroll-margin-top:76px}
.urbz-contact:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 90% 5%,#12373d88,transparent 65%);pointer-events:none}
.urbz-contact:after{content:'';position:absolute;inset:0;z-index:-1;opacity:.045;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.contact-inner{max-width:var(--content-max);margin:auto}.contact-meta{display:flex;justify-content:space-between;gap:24px;padding-bottom:25px;border-bottom:1px solid #f0ece425;color:#a6b9bb;font:400 10px/1.5 'Nippo',sans-serif;letter-spacing:.08em}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(48px,8vw,140px);padding-top:80px;align-items:start}.contact-copy h2{font:500 clamp(64px,7.4vw,112px)/.98 'PP Neue Montreal',sans-serif;letter-spacing:-.055em;margin:0 0 32px}.contact-copy h2>span{color:#ff4a2f;text-shadow:0 0 24px #ff4a2f25}.contact-copy>p{max-width:38ch;color:#bdc8c6;font:400 15px/1.85 'Nippo',sans-serif;margin:0}.contact-direct{margin-top:44px;display:flex;align-items:flex-start;flex-direction:column;gap:10px}.contact-direct>span{font-size:12px;color:#a6b9bb}.contact-direct a{color:#f0ece4;text-decoration:none;border-bottom:1px solid #ff4a2f80;padding-bottom:6px;font:500 clamp(19px,2vw,27px)/1.3 'PP Neue Montreal',sans-serif;overflow-wrap:anywhere}
.contact-orb{position:absolute;width:320px;aspect-ratio:1;left:-200px;bottom:-235px;border-radius:50%;background:#ff4a2f;box-shadow:0 0 65px #ff4a2f25,0 0 140px #ff4a2f12;z-index:-1;pointer-events:none}
.urbz-contact-form{min-width:0;padding-top:8px;font-family:'Nippo',sans-serif}.contact-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}.contact-field{margin-bottom:34px;min-width:0}.contact-field label{display:block;margin-bottom:14px;color:#f0ece4;font-size:13px}.contact-field input,.contact-field textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;border:0;border-bottom:1px solid #a6b9bb70;border-radius:0;padding:10px 0 15px;background:transparent;color:#f0ece4;font:400 16px/1.65 'Nippo',sans-serif;box-shadow:none;transition:border-color 180ms}.contact-field textarea{min-height:150px;resize:vertical}.contact-field textarea::placeholder{font-size:13px;color:#93a6a8;opacity:1}.contact-field input:focus,.contact-field textarea:focus{border-color:#ff795f;outline:2px solid #ff795f;outline-offset:6px;border-radius:2px}.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact-submit-row{display:flex;align-items:center;gap:24px}.contact-submit-row>p{font-size:10px;line-height:1.7;color:#a6b9bb;margin:0}.contact-send{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:15px;min-height:54px;padding:17px 27px;border:0;border-radius:40px;background:#12373d;color:#f0ece4;font:400 13px/1.4 'Nippo',sans-serif;cursor:pointer;box-shadow:0 6px 20px #0003;transition:color 350ms,transform 250ms;flex-shrink:0}.contact-send:before{content:'';position:absolute;z-index:-1;left:29px;top:calc(50% - 3px);height:6px;width:6px;border-radius:50%;background:#ff4a2f;transform:scale(1);transition:transform 600ms cubic-bezier(.22,1,.36,1)}.contact-send-dot{width:6px;height:6px;border-radius:50%;background:#ff4a2f}.contact-send:hover:before,.contact-send:focus-visible:before{transform:scale(75)}.contact-send:hover,.contact-send:focus-visible{color:#101314;transform:translateY(-2px)}.contact-send:disabled{cursor:wait;opacity:.65;transform:none}.contact-send:focus-visible,.contact-direct a:focus-visible,.urbz-footer a:focus-visible{outline:2px solid #ff795f;outline-offset:5px}.contact-status{font-size:13px;line-height:1.7;min-height:1.7em;margin:22px 0 0;color:#c4d9d8}.contact-status[data-error=true]{color:#ffad9e}
.site-footer.urbz-footer{position:relative;background:#101314;color:#a6b9bb;padding:0 var(--page-margin) 28px}.urbz-footer-inner{max-width:var(--content-max);margin:auto;padding-top:28px;border-top:1px solid #f0ece425;display:flex;align-items:center;gap:32px}.footer-wordmark{font:500 38px/1 'PP Neue Montreal',sans-serif;letter-spacing:-.06em;color:#f0ece4;text-decoration:none}.footer-wordmark span{color:#ff4a2f}.urbz-footer p{font-size:11px;margin:0}.footer-top{margin-left:auto;color:#f0ece4;font-size:11px;text-decoration:none}.urbz-footer small{font-size:10px}.footer-top:hover,.contact-direct a:hover{color:#ff795f}
@media(max-width:800px){.contact-grid{gap:42px;grid-template-columns:1fr;padding-top:48px}.contact-copy h2{font-size:clamp(64px,12vw,92px)}.contact-copy>p{max-width:46ch}.contact-direct{margin-top:28px}.contact-orb{width:220px;left:-155px;bottom:-145px}.urbz-contact{padding:30px 20px 64px;border-radius:24px 24px 0 0;margin-top:-24px}.contact-meta{font-size:8px}.site-footer.urbz-footer{padding:0 20px 24px}.urbz-footer-inner{gap:20px;flex-wrap:wrap}.urbz-footer p{display:none}}
@media(max-width:420px){.contact-field-pair{grid-template-columns:1fr;gap:0}.contact-submit-row{align-items:flex-start;flex-direction:column;gap:16px}.contact-copy>p{font-size:14px}.contact-meta span:last-child{max-width:110px;text-align:right}.contact-copy h2{font-size:64px}.urbz-footer-inner{gap:16px}.footer-wordmark{font-size:32px}}
@media(prefers-reduced-motion:reduce){.contact-send,.contact-send:before,.contact-field input,.contact-field textarea{transition:none}} .urbz-footer .footer-wordmark{display:block;width:100px;flex-shrink:0;line-height:0}.urbz-footer .footer-wordmark img{display:block;width:100%;height:auto}
@media(max-width:420px){.urbz-footer .footer-wordmark{width:84px}} .urbz-process{padding-top:100px;padding-bottom:120px}
.urbz-process .process-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,110px);align-items:start}
.urbz-process h2{font-size:clamp(44px,4.8vw,72px);margin:0;line-height:1.06}
.urbz-process .process-steps{display:block;margin:4px 0 0;padding:0}
.urbz-process .process-steps:before{top:12px;bottom:36px;left:5px;right:auto;width:1px;height:auto;background:#12373d24}
.urbz-process .process-steps li{padding:0 0 36px 36px;margin:0 0 32px;border-bottom:1px solid #12373d24}
.urbz-process .process-steps li:last-child{margin:0;padding-bottom:0;border:0}
.urbz-process .process-dot{top:11px;box-shadow:none}
.urbz-process .process-steps h3{font-size:clamp(26px,2.4vw,34px);margin:0 0 14px}
.urbz-process .process-steps p{font-size:16px;line-height:1.8;max-width:48ch}
.service-content p{font-size:16px;line-height:1.8;max-width:60ch}
.services-heading>p{font-size:16px;max-width:32ch}
.compare-detail,.compare-accordion .compare-answer p{font-size:16px;line-height:1.8}
.compare-intro{font-size:15px;line-height:1.8}
.contact-copy>p{font-size:16px;line-height:1.8}
.contact-field label{font-size:14px}.contact-field textarea::placeholder{font-size:15px}.contact-submit-row>p{font-size:12px}.contact-status{font-size:14px}
.contact-grid{padding-top:88px}.urbz-contact{padding-bottom:88px}
.urbz-footer-inner{display:grid;grid-template-columns:1fr auto auto;gap:22px 40px;align-items:center}
.footer-email{font-size:13px;color:#f0ece4;text-decoration:none;overflow-wrap:anywhere}.footer-top{margin:0;font-size:13px}.urbz-footer small{grid-column:1 / -1;font-size:11px}
.service-content a,.compare-open,.contact-direct a,.footer-email,.footer-top{background-image:linear-gradient(#ff4a2f,#ff4a2f);background-repeat:no-repeat;background-position:left bottom;background-size:0 1px;transition:background-size 240ms ease,color 180ms ease}
.service-content a,.compare-open,.contact-direct a{border-bottom-color:transparent}
.service-content a:hover,.service-content a:focus-visible,.compare-open:hover,.compare-open:focus-visible,.contact-direct a:hover,.contact-direct a:focus-visible,.footer-email:hover,.footer-email:focus-visible,.footer-top:hover,.footer-top:focus-visible{background-size:100% 1px}
.service-content a,.compare-open{background-size:24px 1px}.contact-direct a{background-size:40px 1px}
@media(max-width:900px){.urbz-process .process-inner{grid-template-columns:1fr;gap:44px}.urbz-process h2 br{display:none}.urbz-process .process-steps p{max-width:60ch}}
@media(max-width:700px){.urbz-process{padding-top:60px;padding-bottom:80px}.urbz-process h2{font-size:clamp(40px,10vw,56px)}.urbz-process .process-steps li{padding-left:30px;padding-bottom:28px;margin-bottom:26px}.urbz-process .process-steps h3{font-size:26px}.urbz-process .process-steps p,.service-content p,.services-heading>p,.compare-detail,.compare-accordion .compare-answer p,.contact-copy>p{font-size:15px;line-height:1.8}.service-content{padding-left:0;padding-right:0}.contact-grid{padding-top:48px}.urbz-contact{padding-bottom:56px}.urbz-footer-inner{grid-template-columns:1fr auto;gap:24px 16px}.footer-email{grid-column:1 / -1;grid-row:2}.footer-top{grid-column:2;grid-row:1}.urbz-footer small{grid-row:3}.contact-submit-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.service-content a,.compare-open,.contact-direct a,.footer-email,.footer-top{transition:none}} body.page-template-page-urbz-ist{background:#f0ece4;color:#12373d}
.urbz-about{position:relative;isolation:isolate;overflow:hidden;background:#f0ece4;color:#12373d;padding:156px var(--page-margin) 110px}
.urbz-about:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23grain)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.about-inner{max-width:var(--content-max);margin:auto}.about-kicker{font:400 11px/1.5 'Nippo',sans-serif;letter-spacing:.1em;margin:0 0 40px;padding-bottom:22px;border-bottom:1px solid #12373d25}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto 1fr;gap:36px clamp(48px,6vw,100px);align-items:start}
.about-grid h1{position:relative;z-index:2;grid-column:1;grid-row:1;font:500 clamp(54px,5.6vw,90px)/1.02 'PP Neue Montreal',sans-serif;letter-spacing:-.055em;margin:0;animation:about-enter 500ms ease-out both}.about-grid h1>span{color:#12373d}
.about-portrait{grid-column:2;grid-row:1 / span 2;position:relative;margin:62px 0 0;min-width:0}.about-photo{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;border-radius:3px;animation:about-reveal 620ms cubic-bezier(.2,.7,.2,1) 60ms both;background:#1c1d1d}.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 47%;filter:brightness(1.2)}
.about-outline{position:absolute;z-index:0;top:-85px;left:-40px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #12373d22;font:500 clamp(130px,16vw,250px)/1 'PP Neue Montreal',sans-serif;letter-spacing:-.065em;pointer-events:none;user-select:none}
.about-portrait figcaption{display:flex;align-items:center;gap:10px;font:400 10px/1.5 'Nippo',sans-serif;letter-spacing:.07em;margin-top:18px}.about-dot{width:7px;height:7px;background:#ff4a2f;border-radius:50%;flex-shrink:0}
.about-story{grid-column:1;grid-row:2;max-width:57ch;animation:about-enter 480ms ease-out 160ms both}.about-story p{font:400 16px/1.85 'Nippo',sans-serif;margin:0 0 24px;color:#365155}.about-story .about-lead{font:500 clamp(21px,1.7vw,25px)/1.5 'PP Neue Montreal',sans-serif;color:#12373d;margin-bottom:28px;letter-spacing:-.01em}.about-cta{margin-top:10px;text-decoration:none}
body.page-template-page-urbz-ist .site-header{background:#101314f5;color:#f0ece4}body.page-template-page-urbz-ist .site-header__nav a[aria-current=page]{color:#ff795f}
@keyframes about-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes about-reveal{from{opacity:0;clip-path:inset(0 0 8% 0)}to{opacity:1;clip-path:inset(0)}}
@media(max-width:900px){.urbz-about{padding:140px 28px 80px}.about-grid{column-gap:36px}.about-grid h1{font-size:clamp(46px,6vw,65px)}.about-story p{font-size:15px}.about-outline{font-size:160px}}
@media(max-width:700px){.urbz-about{padding:120px 20px 64px}.about-kicker{margin-bottom:32px}.about-grid{display:flex;flex-direction:column;gap:34px}.about-grid h1{font-size:clamp(46px,10.5vw,70px)}.about-portrait{width:100%;max-width:460px;margin:16px 0 0;align-self:center}.about-outline{top:-42px;left:-18px;font-size:clamp(120px,30vw,190px)}.about-story{max-width:60ch}.about-story .about-lead{font-size:22px}.about-photo{aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.about-grid h1,.about-photo,.about-story{animation:none}} .about-portrait{margin-top:76px;padding-right:8px}
.about-photo{border-radius:22px;box-shadow:0 5px 12px #12373d12,0 24px 48px -16px #12373d48,0 44px 80px -32px #12373d30;animation-name:about-portrait-enter}
.about-photo img{filter:brightness(1.24) contrast(1.025)}
.about-outline{top:-102px;left:-36px;font-family:'Nippo',sans-serif;font-weight:500;font-size:clamp(128px,14.5vw,226px);line-height:1;letter-spacing:-.075em;color:#12373d08;-webkit-text-stroke:1.5px #12373d70;transform:rotate(-5deg);transform-origin:35% 80%}
.about-portrait figcaption{position:relative;margin-top:26px;padding-left:5px;letter-spacing:.09em;font-size:11px;color:#365155}
.about-story{max-width:53ch}.about-story p{margin-bottom:28px}.about-story .about-lead{line-height:1.55;margin-bottom:30px}.about-cta{margin-top:12px}
@keyframes about-portrait-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:701px) and (max-width:1000px){.about-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:38px}.about-outline{font-size:clamp(115px,15vw,150px);top:-68px;left:-20px}.about-portrait{margin-top:66px}}
@media(max-width:700px){.about-grid{gap:38px}.about-portrait{margin-top:30px;padding-right:0;width:calc(100% - 12px)}.about-outline{top:-57px;left:-12px;font-size:clamp(112px,29vw,170px);-webkit-text-stroke:1.25px #12373d70}.about-photo{border-radius:18px;box-shadow:0 4px 10px #12373d12,0 20px 36px -14px #12373d48}.about-portrait figcaption{margin-top:22px;font-size:10px}.about-story{max-width:60ch}.about-story p{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.about-photo{animation:none}} .about-grid{column-gap:clamp(56px,7vw,116px)}
.about-grid h1{font-size:clamp(54px,6vw,96px);letter-spacing:-.06em}
.about-portrait{margin-top:122px;padding:0;perspective:1200px}
.about-deboss{position:absolute;top:-132px;left:-72px;width:calc(100% + 160px);height:210px;transform:rotate(-8deg);pointer-events:none;filter:drop-shadow(-2px -3px 1px #363a354f) drop-shadow(2px 3px 1px #ffffffed)}
.about-deboss:before{content:'';position:absolute;inset:0;background:linear-gradient(155deg,#aaa99f 0%,#cdc9bf 35%,#e4dfd5 76%);mask:url(//urbz.ee/wp-content/themes/URBZ/assets/images/urbz-logo.webp) center/contain no-repeat;-webkit-mask:url(//urbz.ee/wp-content/themes/URBZ/assets/images/urbz-logo.webp) center/contain no-repeat}
.about-photo{transform:rotate(2deg);border-radius:22px;box-shadow:1px 2px 0 #41413d,3px 5px 0 #292a27,6px 9px 5px -3px #0007,15px 23px 22px -10px #0006,32px 46px 48px -22px #0005;animation-name:about-photo-lift}
.about-photo:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 1px 1px 0 #ffffff55,inset -1px -2px 0 #0009}
.about-portrait figcaption{margin-top:36px;padding-left:16px}
.about-story .about-lead{max-width:42ch;font-size:clamp(22px,1.9vw,28px);line-height:1.5}
.about-personal{border-top:1px solid #12373d30;padding-top:25px;margin-top:32px!important}
.about-personal strong{display:block;font:500 clamp(25px,2.25vw,34px)/1.18 'PP Neue Montreal',sans-serif;letter-spacing:-.035em;color:#12373d;margin-bottom:18px}
.about-cta{margin-top:4px}
@keyframes about-photo-lift{from{opacity:0;transform:translateY(14px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(2deg)}}
@media(min-width:701px) and (max-width:1000px){.about-grid{column-gap:42px}.about-grid h1{font-size:clamp(46px,6vw,64px)}.about-portrait{margin-top:100px}.about-deboss{height:150px;top:-106px;left:-36px;width:calc(100% + 82px)}}
@media(max-width:700px){.about-grid{gap:38px}.about-grid h1{font-size:clamp(46px,10.5vw,70px)}.about-portrait{width:calc(100% - 24px);margin-top:54px}.about-deboss{top:-91px;left:-26px;height:145px;width:calc(100% + 52px);transform:rotate(-7deg)}.about-photo{border-radius:18px;transform:rotate(1.5deg);box-shadow:1px 2px 0 #41413d,2px 4px 0 #292a27,5px 8px 5px -3px #0006,12px 20px 22px -12px #0006,20px 30px 38px -20px #0004;animation-name:about-mobile-lift}.about-portrait figcaption{margin-top:30px;padding-left:4px}.about-story .about-lead{font-size:23px}.about-personal strong{font-size:28px}}
@keyframes about-mobile-lift{from{opacity:0;transform:translateY(12px) rotate(1.5deg)}to{opacity:1;transform:translateY(0) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.about-photo{animation:none}} .about-portrait{perspective:none}
.about-photo{animation:none;opacity:1;clip-path:none;transform:none;rotate:2deg}
.about-photo img{opacity:1}
@media(max-width:700px){.about-photo{animation:none;transform:none;rotate:1.5deg}} .about-photo{box-shadow:0 1px 2px #0005,5px 9px 8px -5px #0005,15px 23px 24px -12px #0006,30px 43px 48px -24px #0004}
.about-photo:after{box-shadow:inset 1px 1px 0 #ffffff40,inset -1px -1px 0 #0004}
.about-deboss{top:-154px}
.about-story .about-lead{font-size:clamp(21px,1.65vw,25px);line-height:1.55;max-width:44ch}
@media(min-width:701px) and (max-width:1000px){.about-deboss{top:-124px}}
@media(max-width:700px){.about-deboss{top:-105px}.about-photo{box-shadow:0 1px 2px #0004,5px 9px 8px -5px #0005,12px 20px 24px -13px #0005,20px 30px 36px -21px #0004}.about-story .about-lead{font-size:21px;line-height:1.55}} :root{--urbz-body-size:16px;--urbz-label-size:11px;--urbz-control-size:13px;--urbz-body-leading:1.8;--urbz-focus:#ff795f}
.site-header{mix-blend-mode:normal;color:#f0ece4}
.site-header.is-scrolled{background:rgba(16,19,20,.94)}
.site-header__logo img{mix-blend-mode:normal;filter:none}
.site-header__nav>a{font-family:'Nippo',sans-serif;font-size:var(--urbz-control-size)}
.site-header__nav>a:not(.site-header__cta){color:#f0ece4}
.site-header__nav>a[aria-current=page],.site-header__nav>a:not(.site-header__cta):hover{color:var(--urbz-focus)}
.site-header__nav>a:not(.site-header__cta):after{background:#ff4a2f}
.contact-send{font-family:'Nippo',sans-serif;font-size:var(--urbz-control-size);text-decoration:none;min-height:54px;padding:17px 27px;gap:15px;border-radius:40px}
.contact-send:before{left:27px}
.site-header__nav .site-header__cta.contact-send{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:11px 17px;border:0;border-radius:40px;background:#12373d;color:#f0ece4;line-height:1.4;box-shadow:0 4px 12px #0002;transition:color 350ms,transform 250ms!important}
.site-header__nav .site-header__cta.contact-send:before{left:17px}
.site-header__cta.contact-send span{color:inherit;transform:none;transition:none}
.site-header__cta.contact-send .contact-send-dot{width:6px;height:6px;flex-shrink:0;background:#ff4a2f}
.site-header__nav .site-header__cta.contact-send:hover,.site-header__nav .site-header__cta.contact-send:focus-visible{background:#12373d;color:#101314}
.hero-contact{margin-top:0}
.concept-copy>p,.service-content p,.services-heading>p,.urbz-process .process-steps p,.contact-copy>p,.about-story p,.compare-detail,.compare-accordion .compare-answer p{font-family:'Nippo',sans-serif;font-size:var(--urbz-body-size);line-height:var(--urbz-body-leading)}
.concept-copy>p{max-width:39ch}
.about-story .about-lead{font-family:'PP Neue Montreal',sans-serif;font-size:clamp(21px,1.65vw,25px);line-height:1.55}
.about-kicker,.contact-meta,.services-meta,.concept-top,.concept-foot,.about-portrait figcaption{font-family:'Nippo',sans-serif;font-size:var(--urbz-label-size);line-height:1.5;letter-spacing:.07em}
.compare-open,.service-content a,.footer-email,.footer-top{font-family:'Nippo',sans-serif;font-size:var(--urbz-control-size)}
.site-header a:focus-visible,.contact-send:focus-visible,.compare-open:focus-visible,.service-content a:focus-visible,.urbz-footer a:focus-visible{outline:2px solid var(--urbz-focus);outline-offset:5px}
.site-header__nav>a:not(.site-header__cta):focus-visible:after{opacity:1;transform:scaleX(1)}
@media(max-width:700px){:root{--urbz-body-size:15px;--urbz-label-size:10px}.about-story .about-lead{font-size:21px}.urbz-footer-inner{row-gap:24px}}
@media(prefers-reduced-motion:reduce){.site-header__nav .site-header__cta.contact-send{transition:none!important}} .about-inner{position:relative;z-index:1}
.about-waves{position:absolute;z-index:0;right:-3%;top:110px;width:43%;height:calc(100% - 110px);pointer-events:none;overflow:visible;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 90%,transparent)}
.about-waves use{fill:none;vector-effect:non-scaling-stroke}
.about-wave-grooves{stroke:#53635d;stroke-width:3;opacity:.23}
.about-wave-edges{stroke:#fffdf7;stroke-width:1.5;opacity:.9}
.about-wave-lights{stroke:#ff663f;stroke-width:2;stroke-linecap:round;opacity:.3;filter:drop-shadow(0 0 4px #ff4a2f55)}
.about-wave-lights use{stroke-dasharray:65 2300;animation:about-wave-travel 26s linear infinite}
.about-wave-lights use:nth-child(2){animation-delay:-6s}.about-wave-lights use:nth-child(3){animation-delay:-12s}.about-wave-lights use:nth-child(4){animation-delay:-18s}
@keyframes about-wave-travel{from{stroke-dashoffset:2365}to{stroke-dashoffset:0}}
@media(max-width:700px){.about-waves{right:-20%;width:90%;top:120px;height:950px;opacity:.65}}
@media(prefers-reduced-motion:reduce){.about-wave-lights use{animation:none;stroke-dashoffset:800}}
.about-waves{mask-image:linear-gradient(90deg,transparent,#000 25%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect} .home-grooves{position:relative;isolation:isolate;min-height:760px;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:117px var(--page-margin) 0;background:radial-gradient(ellipse at 15% 100%,#172426,transparent 55%),#101718;color:#f0ece4}
.home-grooves-surface{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}.home-grooves-surface use{fill:none}.home-grooves .cuts{stroke:#050b0c;stroke-width:5;opacity:.95}.home-grooves .edges{stroke:#698080;stroke-width:1.2;opacity:.32}
.home-grooves .orange,.home-grooves .orange-glow{stroke:#ff5a33;stroke-width:2.3;stroke-dasharray:145 3200;stroke-dashoffset:-950}.home-grooves .orange-glow{stroke-width:13;filter:url(#hero-groove-glow);opacity:.65}.home-grooves .orange use,.home-grooves .orange-glow use{animation:hero-groove-travel 28s linear infinite}.home-grooves .orange use:last-child,.home-grooves .orange-glow use:last-child{stroke-dasharray:65 3280;animation-delay:-13s}
@keyframes hero-groove-travel{from{stroke-dashoffset:-950}to{stroke-dashoffset:-4295}}
.home-grooves[data-paused=true] .orange use,.home-grooves[data-paused=true] .orange-glow use{animation-play-state:paused}
.home-grooves-grain{position:absolute;inset:0;z-index:-1;opacity:.04;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
.home-grooves-meta{display:flex;justify-content:space-between;font:9px Nippo,sans-serif;letter-spacing:.1em;color:#96acad}.home-grooves-statement{margin:auto 0;text-align:center;position:relative;padding:70px 0 35px}.home-grooves-statement>p{font:10px Nippo,sans-serif;letter-spacing:.12em;color:#b1c4c3;margin:0 0 30px}.home-grooves h1{font-family:'PP Neue Montreal',Arial,sans-serif;font-size:clamp(75px,9.3vw,170px);font-weight:500;letter-spacing:-.066em;line-height:.94;margin:0;text-shadow:0 4px 35px #101718}.home-grooves h1>span{display:block}.home-grooves h1>span:first-child{margin-left:-16%}.home-grooves h1>span:last-child{margin-left:13%}.home-grooves h1 em{font-style:normal;color:#a9c0be}
.home-grooves-bottom{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:15px 0 42px}.home-grooves-bottom>p{font:12px/1.8 Nippo,sans-serif;color:#aebfbf;margin:0;max-width:520px}.home-grooves-contact{font:500 22px 'PP Neue Montreal',sans-serif;display:flex;align-items:center;gap:17px;padding:15px 0;border-bottom:1px solid #718986;text-decoration:none;color:#f0ece4}.home-grooves-contact:hover{border-color:#ff542f}.home-grooves-contact i{width:7px;height:7px;background:#ff542f;border-radius:50%;box-shadow:0 0 18px #ff542f66}
.home-grooves-footer{border-top:1px solid #aec4c327;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;font:9px Nippo,sans-serif;color:#a6b9b8;letter-spacing:.06em}.home-grooves-footer a{color:inherit;text-decoration:none}.home-grooves-footer a span{margin-left:20px;color:#ff542f}.grooves-motion{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:4px}.home-grooves a:focus-visible,.grooves-motion:focus-visible{outline:2px solid #ff542f;outline-offset:6px}
@media(max-width:700px){.home-grooves{padding:96px 24px 0;min-height:720px}.home-grooves-meta{font-size:8px}.home-grooves-meta span:last-child{display:none}.home-grooves-surface{width:190%;left:-47%;opacity:.85}.home-grooves-statement{text-align:left;padding-top:110px;padding-bottom:75px}.home-grooves-statement>p{font-size:8px;margin-bottom:23px}.home-grooves h1{font-size:clamp(42px,10.8vw,72px);line-height:1}.home-grooves h1>span:first-child,.home-grooves h1>span:last-child{margin-left:0}.home-grooves-bottom{display:block;padding-bottom:29px}.home-grooves-bottom>p{font-size:11px;max-width:320px}.home-grooves-bottom>p br{display:none}.home-grooves-contact{font-size:20px;width:max-content;margin-top:18px}.home-grooves-footer{font-size:8px;gap:12px}.home-grooves-footer>span{display:none}}
@media(prefers-reduced-motion:reduce){.home-grooves .orange use,.home-grooves .orange-glow use{animation:none}} .urbz-home{position:relative;isolation:isolate;overflow:clip}
.home-edge-grooves{position:absolute;z-index:5;pointer-events:none;top:65svh;right:-6%;width:15%;height:calc(100% - 65svh);overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 80px),transparent)}
.home-edge-grooves use{fill:none;vector-effect:non-scaling-stroke}
.edge-cuts{stroke:#07191b;stroke-width:3;opacity:.22}
.edge-rims{stroke:#d4e4df;stroke-width:1;opacity:.22;transform:translate(1.5px,1px)}
.edge-light{stroke:#ff623d;stroke-width:1.6;opacity:.5;filter:drop-shadow(0 0 4px #ff542f80)}
.edge-light use{stroke-dasharray:100 4400;animation:home-edge-travel 38s linear infinite}
.edge-light use:last-child{animation-delay:-19s}
@keyframes home-edge-travel{from{stroke-dashoffset:4500}to{stroke-dashoffset:0}}
.urbz-home:has(.home-grooves[data-paused=true]) .edge-light use{animation-play-state:paused}
.home-grooves-bottom{justify-content:flex-start;align-items:flex-end;gap:clamp(55px,9vw,160px);padding:18px 0 38px;margin-left:8%;max-width:1050px}
.home-grooves-bottom>p{max-width:490px;font-size:15px;line-height:1.6}
.home-grooves-bottom strong{display:block;font:500 clamp(23px,2.1vw,32px)/1.15 'PP Neue Montreal',sans-serif;letter-spacing:-.025em;color:#f0ece4;margin-bottom:14px}
.home-grooves-bottom>p>span{display:block;max-width:44ch}
.home-grooves-contact{flex-shrink:0;font-size:24px;margin-bottom:3px;transition:border-color .3s,color .3s}
.home-grooves-contact:hover{color:#ff795f}
@media(max-width:900px){.home-grooves-bottom{margin-left:0;gap:35px}.home-grooves-contact{font-size:21px}}
@media(max-width:700px){.home-grooves{height:auto;min-height:100svh}.home-grooves-statement{padding-top:95px;padding-bottom:65px}.home-grooves-bottom{padding-bottom:30px;display:block}.home-grooves-bottom>p{font-size:14px;max-width:300px}.home-grooves-bottom strong{font-size:24px;max-width:270px}.home-grooves-bottom strong br{display:none}.home-grooves-contact{margin-top:24px;font-size:21px}.home-edge-grooves{width:22%;right:-13%;opacity:.65}}
@media(prefers-reduced-motion:reduce){.edge-light use{animation:none}} .home-continuous-grooves{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:hidden}
.home-continuous-grooves use{fill:none}
.home-continuous-grooves .cuts{stroke:#02090a;stroke-width:5;opacity:.62}
.home-continuous-grooves .edges{stroke:#9db2af;stroke-width:1.2;opacity:.34}
.home-continuous-grooves .orange,.home-continuous-grooves .orange-glow{stroke:#ff5a33;stroke-width:2.3;stroke-dasharray:145 9000}
.home-continuous-grooves .orange-glow{stroke-width:13;filter:url(#hero-groove-glow);opacity:.65}
.home-continuous-grooves .orange use,.home-continuous-grooves .orange-glow use{animation:home-continuous-travel 58s linear infinite}
.home-continuous-grooves .orange use:last-child,.home-continuous-grooves .orange-glow use:last-child{animation-delay:-29s}
@keyframes home-continuous-travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-9145}}
.urbz-home:has(.home-grooves[data-paused=true]) .home-continuous-grooves use{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.home-continuous-grooves use{animation:none!important}} .home-continuous-grooves.grooves-source{width:0;height:0;overflow:hidden}
.urbz-home>section{position:relative;overflow:hidden}
.urbz-home>section>.grooves-panel{z-index:0;max-height:none}
.urbz-home>section>:not(.grooves-panel):not(.home-grooves-grain){position:relative;z-index:1}
.studio-showcase>.grooves-panel .cuts,.urbz-process>.grooves-panel .cuts{opacity:.22}
.studio-showcase>.grooves-panel .edges,.urbz-process>.grooves-panel .edges{stroke:#fffdf7;opacity:.9} .urbz-entrance{position:fixed;inset:0;z-index:99999;pointer-events:none;animation:entrance-failsafe 0s 5s forwards}
.urbz-entrance-backdrop{position:absolute;inset:0;background:#101718}
.urbz-entrance-logo{position:absolute;left:50%;top:50%;width:min(54vw,680px);height:auto;transform:translate(-50%,-50%)}
body.entrance-active .site-header__logo{visibility:hidden}
@keyframes entrance-failsafe{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.urbz-entrance{display:none}} .home-grooves-statement h1{text-shadow:0 2px 1px #0003,0 10px 28px #0005,0 25px 65px #0003}
.contact-copy h2{text-shadow:0 3px 2px #0002,0 12px 32px #0004}
.contact-field input,.contact-field textarea{padding:12px 14px;border:1px solid #a6b9bb45;border-bottom-color:#a6b9bb99;border-radius:7px;background:#0c171a55;box-shadow:inset 0 2px 5px #0002,0 8px 22px #00000018;transition:border-color .2s,box-shadow .2s}
.contact-field input:focus,.contact-field textarea:focus{border-color:#ff795f;outline:2px solid #ff795f66;outline-offset:3px;box-shadow:0 5px 24px #0003}
.concept-more{display:inline-flex;align-items:center;gap:22px;margin-top:25px;padding:8px 0;border-bottom:1px solid #12373d66;color:#12373d;font:400 13px/1.5 Nippo,sans-serif;text-decoration:none}
.concept-more span{color:#ff4a2f}.concept-more:hover{border-color:#ff4a2f}.concept-more:focus-visible{outline:2px solid #ff4a2f;outline-offset:5px}
.about-photo img{filter:brightness(1.36) contrast(1.015)}
.site-header__nav>a[aria-current=location]{color:#ff795f}