@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--c-concrete: oklch(95.6% 0.007 95);
--c-concrete-2: oklch(91.8% 0.01 95);
--c-paper: oklch(98.8% 0.004 95);
--c-line: oklch(84.5% 0.012 95);
--c-line-strong: oklch(72% 0.014 110);
--c-ink: oklch(20.5% 0.014 125);
--c-ink-2: oklch(40% 0.016 125);
--c-night: oklch(17.5% 0.012 125);
--c-night-2: oklch(22.5% 0.014 125);
--c-night-3: oklch(28% 0.016 125);
--c-night-line: oklch(35% 0.017 125);
--c-on-night: oklch(95.5% 0.006 95);
--c-on-night-2: oklch(78% 0.014 100);
--c-signal: oklch(87% 0.172 94);        
--c-signal-hover: oklch(91.5% 0.15 98);
--c-signal-ink: oklch(20.5% 0.014 125);
--c-mandatory: oklch(51% 0.2 27);       
--c-mandatory-soft: oklch(95% 0.03 27);
--c-edge: oklch(64% 0.17 256);          
--c-olive: oklch(46% 0.07 124);
--c-olive-soft: oklch(92% 0.035 118);
--c-ok: oklch(52% 0.13 152);
--c-ok-soft: oklch(94% 0.04 152);
--font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
--font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--text-xs: 0.8125rem;
--text-sm: 0.9375rem;
--text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--text-lg: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
--text-h4: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
--text-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
--text-h2: clamp(2.125rem, 1.45rem + 3vw, 3.875rem);
--text-h1: clamp(2.625rem, 1.35rem + 5.7vw, 6.5rem);
--text-mega: clamp(4.5rem, 1.5rem + 13vw, 12.5rem);
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.25rem;
--space-xl: 3.5rem;
--space-2xl: 5rem;
--space-section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
--gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
--container: 80rem;
--container-narrow: 48rem;
--header-h: 4.25rem;
--frame-offset: clamp(0.5rem, 0.2rem + 1.5vw, 1.25rem);
--radius-0: 0;
--radius-1: 3px;
--radius-2: 10px;
--shadow-1: 0 1px 2px oklch(20% 0.02 125 / 0.08), 0 6px 16px -6px oklch(20% 0.02 125 / 0.14);
--shadow-2: 0 2px 6px oklch(20% 0.02 125 / 0.1), 0 24px 48px -20px oklch(20% 0.02 125 / 0.38);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 750ms;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--grain: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 64em) {
:root { --header-h: 4.75rem; }
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--c-ink);
background: var(--c-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main { flex: 1; }
main:focus { outline: none; }
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.005em;
text-wrap: balance;
}
[hidden] { display: none !important; }
p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
p { text-wrap: pretty; }
:where(ul[class], ol[class], nav ul, nav ol) { list-style: none; padding: 0; margin: 0; }
.hero__media > picture,
.page-hero__media > picture,
.tile__media > picture,
.pkg__media > picture,
.facade__thumb { height: 100%; }
strong { font-weight: 600; }
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible {
outline: 3px solid var(--c-edge);
outline-offset: 3px;
}
::selection { background: var(--c-signal); color: var(--c-signal-ink); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--space-sm);
top: var(--space-sm);
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--c-signal);
color: var(--c-signal-ink);
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { transform: none; }
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--narrow-wide { max-width: calc(66rem + 2 * var(--gutter)); }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.stats__value,
.hours__list { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
.reveal-pending { opacity: 0; transform: translateY(28px); }
.reveal-pending.is-revealed {
opacity: 1;
transform: none;
transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo);
}
.reveal-pending.is-revealed:nth-child(3n + 2) { transition-delay: 70ms; }
.reveal-pending.is-revealed:nth-child(3n + 3) { transition-delay: 140ms; }
}
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--c-night);
color: var(--c-on-night);
border-bottom: 1px solid var(--c-night-line);
transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -14px oklch(0% 0 0 / 0.65); }
.site-header__bar {
display: flex;
align-items: center;
gap: var(--space-md);
min-height: var(--header-h);
}
.brand { display: inline-flex; flex: none; margin-right: auto; }
.brand img { height: 2.25rem; width: auto; }
@media (min-width: 64em) { .brand img { height: 2.6rem; } }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__list { display: flex; gap: clamp(0.75rem, 1.5vw, 1.75rem); }
.site-nav__link {
position: relative;
display: block;
padding-block: 0.55rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-on-night-2);
text-decoration: none;
transition: color var(--duration-fast);
}
.site-nav__link::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 3px;
background: var(--c-signal);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-normal) var(--ease-out-expo);
}
.site-nav__link:hover,
.site-nav__link[aria-current='page'] { color: var(--c-on-night); }
.site-nav__link:hover::after,
.site-nav__link[aria-current='page']::after { transform: scaleX(1); }
.site-nav__tools { display: flex; align-items: center; gap: var(--space-sm); }
.site-nav__phone {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
white-space: nowrap;
color: var(--c-on-night);
text-decoration: none;
}
.site-nav__phone .icon { color: var(--c-signal); width: 1.1em; height: 1.1em; }
.site-nav__phone:hover { text-decoration: underline; }
.lang-switch ul { display: flex; border: 1px solid var(--c-night-line); }
.lang-switch a {
display: block;
padding: 0.45rem 0.6rem;
font: 700 0.875rem/1 var(--font-display);
letter-spacing: 0.1em;
color: var(--c-on-night-2);
text-decoration: none;
}
.lang-switch a[aria-current] { background: var(--c-on-night); color: var(--c-night); }
.lang-switch a:not([aria-current]):hover { color: var(--c-on-night); background: var(--c-night-3); }
.nav-toggle { display: none; }
@media (min-width: 72em) and (max-width: 82em) {
.site-nav__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 71.99em) {
.nav-toggle {
display: inline-grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
padding: 0;
color: var(--c-on-night);
background: transparent;
border: 1px solid var(--c-night-line);
border-radius: var(--radius-1);
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle__close,
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }
.site-nav {
position: fixed;
inset: var(--header-h) 0 0;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-md) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom));
overflow-y: auto;
background: var(--c-night) var(--grain);
visibility: hidden;
opacity: 0;
transform: translateY(-0.75rem);
transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
}
.site-header.is-open .site-nav {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-slow) var(--ease-out-expo);
}
.site-nav__list { flex-direction: column; gap: 0; }
.site-nav__link {
padding-block: 0.7rem;
font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.5rem);
font-weight: 700;
color: var(--c-on-night);
border-bottom: 1px solid var(--c-night-line);
}
.site-nav__link::after { display: none; }
.site-nav__link[aria-current='page'] { color: var(--c-signal); }
.site-nav__tools { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.site-nav__phone { font-size: 1.35rem; }
.site-nav__tools .btn { justify-content: center; min-height: 3.25rem; }
.lang-switch ul { width: fit-content; }
}
html.nav-open { overflow: hidden; }
.section { position: relative; padding-block: var(--space-section); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section--flush-top { padding-top: 0; }
.section--concrete { background: var(--c-concrete); }
.section--night { background: var(--c-night) var(--grain); color: var(--c-on-night); }
.section-head {
display: grid;
gap: var(--space-sm);
max-width: 54rem;
margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.75rem);
}
.section-head__title { font-size: var(--text-h2); text-transform: uppercase; }
.section-head__lead { max-width: 42rem; font-size: var(--text-lg); line-height: 1.5; color: var(--c-ink-2); }
.section--night .section-head__lead { color: var(--c-on-night-2); }
.split { display: grid; gap: var(--space-lg); }
@media (min-width: 64em) {
.split { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: start; }
.split > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.feature { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64em) { .feature { grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); } }
.form-layout { display: grid; gap: var(--space-lg); }
@media (min-width: 64em) {
.form-layout { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: start; }
.form-layout > .section-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.contact-layout { display: grid; gap: var(--space-lg); }
@media (min-width: 64em) { .contact-layout { grid-template-columns: minmax(18rem, 5fr) 7fr; align-items: start; } }
.site-footer {
position: relative;
font-size: var(--text-sm);
color: var(--c-on-night-2);
background: var(--c-night) var(--grain);
padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
}
.site-footer__threshold {
height: 1.1rem;
background: repeating-linear-gradient(90deg, var(--c-on-night) 0 0.75rem, transparent 0.75rem 1.6rem);
opacity: 0.85;
}
.site-footer__grid {
display: grid;
gap: var(--space-xl) var(--space-lg);
padding-block: var(--space-2xl) var(--space-xl);
}
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; } }
.brand--footer img { height: 3rem; }
.site-footer__brand p { max-width: 22rem; margin-top: var(--space-sm); }
.site-footer__coords {
font: 600 var(--text-xs)/1 var(--font-display);
letter-spacing: 0.16em;
color: var(--c-signal);
}
.site-footer__heading {
margin-bottom: var(--space-sm);
font: 700 var(--text-sm)/1 var(--font-display);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-on-night);
}
.site-footer__col > ul { display: grid; gap: 0.55rem; }
.site-footer a { color: var(--c-on-night-2); text-decoration: none; }
.site-footer a:hover { color: var(--c-on-night); text-decoration: underline; }
.site-footer li a { display: inline-flex; align-items: center; gap: 0.4rem; }
.site-footer address { display: grid; gap: 0.5rem; margin-bottom: var(--space-md); font-style: normal; }
.site-footer__phone,
.site-footer__mail { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer .icon { width: 1.1em; height: 1.1em; color: var(--c-signal); }
.site-footer .hours__title { font-size: 1.1rem; color: var(--c-on-night); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding-block: 1.25rem;
font-size: var(--text-xs);
background: linear-gradient(var(--c-night-line), var(--c-night-line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.action-bar {
position: fixed;
inset: auto 0 0;
z-index: 40;
display: grid;
grid-template-columns: 1fr 1.4fr;
padding-bottom: env(safe-area-inset-bottom);
background: var(--c-night);
border-top: 1px solid var(--c-night-line);
transition: transform var(--duration-normal) var(--ease-out-expo);
}
.action-bar a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3.5rem;
font: 700 1.05rem/1 var(--font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
.action-bar__call { color: var(--c-on-night); }
.action-bar__call .icon { color: var(--c-signal); }
.action-bar__book { background: var(--c-signal); color: var(--c-signal-ink); }
.nav-open .action-bar { transform: translateY(100%); }
@media (min-width: 48em) {
.action-bar { display: none; }
.site-footer { padding-bottom: 0; }
}
.sign {
display: inline-flex;
width: fit-content;
font: 700 var(--text-sm)/1 var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sign__code { padding: 0.5em 0.6em 0.42em; background: var(--c-signal); color: var(--c-night); }
.sign__text {
padding: 0.5em 0.85em 0.42em;
background: var(--c-night);
color: var(--c-signal);
box-shadow: inset 0 0 0 1.5px var(--c-signal);
}
.btn {
--btn-bg: var(--c-signal);
--btn-fg: var(--c-signal-ink);
--btn-border: var(--btn-bg);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 3rem;
padding: 0.72em 1.35em 0.66em;
font: 700 1.0625rem/1 var(--font-display);
letter-spacing: 0.07em;
text-transform: uppercase;
text-decoration: none;
color: var(--btn-fg);
background: var(--btn-bg);
border: 2px solid var(--btn-border);
border-radius: var(--radius-1);
cursor: pointer;
transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast),
transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-normal);
}
.btn__icon { width: 1.1em; height: 1.1em; transition: transform var(--duration-normal) var(--ease-out-expo); }
.btn:hover { text-decoration: none; }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--signal:hover { --btn-bg: var(--c-signal-hover); box-shadow: 0 10px 24px -12px oklch(87% 0.172 94 / 0.8); }
.btn--ghost {
--btn-bg: transparent;
--btn-fg: currentColor;
--btn-border: color-mix(in oklch, currentColor 45%, transparent);
}
.btn--ghost:hover { --btn-border: currentColor; background: color-mix(in oklch, currentColor 10%, transparent); }
.btn--ink { --btn-bg: var(--c-ink); --btn-fg: var(--c-paper); }
.btn--ink:hover { --btn-bg: var(--c-olive); }
.btn--text {
--btn-bg: transparent;
--btn-fg: currentColor;
--btn-border: transparent;
min-height: 2.5rem;
padding-inline: 0.2em;
}
.btn--text span { text-decoration: underline 2px transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--duration-fast); }
.btn--text:hover span { text-decoration-color: currentColor; }
.btn--compact { min-height: 2.6rem; padding: 0.55em 1em 0.5em; font-size: 0.975rem; }
a.btn[href^='#']:hover .btn__icon { transform: translateY(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; text-decoration: none; }
.link-arrow .icon { width: 1em; height: 1em; transition: transform var(--duration-normal) var(--ease-out-expo); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.rail__track { position: relative; }
.rail__ticks { width: 100%; height: 1.5rem; }
.rail__ticks line { stroke: var(--c-line-strong); stroke-width: 1.5; }
.rail__ticks .rail__base { stroke: var(--c-ink); stroke-width: 2; }
.rail__stops {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
padding-bottom: 0.35rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.rail__btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.9rem;
font: 700 1.125rem/1 var(--font-display);
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--c-ink);
text-decoration: none;
background: var(--c-paper);
border: 1.5px solid var(--c-ink);
scroll-snap-align: start;
transition: background-color var(--duration-fast), color var(--duration-fast);
}
.rail__marker {
width: 0.7rem;
height: 0.7rem;
flex: none;
background: var(--c-signal);
border: 1.5px solid var(--c-ink);
transform: rotate(45deg);
transition: transform var(--duration-normal) var(--ease-out-expo), background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.rail__btn[aria-selected='true'] { background: var(--c-ink); color: var(--c-signal); }
@media (min-width: 48em) {
.rail__track { height: 6rem; }
.rail__ticks { position: absolute; inset: 0 0 auto; height: 2rem; }
.rail__stops { position: absolute; inset: 0; display: block; margin: 0; overflow: visible; }
.rail__stop { position: absolute; top: 1.35rem; transform: translateX(-50%); }
.rail__stop--d25 { left: 9.01%; }
.rail__stop--box { left: 19.58%; }
.rail__stop--d100 { left: 40.16%; }
.rail__stop--d300 { left: 64.85%; }
.rail__stop--d1200 { left: 96%; }
.rail__btn {
flex-direction: column;
gap: 0.6rem;
padding: 0 0.25rem 0.25rem;
font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.75rem);
background: transparent;
border: 0;
border-bottom: 3px solid transparent;
}
.rail__marker { width: 1.1rem; height: 1.1rem; }
.rail__btn:hover .rail__marker { transform: rotate(45deg) scale(1.25); }
.rail__btn[aria-selected='true'] { background: transparent; color: var(--c-ink); border-bottom-color: var(--c-signal); }
.rail__btn[aria-selected='true'] .rail__marker {
background: var(--c-ink);
box-shadow: 0 0 0 4px var(--c-signal);
transform: rotate(45deg) scale(1.2);
}
}
.rail__panel {
display: grid;
gap: var(--space-md) var(--space-xl);
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
background: var(--c-paper);
border: 1px solid var(--c-line);
box-shadow: var(--shadow-1);
}
.rail__panel + .rail__panel { margin-top: var(--space-sm); }
.rail__panel:focus { outline: none; }
.rail__panel.is-active { animation: panel-in var(--duration-slow) var(--ease-out-expo); }
@media (min-width: 48em) { .rail__panel { grid-template-columns: minmax(13rem, 0.8fr) 1.2fr; align-items: center; } }
.rail__meters {
font: 700 var(--text-mega)/0.8 var(--font-display);
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 2px var(--c-ink);
}
.rail__meters span { margin-left: 0.08em; font-size: 0.32em; color: var(--c-ink-2); -webkit-text-stroke: 0; }
.rail__title { margin-bottom: 0.5rem; font-size: var(--text-h3); text-transform: uppercase; }
.rail__body > p { max-width: 36rem; color: var(--c-ink-2); }
.rail__body > .actions { margin-top: var(--space-md); }
@keyframes panel-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.bento { display: grid; gap: var(--space-sm); }
@media (min-width: 48em) {
.bento { grid-template-columns: repeat(2, 1fr); }
.tile--hero,
.tile--wide { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
.bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(16rem, auto); }
.tile--hero { grid-column: 1 / 8; grid-row: span 2; }
.tile--photo { grid-column: 8 / 13; }
.tile--wide { grid-column: 1 / 13; }
}
.tile {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 20rem;
overflow: hidden;
color: var(--c-on-night);
background: var(--c-night);
}
.tile::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, oklch(17.5% 0.012 125 / 0.05) 15%, oklch(17.5% 0.012 125 / 0.92) 100%);
}
.tile--wide { min-height: 18rem; }
.tile--wide::before { background: linear-gradient(90deg, oklch(17.5% 0.012 125 / 0.96) 35%, oklch(17.5% 0.012 125 / 0.35)); }
.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--ease-out-expo);
}
.tile:hover .tile__media img { transform: scale(1.045); }
.tile__body { display: grid; gap: 0.6rem; max-width: 36rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.tile--wide .tile__body { max-width: 50rem; }
.tile__title { font-size: var(--text-h3); text-transform: uppercase; }
.tile--hero .tile__title { font-size: var(--text-h2); }
.tile__body > p { color: var(--c-on-night-2); }
.tile__link { text-decoration: none; }
.tile__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tile__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible) { outline: 3px solid var(--c-edge); outline-offset: 3px; }
.tile__more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.35rem;
font: 700 1rem/1 var(--font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-signal);
}
.tile__more .icon { width: 1em; height: 1em; transition: transform var(--duration-normal) var(--ease-out-expo); }
.tile:hover .tile__more .icon { transform: translateX(4px); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 0.35rem; }
.tags li {
padding: 0.5rem 0.7rem 0.45rem;
font: 600 var(--text-xs)/1 var(--font-display);
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
}
.facilities {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
border-top: 1px solid var(--c-line);
border-left: 1px solid var(--c-line);
}
.facility {
display: grid;
align-content: start;
gap: 0.5rem;
padding: var(--space-md) var(--space-md) var(--space-lg);
border-right: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
transition: background-color var(--duration-normal);
}
.facility:hover { background: var(--c-concrete); }
.section--concrete .facility:hover { background: var(--c-paper); }
.facility__icon { width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; color: var(--c-olive); }
.facility__title { font-size: var(--text-h4); text-transform: uppercase; }
.facility p { font-size: var(--text-sm); color: var(--c-ink-2); }
.callout {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-top: var(--space-lg);
padding: var(--space-md);
color: var(--c-ink);
background: var(--c-olive-soft);
border: 1px solid color-mix(in oklch, var(--c-olive) 35%, transparent);
}
.callout__icon {
width: 2.5rem;
height: 2.5rem;
padding: 0.5rem;
color: var(--c-paper);
background: var(--c-olive);
}
.callout__body { display: grid; gap: 0.35rem; justify-items: start; padding-top: 0.15rem; }
.callout__title { font: 700 var(--text-h4)/1.1 var(--font-display); text-transform: uppercase; }
.callout--mandatory {
color: oklch(98.5% 0.01 27);
background: var(--c-mandatory);
border: 0;
box-shadow: inset 0 0 0 5px var(--c-mandatory), inset 0 0 0 6.5px oklch(98.5% 0.01 27 / 0.85);
}
.callout--mandatory .callout__icon { color: var(--c-mandatory); background: oklch(98.5% 0.01 27); }
.steps { display: grid; gap: var(--space-lg); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-md) 0; } }
.steps__item { display: grid; align-content: start; gap: 0.6rem; padding-right: var(--space-md); }
.steps__num { display: flex; align-items: center; gap: 0.75rem; font: 700 3.5rem/1 var(--font-display); color: var(--c-ink); }
@media (min-width: 48em) {
.steps__item:not(:last-child) .steps__num::after {
content: '';
flex: 1;
height: 2px;
background: repeating-linear-gradient(90deg, var(--c-signal-ink) 0 0.6rem, transparent 0.6rem 1.1rem);
opacity: 0.35;
}
}
.steps__title { font-size: var(--text-h4); text-transform: uppercase; }
.steps__item p { color: var(--c-ink-2); }
.teaser { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 48em) { .teaser { grid-template-columns: 1fr auto; gap: var(--space-xl); } }
.teaser__title { margin-bottom: 0.5rem; font-size: var(--text-h3); text-transform: uppercase; }
.teaser p { max-width: 44rem; color: var(--c-on-night-2); }
.cta-band { position: relative; overflow: hidden; color: var(--c-signal-ink); background: var(--c-signal); }
.cta-band::after {
content: '';
position: absolute;
inset: 0 0 0 auto;
width: 34%;
background: repeating-linear-gradient(90deg, oklch(20.5% 0.014 125 / 0.08) 0 1.25rem, transparent 1.25rem 2.5rem);
pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-lg); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
@media (min-width: 64em) { .cta-band__inner { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.cta-band__title { font-size: var(--text-h2); text-transform: uppercase; }
.cta-band__copy p { max-width: 34rem; margin-top: 0.75rem; font-size: var(--text-lg); }
.cta-band__actions { display: grid; justify-items: start; gap: 0.6rem; }
@media (min-width: 64em) { .cta-band__actions { justify-items: end; } }
.cta-band__phone {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font: 700 clamp(1.75rem, 1.2rem + 2.2vw, 3rem)/1 var(--font-display);
text-decoration: none;
}
.cta-band__phone:hover { text-decoration: underline; }
.cta-band__phone--small { font-size: var(--text-h4); opacity: 0.8; }
.cta-band .btn--ghost { margin-top: 0.4rem; }
.partners {
padding-block: var(--space-lg);
color: var(--c-on-night);
background: var(--c-night-2) var(--grain);
border-top: 1px solid var(--c-night-line);
}
.partners__inner { display: grid; align-items: center; gap: var(--space-sm) var(--space-xl); }
@media (min-width: 48em) { .partners__inner { grid-template-columns: auto 1fr; } }
.partners__title {
font: 700 var(--text-sm)/1 var(--font-display);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-on-night-2);
}
.partners__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.partners__link {
display: block;
opacity: 0.75;
text-decoration: none;
transition: opacity var(--duration-normal);
}
.partners__link:hover { opacity: 1; }
.partners__logo { width: auto; height: 2.25rem; max-width: 9rem; object-fit: contain; }
.partners__wordmark { display: grid; font-family: var(--font-display); line-height: 1; }
.partners__wordmark strong { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.partners__wordmark small { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.specs { border-top: 2px solid var(--c-ink); }
.specs__row { display: grid; gap: 0.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--c-line); }
@media (min-width: 40em) { .specs__row { grid-template-columns: 12rem 1fr; gap: 1.5rem; } }
.specs dt { font: 700 var(--text-h4)/1.1 var(--font-display); text-transform: uppercase; }
.specs dd { color: var(--c-ink-2); }
.feature__media { position: relative; isolation: isolate; }
.feature__media::after {
content: '';
position: absolute;
inset: var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset)) var(--frame-offset);
z-index: -1;
border: 2px solid var(--c-signal);
}
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__body .section-head { margin-bottom: var(--space-md); }
.feature__text { max-width: 38rem; margin-bottom: var(--space-md); font-size: var(--text-lg); color: var(--c-ink-2); }
.distance-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); }
.distance-chips li {
padding: 0.6rem 0.85rem 0.55rem;
font: 700 1.125rem/1 var(--font-display);
letter-spacing: 0.06em;
color: var(--c-signal);
background: var(--c-night);
}
.packages { display: grid; gap: var(--space-md); }
@media (min-width: 44em) { .packages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .packages { grid-template-columns: repeat(3, 1fr); align-items: start; padding-top: 1.25rem; } }
.pkg {
display: flex;
flex-direction: column;
background: var(--c-paper);
border: 1px solid var(--c-line);
box-shadow: var(--shadow-1);
transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal);
}
.pkg:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pkg--featured { border-top: 5px solid var(--c-signal); }
@media (min-width: 64em) {
.pkg--featured { transform: translateY(-1.25rem); box-shadow: var(--shadow-2); }
.pkg--featured:hover { transform: translateY(calc(-1.25rem - 4px)); }
}
.pkg__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo); }
.pkg:hover .pkg__media img { transform: scale(1.04); }
.pkg__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.5rem 0.65rem 0.45rem;
font: 700 var(--text-xs)/1 var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-signal-ink);
background: var(--c-signal);
}
.pkg__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: var(--space-md); }
.pkg__title { font-size: var(--text-h3); text-transform: uppercase; }
.pkg__title a { text-decoration: none; }
.pkg__title a:hover { text-decoration: underline; }
.pkg__subtitle { margin-top: -0.35rem; color: var(--c-ink-2); }
.pkg__table { border-top: 2px solid var(--c-ink); }
.pkg__cols,
.pkg__guns li,
.pkg__total { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--c-line); }
.pkg__cols { font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-2); }
.pkg__shots { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg__total { align-items: baseline; border-bottom: 0; font-weight: 600; }
.pkg__total strong { font: 700 1.6rem/1 var(--font-display); }
.pkg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: auto; padding-top: 0.5rem; }
.table-wrap {
overflow-x: auto;
background:
linear-gradient(90deg, var(--c-paper) 30%, transparent) left / 2.5rem 100% no-repeat local,
linear-gradient(270deg, var(--c-paper) 30%, transparent) right / 2.5rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, oklch(20% 0.02 125 / 0.22), transparent) left / 0.9rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, oklch(20% 0.02 125 / 0.22), transparent) right / 0.9rem 100% no-repeat scroll,
var(--c-paper);
border: 1px solid var(--c-line);
}
.compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--c-paper); }
.compare th,
.compare td { padding: 0.95rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.compare thead th,
.compare thead td { background: var(--c-night); color: var(--c-on-night); }
.compare thead th { font: 700 var(--text-h4)/1.1 var(--font-display); text-transform: uppercase; }
.compare thead a { text-decoration: none; }
.compare thead a:hover { text-decoration: underline; }
.compare tbody th { width: 12rem; font-size: var(--text-sm); font-weight: 600; color: var(--c-ink-2); }
.compare td.is-featured { background: oklch(96.5% 0.05 94); }
.compare thead th.is-featured { color: var(--c-signal-ink); background: var(--c-signal); }
.compare strong { font: 700 1.35rem/1 var(--font-display); }
.guns { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-ink); font-variant-numeric: tabular-nums; }
.guns th,
.guns td { padding: 0.8rem 0; text-align: left; border-bottom: 1px solid var(--c-line); }
.guns th:last-child,
.guns td:last-child { text-align: right; }
.guns thead th { font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-2); }
.guns tfoot th,
.guns tfoot td { font: 700 var(--text-h4)/1 var(--font-display); text-transform: uppercase; border-bottom: 0; }
.pkg-detail { display: grid; gap: var(--space-xl); }
@media (min-width: 64em) { .pkg-detail { grid-template-columns: 1fr 22rem; gap: var(--space-2xl); align-items: start; } }
.pkg-detail__heading { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-h3); text-transform: uppercase; }
.pkg-detail__heading:first-child { margin-top: 0; }
.pkg-detail__aside { display: grid; gap: var(--space-sm); }
@media (min-width: 64em) { .pkg-detail__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.book-card {
display: grid;
gap: 0.85rem;
padding: var(--space-md);
color: var(--c-on-night);
background: var(--c-night) var(--grain);
border-top: 5px solid var(--c-signal);
}
.book-card__label { font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-night-2); }
.book-card__shots { display: flex; align-items: baseline; gap: 0.6rem; }
.book-card__shots strong { font: 700 3.25rem/1 var(--font-display); color: var(--c-signal); font-variant-numeric: tabular-nums; }
.book-card__shots span { font-size: var(--text-sm); color: var(--c-on-night-2); }
.book-card .btn { width: 100%; }
.book-card__phone { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; text-decoration: none; }
.book-card__phone .icon { color: var(--c-signal); }
.book-card__phone:hover { text-decoration: underline; }
.side-card { padding: var(--space-md); background: var(--c-concrete); border: 1px solid var(--c-line); }
.side-card__title { margin-bottom: 0.5rem; font-size: var(--text-h4); text-transform: uppercase; }
.side-card__list { display: grid; gap: 0.35rem; }
.checklist { display: grid; gap: 0.6rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.6rem; }
.checklist .icon { margin-top: 0.2em; color: var(--c-olive); }
.checklist--light .icon { color: var(--c-signal); }
.hours { display: grid; gap: 0.75rem; }
.hours__title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-h4); text-transform: uppercase; }
.hours__title .icon { color: var(--c-olive); }
.hours__status {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
width: fit-content;
padding: 0.35rem 0.75rem 0.35rem 0.6rem;
font-size: var(--text-sm);
font-weight: 600;
color: oklch(34% 0.1 152);
background: var(--c-ok-soft);
border-radius: 999px;
}
.hours__status::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-ok); }
.hours__status.is-closed { color: oklch(40% 0.16 27); background: var(--c-mandatory-soft); }
.hours__status.is-closed::before { background: var(--c-mandatory); }
.hours__list { display: grid; }
.hours__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.4rem; border-bottom: 1px dashed var(--c-line); }
.hours__row dd { white-space: nowrap; }
.hours__row.is-today { font-weight: 600; }
.hours__today {
margin-left: 0.4rem;
padding: 0.15rem 0.4rem;
font: 700 0.7rem/1 var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
vertical-align: 0.15em;
color: var(--c-signal-ink);
background: var(--c-signal);
}
.hours__note { font-size: var(--text-xs); color: var(--c-ink-2); }
.site-footer .hours__row { border-color: var(--c-night-line); }
.site-footer .hours__note { color: var(--c-on-night-2); }
.site-footer .hours__status { color: oklch(86% 0.1 152); background: oklch(52% 0.13 152 / 0.2); }
.site-footer .hours__status.is-closed { color: oklch(84% 0.08 27); background: oklch(51% 0.2 27 / 0.25); }
.map__frame {
position: relative;
display: grid;
min-height: 26rem;
overflow: hidden;
color: var(--c-on-night);
background: var(--c-night-2) var(--grain);
}
@media (min-width: 64em) { .map__frame { min-height: 30rem; } }
.map__art {
position: absolute;
inset: 0;
background-image: linear-gradient(var(--c-night-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-night-line) 1px, transparent 1px);
background-size: 3rem 3rem;
}
.map__runway {
position: absolute;
left: 58%;
top: 42%;
width: 72%;
height: 2.6rem;
background: var(--c-night-3);
border: 1px solid oklch(42% 0.02 125);
transform: translate(-50%, -50%) rotate(-14deg);
}
.map__runway::after {
content: '';
position: absolute;
inset: 50% 4% auto;
height: 2px;
background: repeating-linear-gradient(90deg, oklch(95% 0.006 95 / 0.75) 0 1.4rem, transparent 1.4rem 2.6rem);
}
.map__ring,
.map__pin { position: absolute; left: 64%; top: 40%; }
.map__ring {
width: 7rem;
height: 7rem;
border: 1.5px solid var(--c-signal);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0.55;
}
.map__pin { color: var(--c-signal); transform: translate(-50%, -100%); }
.map__pin .icon { width: 3rem; height: 3rem; }
.map__overlay {
position: relative;
z-index: 1;
align-self: end;
display: grid;
gap: 0.5rem;
max-width: 30rem;
margin: var(--space-sm);
padding: var(--space-md);
background: oklch(17.5% 0.012 125 / 0.94);
border-top: 3px solid var(--c-signal);
}
.map__title { font: 700 var(--text-h4)/1 var(--font-display); text-transform: uppercase; }
.map__coords { font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.12em; color: var(--c-signal); }
.map__overlay .actions { margin-top: 0.5rem; }
.map__frame iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.facade { display: grid; gap: 0.75rem; }
.facade__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-night); }
.facade__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85);
transition: transform 900ms var(--ease-out-expo), filter var(--duration-normal);
}
.facade__frame:hover .facade__thumb img { transform: scale(1.03); filter: none; }
.facade__play {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 0.85rem;
color: var(--c-on-night);
text-decoration: none;
background: radial-gradient(circle at center, oklch(17.5% 0.012 125 / 0.3), oklch(17.5% 0.012 125 / 0.65));
}
.facade__play-icon {
display: grid;
place-items: center;
width: clamp(4rem, 3rem + 4vw, 6rem);
aspect-ratio: 1;
color: var(--c-signal-ink);
background: var(--c-signal);
transition: transform var(--duration-normal) var(--ease-out-expo);
}
.facade__play-icon .icon { width: 42%; height: 42%; margin-left: 6%; }
.facade__play:hover .facade__play-icon { transform: scale(1.07); }
.facade__play-label { font: 700 1rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.facade__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: var(--text-sm); color: var(--c-ink-2); }
.section--night .facade__caption { color: var(--c-on-night-2); }
.facade__note { font-size: var(--text-xs); }
.facade__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.faq-group + .faq-group { margin-top: var(--space-xl); }
.faq-group__title { margin-bottom: var(--space-2xs); padding-bottom: 0.6rem; font-size: var(--text-h3); text-transform: uppercase; border-bottom: 2px solid var(--c-ink); }
.faq { border-bottom: 1px solid var(--c-line); }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.1rem;
font-size: var(--text-lg);
font-weight: 600;
list-style: none;
cursor: pointer;
transition: color var(--duration-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-olive); }
.faq__icon { width: 1.5rem; height: 1.5rem; color: var(--c-olive); transition: transform var(--duration-normal) var(--ease-out-expo); }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq__a { max-width: 44rem; padding-bottom: 1.25rem; color: var(--c-ink-2); }
.faq__a a { color: var(--c-ink); font-weight: 600; }
.contact-cards { display: grid; gap: var(--space-sm); }
.contact-card {
position: relative;
display: grid;
justify-items: start;
gap: 0.4rem;
padding: var(--space-md) var(--space-md) var(--space-md) 4rem;
background: var(--c-concrete);
border: 1px solid var(--c-line);
}
.contact-card__icon { position: absolute; left: 1.25rem; top: 1.5rem; width: 1.6rem; height: 1.6rem; color: var(--c-olive); }
.contact-card__title { font-size: var(--text-h4); text-transform: uppercase; }
.contact-card__phones { display: grid; gap: 0.1rem; }
.contact-card__phone { font: 700 1.6rem/1.15 var(--font-display); text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-card__phone:hover { text-decoration: underline; }
.contact-card__phone .icon { display: none; }
.contact-card__meta { margin-bottom: 0.4rem; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--c-ink-2); }
.contact-card__email { font-weight: 600; overflow-wrap: anywhere; }
.contact-card--hours { padding-left: var(--space-md); }
.form-panel {
padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
color: var(--c-ink);
background: var(--c-paper);
border-top: 5px solid var(--c-signal);
box-shadow: var(--shadow-2);
}
.form-panel--light { border: 1px solid var(--c-line); border-top: 5px solid var(--c-signal); box-shadow: var(--shadow-1); }
.form-panel .section-head { margin-bottom: var(--space-md); }
.form-panel .section-head__title { font-size: var(--text-h3); }
.form { position: relative; display: grid; gap: var(--space-md); }
.form__grid { display: grid; gap: var(--space-sm) var(--space-md); }
@media (min-width: 40em) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; align-content: start; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__opt { font-weight: 400; color: var(--c-ink-2); }
.form input:not([type='checkbox']),
.form select,
.form textarea {
width: 100%;
min-height: 3rem;
padding: 0.7rem 0.85rem;
background: var(--c-paper);
border: 1.5px solid var(--c-line-strong);
border-radius: var(--radius-1);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form select {
appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262a1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.8rem center;
background-size: 1.1rem;
}
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--c-ink-2); }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-edge); }
.form [aria-invalid='true'] { border-color: var(--c-mandatory); box-shadow: inset 4px 0 0 var(--c-mandatory); }
.field__hint { font-size: var(--text-xs); color: var(--c-ink-2); }
.field__error { font-size: var(--text-sm); font-weight: 600; color: var(--c-mandatory); }
.field--check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--check input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--c-ink); }
.field--check label { font-size: var(--text-sm); color: var(--c-ink-2); }
.field--check .field__error { grid-column: 2; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: var(--space-sm) var(--space-md); font-weight: 500; border: 1px solid var(--c-line-strong); }
.form__status.is-error { color: oklch(38% 0.16 27); background: var(--c-mandatory-soft); border-color: color-mix(in oklch, var(--c-mandatory) 55%, transparent); }
.form__status:focus { outline: none; }
.form__submit { justify-self: start; }
.form__submit[aria-busy='true'] { cursor: progress; opacity: 0.75; }
@media (max-width: 39.99em) { .form__submit { width: 100%; } }
.form-success { display: grid; gap: 0.5rem; padding: var(--space-lg); background: var(--c-ok-soft); border: 1px solid color-mix(in oklch, var(--c-ok) 45%, transparent); }
.form-success__title { font-size: var(--text-h3); text-transform: uppercase; }
.form-success:focus { outline: none; }
.prose { display: grid; gap: 1em; max-width: 44rem; }
.prose p { color: var(--c-ink-2); }
.prose--legal h2 { margin-top: var(--space-lg); font-size: var(--text-h4); text-transform: uppercase; }
.prose--legal ul { display: grid; gap: 0.5rem; padding-left: 1.2rem; color: var(--c-ink-2); }
.prose a { color: var(--c-ink); text-decoration-color: var(--c-olive); }
.prose__meta { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }
.hero {
position: relative;
isolation: isolate;
display: grid;
align-items: end;
min-height: min(90svh, 58rem);
overflow: hidden;
color: var(--c-on-night);
background: var(--c-night);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, oklch(17.5% 0.012 125 / 0.55) 0%, oklch(17.5% 0.012 125 / 0.1) 32%, oklch(17.5% 0.012 125 / 0.93) 100%),
linear-gradient(90deg, oklch(17.5% 0.012 125 / 0.78) 0%, oklch(17.5% 0.012 125 / 0) 72%);
}
.hero__inner {
display: grid;
justify-items: start;
gap: var(--space-md);
padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 6vh, 4.5rem);
}
.hero__title { max-width: 13ch; font-size: var(--text-h1); line-height: 0.92; text-transform: uppercase; }
.hero__title em { display: block; font-style: normal; color: var(--c-signal); }
.hero__lead { max-width: 38rem; font-size: var(--text-lg); color: oklch(92% 0.008 95); }
.hero__coords {
font: 600 var(--text-xs)/1 var(--font-display);
letter-spacing: 0.24em;
color: var(--c-on-night-2);
}
@media (prefers-reduced-motion: no-preference) {
.hero__media img { animation: hero-settle 2.4s var(--ease-out-expo) both; }
.hero__inner > * { animation: rise 0.9s var(--ease-out-expo) both; }
.hero__inner > :nth-child(2) { animation-delay: 0.08s; }
.hero__inner > :nth-child(3) { animation-delay: 0.16s; }
.hero__inner > :nth-child(4) { animation-delay: 0.24s; }
.hero__inner > :nth-child(5) { animation-delay: 0.32s; }
}
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.runway {
position: relative;
overflow: hidden;
color: var(--c-on-night);
background: var(--c-night-2) var(--grain);
border-top: 1px solid var(--c-night-line);
}
.runway::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 1.75rem;
background: repeating-linear-gradient(180deg, oklch(95% 0.006 95 / 0.85) 0 0.55rem, transparent 0.55rem 1.2rem);
}
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: var(--space-md) 0 var(--space-xl) 1.5rem;
}
@media (min-width: 48em) {
.runway::before { width: 4.5rem; }
.stats { grid-template-columns: repeat(4, 1fr); padding-left: 4.5rem; }
}
.stats__item { display: grid; align-content: start; gap: 0.35rem; padding: var(--space-sm) var(--space-md); border-left: 1px solid var(--c-night-line); }
.stats__value { font: 700 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--font-display); color: var(--c-signal); }
.stats__label { font-size: var(--text-sm); line-height: 1.35; color: var(--c-on-night-2); }
.visit { display: grid; gap: var(--space-sm); }
@media (min-width: 64em) { .visit { grid-template-columns: 22rem 1fr; } }
.visit__info { padding: var(--space-md); background: var(--c-paper); border: 1px solid var(--c-line); }
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero__inner {
display: grid;
justify-items: start;
gap: var(--space-sm);
padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.page-hero__title { max-width: 17ch; font-size: var(--text-h1); line-height: 0.94; text-transform: uppercase; }
.page-hero__lead { max-width: 44rem; font-size: var(--text-lg); }
.page-hero .actions { margin-top: var(--space-xs); }
.page-hero--photo {
display: grid;
align-items: end;
min-height: clamp(28rem, 64vh, 42rem);
color: var(--c-on-night);
background: var(--c-night);
}
.page-hero--photo::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, oklch(17.5% 0.012 125 / 0.45) 0%, oklch(17.5% 0.012 125 / 0.2) 35%, oklch(17.5% 0.012 125 / 0.94) 100%),
linear-gradient(90deg, oklch(17.5% 0.012 125 / 0.75), oklch(17.5% 0.012 125 / 0) 75%);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero__inner { padding-top: clamp(6rem, 4rem + 8vw, 10rem); }
.page-hero--photo .page-hero__lead { color: oklch(92% 0.008 95); }
.page-hero--plain { background: var(--c-concrete); }
.page-hero--plain .page-hero__title { font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5.25rem); }
.page-hero--plain .page-hero__lead { color: var(--c-ink-2); }
.page-hero__grid {
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
background-size: 4rem 4rem;
-webkit-mask-image: linear-gradient(90deg, transparent 20%, oklch(0% 0 0) 85%);
mask-image: linear-gradient(90deg, transparent 20%, oklch(0% 0 0) 85%);
}
.page-hero--plain + .section:not(.section--concrete):not(.section--night) { padding-top: var(--space-xl); }
.page-hero--status { min-height: 60vh; display: grid; align-items: center; }
.page-hero--ncts .page-hero__media img { object-position: 60% 50%; }
.page-hero--ncts::before {
background:
linear-gradient(180deg, oklch(15% 0.03 260 / 0.35) 0%, oklch(17.5% 0.012 125 / 0.95) 100%),
linear-gradient(90deg, oklch(15% 0.03 260 / 0.8), transparent 75%);
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.crumbs a { text-decoration: none; opacity: 0.8; }
.crumbs a:hover { text-decoration: underline; opacity: 1; }
.founder { display: grid; gap: var(--space-xl); }
@media (min-width: 64em) { .founder { grid-template-columns: 5fr 6fr; gap: var(--space-2xl); align-items: center; } }
.founder__media { position: relative; isolation: isolate; }
.founder__media::before {
content: '';
position: absolute;
inset: calc(-1 * var(--frame-offset)) var(--frame-offset) var(--frame-offset) calc(-1 * var(--frame-offset));
z-index: -1;
border: 2px solid var(--c-signal);
}
.founder__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 30%; }
.founder__body { display: grid; justify-items: start; gap: var(--space-sm); }
.founder__body .section-head__title { margin-top: var(--space-2xs); }
.founder__role {
font: 600 var(--text-sm)/1.2 var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-signal);
}
.founder__body > p:not([class]) { max-width: 40rem; color: var(--c-on-night-2); }
.founder__facts-title { margin-top: var(--space-sm); font-size: var(--text-h4); text-transform: uppercase; }
.course-path { display: grid; gap: var(--space-sm); }
@media (min-width: 48em) { .course-path { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .course-path { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.course {
position: relative;
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: var(--space-md);
background: var(--c-paper);
border: 1px solid var(--c-line);
}
@media (min-width: 72em) {
.course-path .course + .course { border-left: 0; }
.course-path .course:not(:last-child)::after {
content: '';
position: absolute;
right: -0.8rem;
top: 1.6rem;
z-index: 1;
width: 1.6rem;
height: 1.6rem;
background: var(--c-signal);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}
.course__code {
width: fit-content;
padding: 0.3rem 0.5rem 0.25rem;
font: 700 1.75rem/1 var(--font-display);
letter-spacing: 0.04em;
color: var(--c-signal);
background: var(--c-night);
}
.course__name { font-size: var(--text-h4); text-transform: uppercase; }
.course__meta { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); font-weight: 600; }
.course__meta .icon { color: var(--c-olive); }
.course__req { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); }
.course__text { flex: 1; font-size: var(--text-sm); color: var(--c-ink-2); }
.course__pdf {
display: flex;
align-items: center;
gap: 0.65rem;
margin-top: 0.5rem;
padding-top: 0.9rem;
font-weight: 600;
text-decoration: none;
border-top: 1px dashed var(--c-line);
}
.course__pdf .icon { width: 1.5rem; height: 1.5rem; color: var(--c-olive); }
.course__pdf small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--c-ink-2); }
.course__pdf:hover > span:first-of-type { text-decoration: underline; }
.course-solo { margin-top: var(--space-md); }
.course--solo { color: var(--c-on-night); background: var(--c-night) var(--grain); border-color: var(--c-night); }
.course--solo .course__code { color: var(--c-night); background: var(--c-signal); }
.course--solo .course__text,
.course--solo .course__pdf small { color: var(--c-on-night-2); }
.course--solo .course__meta .icon,
.course--solo .course__pdf .icon { color: var(--c-signal); }
.course--solo .course__pdf { border-color: var(--c-night-line); }
@media (min-width: 64em) {
.course--solo { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 0.5rem var(--space-lg); }
.course--solo .course__code { grid-row: span 3; }
.course--solo .course__pdf { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0 0 0 var(--space-lg); border-top: 0; border-left: 1px dashed var(--c-night-line); }
}
.history { display: grid; gap: var(--space-xl); }
@media (min-width: 64em) { .history { grid-template-columns: 1fr 1fr; align-items: start; } }
.history__body { display: grid; justify-items: start; }
.history__body .section-head { margin-bottom: var(--space-md); }
@media (min-width: 64em) { .history__video { position: sticky; top: calc(var(--header-h) + 2rem); } }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--c-ink); }
.facts__item { display: grid; gap: 0.25rem; padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--c-line); }
.facts__item:nth-child(odd) { border-right: 1px solid var(--c-line); }
.facts__item strong { font: 700 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.facts__item span { font-size: var(--text-sm); color: var(--c-ink-2); }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-sm); max-width: 50rem; }
.team__card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 1rem;
padding: var(--space-md);
background: var(--c-concrete);
border: 1px solid var(--c-line);
}
.team__mono {
display: grid;
grid-row: span 2;
place-items: center;
width: 3.5rem;
height: 3.5rem;
font: 700 2rem/1 var(--font-display);
color: var(--c-signal);
background: var(--c-night);
box-shadow: inset 0 0 0 2px var(--c-signal);
}
.team__name { font-size: var(--text-h4); text-transform: uppercase; }
.team__card p { font-size: var(--text-sm); color: var(--c-ink-2); }
.operator { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--c-ink-2); }