@layer reset, tokens, base, layout, components, utilities;
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/barlow-condensed/latin-600-normal.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("../fonts/barlow-condensed/latin-700-normal.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("../fonts/barlow/latin-400-normal.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: 700;
font-display: swap;
src: url("../fonts/barlow/latin-700-normal.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;
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { min-block-size: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
@layer tokens {
:root {
--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
--font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
--weight-display: 700;
--weight-strong: 700;
--tracking-caps: 0.04em;
--color-ground: oklch(100% 0 0);           
--color-ink: oklch(23.4% 0.005 248);       
--color-accent: oklch(73.9% 0.168 131);    
--color-on-accent: var(--color-ink);
--color-muted: oklch(40% 0.006 248);       
--color-line: oklch(91.5% 0.004 106.5);    
--color-panel: oklch(96.6% 0.004 106.5);   
--color-accent-tint: oklch(95.4% 0.03 128); 
--color-dark-muted: oklch(83.5% 0.006 120); 
--color-footer-ink: oklch(88.1% 0.005 106.5); 
--color-focus: var(--color-ink);
--step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.94rem);
--step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
--step-1: clamp(1.2rem, 1.12rem + 0.37vw, 1.5rem);
--step-2: clamp(1.6rem, 1.42rem + 0.83vw, 2.125rem);
--step-3: clamp(2rem, 1.69rem + 1.39vw, 2.75rem);
--step-4: clamp(2.5rem, 2.06rem + 1.94vw, 4rem);
--space-2xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
--space-xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
--space-s: clamp(0.75rem, 0.7rem + 0.25vw, 0.94rem);
--space-m: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--space-l: clamp(1.5rem, 1.35rem + 0.75vw, 1.88rem);
--space-xl: clamp(2rem, 1.8rem + 1vw, 2.5rem);
--space-2xl: clamp(3rem, 2.6rem + 2vw, 4.5rem);
--space-3xl: clamp(4rem, 3.2rem + 4vw, 7rem);
--rule-hair: 1px;
--rule-mark: 4px;
--rule-tel: 5px;
--tile-gap: 3px;
--diamond-size: 9rem;
--rule-link: 3px;
--focus-ring: 3px;
--logo-block: 3.6rem;          
--logo-block-footer: 2.75rem;
--ref-logo-block: 3.25rem;     
--thumb-inline: 10.5rem;       
--gallery-row: 15rem;
--plate-offset: 1.375rem;      
--hit-min: 2.75rem;            
--stagger: 55ms;               
--plate-rise: -0.6rem;
--line-on-accent: color-mix(in oklch, var(--color-ink) 25%, transparent);
--line-on-dark: color-mix(in oklch, var(--color-ground) 18%, transparent);
--opacity-logo: 0.78;
--measure: 62ch;
--page-max: 73.75rem;
--gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
--radius: 0;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-set: 700ms;
--duration-hover: 240ms;
--duration-page: 320ms;
--scale-hover: 1.05;
--scale-press: 0.97;
--nudge: 0.3em;
--tint-hover: color-mix(in oklch, var(--color-accent-tint) 70%, var(--color-ground));
--logo-rest: grayscale(1);
--story-length: 280svh;        
--story-length-wide: 205svh;   
--story-media: 58svh;
--story-media-max: 34rem;
--story-zoom: 1.08;
--duration-story: 1400ms;
--story-plate: inset(100% 0 0 0);
--hero-recede: 0.92;
--rise: 0.6em;
--icon-size: 1.2em;
--icon-tilt: -12deg;
--bar-block: 4.5rem;
}
}
@layer base {
html {
color-scheme: light;
scroll-padding-block-start: var(--space-2xl);
scrollbar-color: var(--color-muted) var(--color-panel);
accent-color: var(--color-accent);
}
body {
background: var(--color-ground);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.55;
display: flex;
flex-direction: column;
}
body > main { flex: 1 0 auto; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: var(--weight-display);
line-height: 1.05;
letter-spacing: 0.005em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
strong, b { font-weight: var(--weight-strong); }
a {
color: inherit;
text-decoration-color: var(--color-accent);
text-decoration-thickness: var(--rule-link);
text-underline-offset: 0.25em;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible {
outline: var(--focus-ring) solid var(--color-focus);
outline-offset: var(--focus-ring);
}
::selection { background: var(--color-accent); color: var(--color-on-accent); }
address { font-style: normal; }
.skip-link {
position: absolute;
inset-inline-start: var(--space-s);
inset-block-start: -10rem;
padding: var(--space-xs) var(--space-s);
background: var(--color-ink);
color: var(--color-ground);
z-index: 100;
}
.skip-link:focus { inset-block-start: var(--space-s); }
}
@layer layout {
.wrap {
inline-size: min(100% - 2 * var(--gutter), var(--page-max));
margin-inline: auto;
}
.section {
padding-block: var(--space-2xl);
border-block-start: var(--rule-hair) solid var(--color-line);
}
.section > h2,
.section-head { margin-block-end: var(--space-l); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-s) var(--space-l); }
.section-head h2 { margin: 0; }
.section-lead { max-inline-size: var(--measure); color: var(--color-muted); margin-block-start: var(--space-xs); }
.band { box-shadow: 0 0 0 100vmax var(--band-bg); clip-path: inset(0 -100vmax); background: var(--band-bg); border: 0; }
.band + .section { border-block-start: 0; }
.band-accent { --band-bg: var(--color-accent); color: var(--color-on-accent); }
.band-dark { --band-bg: var(--color-ink); color: var(--color-ground); }
.band-tint { --band-bg: var(--color-accent-tint); }
.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head p { max-inline-size: var(--measure); margin-block-start: var(--space-m); color: var(--color-muted); font-size: var(--step-1); line-height: 1.45; }
.split { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) {
.split { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: start; }
}
.prose { max-inline-size: var(--measure); padding-block: var(--space-2xl); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose > h2 { margin-block-start: var(--space-xl); font-size: var(--step-2); }
.prose ul { padding-inline-start: var(--space-l); }
.prose li + li { margin-block-start: var(--space-2xs); }
}
@layer components {
.site-header { border-block-end: var(--rule-hair) solid var(--color-line); }
.site-header .wrap {
display: flex;
align-items: center;
gap: var(--space-m);
padding-block: var(--space-s);
}
.site-brand { display: inline-flex; margin-inline-end: auto; }
.site-brand img { block-size: var(--logo-block); inline-size: auto; }
.nav-toggle {
min-block-size: var(--hit-min);
padding-inline: var(--space-s);
background: none;
border: var(--rule-hair) solid currentColor;
border-radius: var(--radius);
font-weight: var(--weight-strong);
cursor: pointer;
}
.nav-toggle:hover { background: var(--color-panel); }
.site-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.site-nav a {
display: inline-flex;
align-items: center;
min-block-size: var(--hit-min);
font-weight: var(--weight-strong);
text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: var(--rule-link); }
.site-nav:popover-open {
inset: 0 0 auto auto;
margin: var(--space-s);
padding: var(--space-l);
background: var(--color-ground);
color: var(--color-ink);
border: var(--rule-hair) solid var(--color-line);
}
.site-nav::backdrop { background: color-mix(in oklch, var(--color-ink) 35%, transparent); }
.header-contact { order: 3; display: flex; gap: var(--space-2xs); }
@media (min-width: 52rem) {
.nav-toggle { display: none; }
.site-nav[popover] { display: block; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.site-nav ul { flex-direction: row; gap: var(--space-l); }
.site-nav { order: 1; }
.header-contact { order: 2; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-block-size: var(--hit-min);
padding: var(--space-xs) var(--space-m);
background: var(--color-accent);
color: var(--color-on-accent);
font-weight: var(--weight-strong);
text-decoration: none;
border: 0;
border-radius: var(--radius);
--wipe: color-mix(in oklch, var(--color-accent) 78%, var(--color-ink));
background-image: linear-gradient(var(--wipe), var(--wipe));
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size var(--duration-hover) var(--ease-out), scale var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; }
.btn:active { scale: var(--scale-press); }
.btn-lg { padding: var(--space-s) var(--space-l); font-size: var(--step-1); }
.btn-dark { background-color: var(--color-ink); color: var(--color-ground); }
.btn-dark { --wipe: color-mix(in oklch, var(--color-ink) 80%, var(--color-ground)); }
.btn .icon { inline-size: var(--icon-size); block-size: var(--icon-size); flex: none; transition: rotate var(--duration-hover) var(--ease-out); }
.btn:hover .icon { rotate: var(--icon-tilt); }
.icon-btn { inline-size: var(--hit-min); padding: 0; }
.btn-line {
background-color: transparent;
color: var(--color-ink);
box-shadow: inset 0 0 0 var(--rule-link) var(--color-ink);
--wipe: var(--color-ink);
}
.btn-line:hover, .btn-line:focus-visible { color: var(--color-ground); background-color: var(--color-ink); }
.btn-line { transition: background-size var(--duration-hover) var(--ease-out), background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out), scale var(--duration-hover) var(--ease-out); }
.band-tint .btn-line:not(:hover, :focus-visible) { background-color: var(--color-ground); }
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.link-arrow {
font-weight: var(--weight-strong);
text-decoration: none;
border-block-end: var(--rule-link) solid var(--color-accent);
white-space: nowrap;
}
.link-arrow::after { content: "→"; display: inline-block; margin-inline-start: 0.3em; transition: translate var(--duration-hover) var(--ease-out); }
.link-arrow:hover { border-block-end-color: currentColor; }
.link-arrow:hover::after { translate: var(--nudge) 0; }
.tel-big {
display: inline-block;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-3);
line-height: 1;
text-decoration: none;
padding-block-end: var(--space-2xs);
border-block-end: var(--rule-mark) solid var(--color-accent);
font-variant-numeric: tabular-nums;
}
.tel-big:hover { border-block-end-color: currentColor; }
.hero {
display: grid;
gap: var(--space-xl);
padding-block: var(--space-xl) var(--space-2xl);
align-items: center;
}
.hero-text { display: grid; gap: var(--space-m); }
.hero-text p { color: var(--color-muted); max-inline-size: var(--measure); }
.hero-actions { display: grid; gap: var(--space-s); justify-items: start; margin-block-start: var(--space-xs); }
.action-bar .btn { padding-inline: var(--space-2xs); font-size: var(--step--1); }
.hero-note { font-size: var(--step--1); }
.hero-figure { position: relative; margin: 0; isolation: isolate; margin-inline-start: var(--plate-offset); margin-block-end: var(--plate-offset); }
.hero-figure::before {
content: "";
position: absolute;
z-index: -1;
inset-inline-start: calc(-1 * var(--plate-offset));
inset-block-end: calc(-1 * var(--plate-offset));
inline-size: 46%;
block-size: 46%;
background: var(--color-accent);
}
.hero-figure img {
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
@media (min-width: 60rem) {
.hero { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); padding-block: var(--space-2xl); }
.hero-text { order: 2; }
}
.diamond {
position: absolute;
inset-inline-end: calc(-0.08 * var(--diamond-size));
inset-block-end: calc(-0.08 * var(--diamond-size));
inline-size: var(--diamond-size);
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--tile-gap);
rotate: 45deg;
scale: 0.66;
}
.diamond i { background: var(--color-accent); outline: var(--tile-gap) solid var(--color-ground); }
.diamond i.o { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
.diamond i { animation: plate-set var(--duration-set) var(--ease-out) backwards; animation-delay: calc(var(--stagger) * var(--n, 0)); }
.diamond i:nth-child(1) { --n: 0; } .diamond i:nth-child(2) { --n: 1; } .diamond i:nth-child(3) { --n: 2; } .diamond i:nth-child(4) { --n: 3; }
.diamond i:nth-child(5) { --n: 4; } .diamond i:nth-child(6) { --n: 5; } .diamond i:nth-child(7) { --n: 6; } .diamond i:nth-child(8) { --n: 7; }
.diamond i:nth-child(9) { --n: 8; } .diamond i:nth-child(10) { --n: 9; } .diamond i:nth-child(11) { --n: 10; } .diamond i:nth-child(12) { --n: 11; }
.diamond i:nth-child(13) { --n: 12; } .diamond i:nth-child(14) { --n: 13; } .diamond i:nth-child(15) { --n: 14; } .diamond i:nth-child(16) { --n: 15; }
}
@keyframes plate-set {
from { opacity: 0.15; translate: 0 var(--plate-rise); scale: 1.12; }
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.facts div { padding: var(--space-l) var(--space-m) var(--space-l) 0; border-block-end: var(--rule-hair) solid var(--line-on-accent); }
.facts dt {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-4);
line-height: 1;
font-variant-numeric: tabular-nums;
}
@media (max-width: 30rem) { .facts dt { font-size: var(--step-3); } }
.facts dd { margin: var(--space-2xs) 0 0; font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
@media (min-width: 52rem) {
.facts { grid-template-columns: repeat(4, 1fr); }
.facts div { border-block-end: 0; border-inline-end: var(--rule-hair) solid var(--line-on-accent); padding-inline-start: var(--space-l); }
.facts div:first-child { padding-inline-start: 0; }
.facts div:last-child { border-inline-end: 0; }
}
.entries { list-style: none; padding: 0; border-block-start: var(--rule-hair) solid var(--color-line); }
.entries li { border-block-end: var(--rule-hair) solid var(--color-line); }
.entries a {
display: grid;
grid-template-columns: var(--thumb-inline) 1fr;
gap: var(--space-s) var(--space-l);
align-items: center;
padding-block: var(--space-m);
text-decoration: none;
}
.entries a { transition: background-color var(--duration-hover) var(--ease-out); }
.entries a:hover, .entries a:focus-visible { background-color: var(--tint-hover); }
.entries picture { display: block; overflow: hidden; }
.entries img { inline-size: var(--thumb-inline); aspect-ratio: 3 / 2; object-fit: cover; transition: scale var(--duration-set) var(--ease-out); }
.entries a:hover img, .entries a:focus-visible img { scale: var(--scale-hover); }
.entries a:hover .link-arrow::after { translate: var(--nudge) 0; }
.entries h3 { font-size: var(--step-2); }
.entries p { color: var(--color-muted); margin-block-start: var(--space-2xs); }
.entries .link-arrow { grid-column: 2; justify-self: start; }
.entries a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: var(--rule-mark); text-underline-offset: 0.15em; }
@media (max-width: 36rem) {
.entries a { grid-template-columns: 1fr; }
.entries img { inline-size: 100%; }
.entries .link-arrow { grid-column: 1; }
}
@media (min-width: 52rem) {
.entries a { grid-template-columns: var(--thumb-inline) 1fr auto; }
.entries .link-arrow { grid-column: 3; }
}
.services { display: grid; gap: var(--space-xl); }
.services h3 { font-size: var(--step-2); margin-block-end: var(--space-s); }
.list-lines { list-style: none; padding: 0; }
.list-lines li { padding-block: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-line); }
@media (min-width: 52rem) { .services { grid-template-columns: repeat(3, 1fr); } }
.gallery { display: grid; gap: var(--space-s); }
.gallery figure { position: relative; margin: 0; overflow: hidden; }
.gallery picture, .hero-figure picture { display: block; block-size: 100%; }
.gallery img { inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale var(--duration-set) var(--ease-out); }
.gallery figure:hover img { scale: var(--scale-hover); }
.gallery figcaption {
position: absolute;
inset-inline-start: 0;
inset-block-end: 0;
max-inline-size: 90%;
padding: var(--space-2xs) var(--space-s);
background: var(--color-ground);
border-block-start: var(--rule-mark) solid var(--color-accent);
font-size: var(--step--1);
font-weight: var(--weight-strong);
}
@media (min-width: 52rem) {
.gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: var(--gallery-row) var(--gallery-row); }
.gallery img { aspect-ratio: auto; }
.gallery figure:first-child { grid-row: span 2; }
.gallery figure:nth-child(4) { grid-column: span 2; }
}
.gallery-more { margin-block-start: var(--space-l); }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: var(--space-s); align-items: baseline; padding-block: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-line); }
.checklist li::before {
content: "";
flex: none;
inline-size: 0.6em;
aspect-ratio: 1;
background: var(--color-accent);
rotate: 45deg;
translate: 0 -0.1em;
}
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-l); counter-reset: step; }
.steps li { counter-increment: step; padding-block-start: var(--space-s); border-block-start: var(--rule-mark) solid var(--color-accent); }
.steps li::before {
content: "0" counter(step);
display: block;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-3);
line-height: 1;
color: var(--color-accent);
margin-block-end: var(--space-xs);
}
.steps strong { display: block; font-size: var(--step-1); }
.steps span { color: var(--color-dark-muted); }
.band-dark h2 { color: var(--color-ground); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } }
.logos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l) var(--space-xl); }
.logos img { block-size: var(--ref-logo-block); inline-size: auto; opacity: var(--opacity-logo); filter: var(--logo-rest); transition: filter var(--duration-hover) var(--ease-out), opacity var(--duration-hover) var(--ease-out), scale var(--duration-hover) var(--ease-out); }
.logos a { display: inline-flex; align-items: center; min-block-size: var(--hit-min); -webkit-tap-highlight-color: transparent; }
.logos a:hover img, .logos a:focus-visible img { filter: none; opacity: 1; scale: var(--scale-hover); }
.logos .wide img { block-size: calc(var(--ref-logo-block) * 0.55); }
.names { margin-block-start: var(--space-l); padding-block-start: var(--space-m); border-block-start: var(--rule-hair) solid var(--color-line); font-weight: var(--weight-strong); }
.ref-groups { display: grid; gap: var(--space-l); margin-block-start: var(--space-xl); }
.ref-groups h3 { font-size: var(--step-1); margin-block-end: var(--space-2xs); }
@media (min-width: 52rem) { .ref-groups { grid-template-columns: repeat(2, 1fr); } }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-l); padding-block: var(--space-2xl); }
.cta h2 { font-size: var(--step-3); }
.cta p { margin-block-start: var(--space-xs); }
.cta-text { max-inline-size: var(--measure); font-size: var(--step-1); line-height: 1.45; }
.cta-text strong { display: block; }
.contact-grid { display: grid; gap: var(--space-xl); }
.contact-grid h2 { font-size: var(--step-2); margin-block-end: var(--space-s); }
.contact-grid .action-row { margin-block-end: var(--space-s); }
.contact-actions { display: grid; gap: var(--space-s); justify-items: start; margin-block-start: var(--space-l); }
.contact-address { margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: var(--rule-hair) solid var(--color-line); color: var(--color-muted); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.faq details { border-block-end: var(--rule-hair) solid var(--color-line); }
.faq summary {
cursor: pointer;
padding-block: var(--space-s);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-1);
list-style-position: outside;
}
.faq summary::marker { color: var(--color-accent); }
.faq details p { padding-block-end: var(--space-s); max-inline-size: var(--measure); color: var(--color-muted); }
.figures { display: grid; gap: var(--space-s); }
.figures figure { margin: 0; }
.figures img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figures figcaption { font-size: var(--step--1); color: var(--color-muted); padding-block-start: var(--space-2xs); }
@media (min-width: 52rem) { .figures { grid-template-columns: repeat(2, 1fr); } }
.site-footer { --band-bg: var(--color-ink); background: var(--color-ink); color: var(--color-footer-ink); font-size: var(--step--1); }
.site-footer .wrap { display: grid; gap: var(--space-l); padding-block: var(--space-xl); }
.site-footer img { block-size: var(--logo-block-footer); inline-size: auto; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); }
.site-footer a { display: inline-flex; align-items: center; min-block-size: var(--hit-min); }
.site-footer :focus-visible { outline-color: var(--color-accent); }
@media (min-width: 52rem) {
.site-footer .wrap { grid-template-columns: auto 1fr auto; align-items: center; }
}
.stations { list-style: none; padding: 0; display: grid; gap: var(--space-xl); counter-reset: none; }
.stations li { display: grid; gap: var(--space-s); align-content: start; }
.station-label {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-3);
line-height: 1;
display: flex;
align-items: center;
gap: var(--space-s);
}
.station-label::after {
content: "";
flex: 1;
block-size: var(--rule-mark);
background: var(--color-line);
}
.stations li:last-child .station-label::after { background: var(--color-accent); }
.stations figure { margin: 0; }
.stations img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stations li:not(:last-child) img { filter: grayscale(0.55) contrast(0.95); }
.stations figcaption { padding-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--step--1); max-inline-size: 40ch; }
@media (min-width: 52rem) {
.stations { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
}
.points { list-style: none; padding: 0; display: grid; border-block-start: var(--rule-hair) solid var(--color-line); }
.points li {
display: grid;
grid-template-columns: auto 1fr;
align-content: start;
gap: var(--space-2xs) var(--space-m);
padding-block: var(--space-l);
border-block-end: var(--rule-hair) solid var(--color-line);
}
.points li::before {
content: "";
grid-row: span 2;
inline-size: 0.8rem;
aspect-ratio: 1;
margin-block-start: 0.55em;
background: var(--color-accent);
rotate: 45deg;
}
.points h3 { font-size: var(--step-2); }
.points p { color: var(--color-muted); max-inline-size: var(--measure); }
@media (min-width: 60rem) {
.points { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); }
}
@media (min-width: 52rem) { .services-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .services-4 { grid-template-columns: repeat(4, 1fr); } }
}
@layer components {
.action-bar {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 50;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2xs);
padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));
background: var(--color-ground);
border-block-start: var(--rule-hair) solid var(--color-line);
}
.site-footer { padding-block-end: var(--bar-block); }
html { scroll-padding-block-end: var(--bar-block); }
@media (min-width: 52rem) {
.action-bar { display: none; }
.site-footer { padding-block-end: 0; }
html { scroll-padding-block-end: 0; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(*) { animation-duration: var(--duration-page); animation-timing-function: var(--ease-out); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.action-bar { animation: bar-in linear both; animation-timeline: scroll(root); animation-range: 0 40svh; }
.hero-figure img { animation: recede linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
.facts div { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
.steps li {
border-block-start-color: transparent;
background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 0 / 100% var(--rule-mark);
animation: draw linear both;
animation-timeline: view();
}
.steps li:nth-child(1) { animation-range: entry 20% cover 35%; }
.steps li:nth-child(2) { animation-range: entry 40% cover 40%; }
.steps li:nth-child(3) { animation-range: entry 60% cover 45%; }
.steps li:nth-child(4) { animation-range: entry 80% cover 50%; }
}
}
@keyframes bar-in { from { translate: 0 100%; } }
@keyframes recede { to { scale: var(--hero-recede); opacity: 0.55; } }
@keyframes rise { from { translate: 0 var(--rise); opacity: 0.3; } }
@keyframes draw { from { background-size: 0% var(--rule-mark); } }
.story-track { display: none; }
.station-tasks { list-style: none; padding: 0; margin-block-start: var(--space-s); }
.station-tasks li { display: flex; gap: var(--space-s); align-items: baseline; padding-block: var(--space-2xs); border-block-start: var(--rule-hair) solid var(--line-on-dark); }
.station-tasks li::before { content: ""; flex: none; inline-size: 0.5em; aspect-ratio: 1; background: var(--color-accent); rotate: 45deg; translate: 0 -0.1em; }
.band-dark .stations figcaption, .band-dark .section-lead { color: var(--color-dark-muted); }
.band-dark .station-label::after { background: var(--line-on-dark); }
.band-dark .stations li:last-child .station-label::after { background: var(--color-accent); }
.story.is-staged { min-block-size: var(--story-length); padding-block: 0; }
.is-staged .story-stage {
position: sticky;
inset-block-start: 0;
min-block-size: 100svh;
display: grid;
align-content: center;
gap: var(--space-l);
padding-block: var(--space-xl);
}
.is-staged .section-head { margin: 0; }
.is-staged .section-lead { color: var(--color-dark-muted); }
.is-staged .story-track {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding-block-start: var(--space-s);
border-block-start: var(--rule-mark) solid var(--line-on-dark);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--step-1);
color: var(--color-dark-muted);
}
.is-staged .story-track::before {
content: "";
position: absolute;
inset: calc(-1 * var(--rule-mark)) 0 auto;
block-size: var(--rule-mark);
background: var(--color-accent);
transform-origin: left;
transform: scaleX(0.3333);
transition: transform var(--duration-set) var(--ease-out);
}
.is-staged[data-step="2"] .story-track::before { transform: scaleX(0.6667); }
.is-staged[data-step="3"] .story-track::before { transform: scaleX(1); }
.is-staged .story-track span { transition: color var(--duration-hover) var(--ease-out); }
.is-staged .story-track span.is-active { color: var(--color-ground); }
.is-staged .story-track span:last-child.is-active { color: var(--color-accent); }
.is-staged .stations { display: grid; grid-template-columns: 1fr; grid-template-areas: "stage"; gap: 0; counter-reset: station; }
.is-staged .stations > li { grid-area: stage; counter-increment: station; }
.is-staged .station-label { font-size: var(--step-4); }
.is-staged .station-label::before { content: "0" counter(station); color: var(--color-accent); }
.is-staged .station-label::after { display: none; }
.is-staged .stations figure { display: grid; gap: var(--space-s); }
.is-staged .stations picture { display: block; overflow: hidden; clip-path: var(--story-plate); transition: clip-path var(--duration-set) var(--ease-out); }
.is-staged .stations > li:first-child picture,
.is-staged .stations > li:is(.is-active, .is-past) picture { clip-path: inset(0); }
.is-staged .stations img { inline-size: 100%; max-block-size: var(--story-media); aspect-ratio: 4 / 3; scale: var(--story-zoom); transition: scale var(--duration-story) var(--ease-out); }
.is-staged .stations > li.is-active img { scale: 1; }
.is-staged .stations figcaption { font-size: var(--step-0); max-inline-size: 34ch; padding: 0; }
.is-staged .stations figcaption > p { font-size: var(--step-1); color: var(--color-ground); line-height: 1.35; }
.is-staged .stations > li :is(.station-label, figcaption) {
opacity: 0;
translate: 0 var(--rise);
transition: opacity var(--duration-hover) var(--ease-out), translate var(--duration-hover) var(--ease-out);
}
.is-staged .stations > li.is-active :is(.station-label, figcaption) {
opacity: 1;
translate: 0 0;
transition-duration: var(--duration-set);
transition-delay: var(--duration-hover);
}
@media (max-width: 51.99rem) {
.is-staged .section-lead, .is-staged .station-tasks { display: none; }
.is-staged .station-label { font-size: var(--step-3); }
}
@media (min-width: 52rem) {
.story.is-staged { min-block-size: var(--story-length-wide); }
.is-staged .stations > li { display: grid; grid-template-columns: minmax(0, 1fr) var(--story-media-max); grid-template-rows: auto 1fr; column-gap: var(--space-2xl); align-items: start; }
.is-staged .stations figure { display: contents; }
.is-staged .station-label { grid-column: 1; grid-row: 1; }
.is-staged .stations figcaption { grid-column: 1; grid-row: 2; padding-block-start: var(--space-m); }
.is-staged .stations picture { grid-column: 2; grid-row: 1 / span 2; }
}
.text-link { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: var(--rule-link); }
}
@layer utilities {
.visually-hidden {
position: absolute !important;
inline-size: 1px; block-size: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}