@font-face {
font-family: 'Gloock';
src: url('/assets/fonts/gloock-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Schibsted Grotesk';
src: url('/assets/fonts/schibsted-grotesk-var.woff2') format('woff2');
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
:root {
--color-bg:          #0c0b0a;
--color-surface:     #131210;
--color-surface-2:   #1a1916;
--color-line:        #2b2925;
--color-line-strong: #423f39;
--color-control-border: #6e695f; 
--color-text:        #efebe4;
--color-text-muted:  #a39e95;
--color-text-faint:  #8a857c;
--color-gold:        #c9a84c;
--color-gold-hover:  #dabb63;
--color-gold-ink:    #0c0b0a;
--color-error:       #f0907f;
--color-success:     #c9a84c;
--font-display: 'Gloock', 'Times New Roman', Georgia, serif;
--font-body:    'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--text-xs:   0.8125rem;
--text-sm:   0.9375rem;
--text-base: 1.0625rem;
--text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
--text-xl:   clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
--text-h3:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
--text-h2:   clamp(2rem, 1.45rem + 2.2vw, 3.375rem);
--text-display:    clamp(2.625rem, 1.5rem + 4.8vw, 6rem);
--text-display-xl: clamp(3.25rem, 1.6rem + 7.4vw, 8.5rem);
--leading-tight: 1.04;
--leading-snug:  1.25;
--leading-body:  1.7;
--measure: 68ch;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
--section-space: clamp(4.5rem, 3rem + 6vw, 9rem);
--gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
--container: 76rem;
--container-narrow: 48rem;
--header-height: 4.5rem;
--radius-sm: 2px;
--radius:    4px;
--border:        1px solid var(--color-line);
--border-strong: 1px solid var(--color-line-strong);
--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 160ms;
--duration:      280ms;
--duration-slow: 700ms;
--z-sticky: 20;
--z-header: 50;
--z-menu:   60;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
color-scheme: dark;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-height) + var(--space-5));
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
font-feature-settings: 'kern', 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.is-menu-open {
overflow: hidden;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
p,
li,
dd {
overflow-wrap: break-word;
}
ul[role='list'],
ol[role='list'] {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
font-weight: 400;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
strong {
font-weight: 600;
}
code {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.9em;
}
::selection {
background: var(--color-gold);
color: var(--color-gold-ink);
}
:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
main:focus {
outline: none;
}
.display {
font-family: var(--font-display);
font-size: var(--text-display);
line-height: var(--leading-tight);
letter-spacing: -0.008em;
}
.h2 {
font-family: var(--font-display);
font-size: var(--text-h2);
line-height: 1.08;
letter-spacing: -0.015em;
}
.h3 {
font-family: var(--font-body);
font-size: var(--text-h3);
font-weight: 600;
line-height: var(--leading-snug);
letter-spacing: -0.01em;
}
.lede {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-muted);
max-width: 56ch;
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.4;
color: var(--color-gold);
}
.accent {
color: var(--color-gold);
}
.prose {
max-width: var(--measure);
}
.prose > * + * {
margin-top: var(--space-4);
}
.prose--large {
font-size: var(--text-lg);
line-height: 1.65;
}
.prose a {
color: var(--color-text);
text-decoration-color: var(--color-gold);
}
.prose a:hover {
color: var(--color-gold);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--space-4);
top: var(--space-3);
z-index: calc(var(--z-menu) + 1);
padding: var(--space-3) var(--space-5);
background: var(--color-gold);
color: var(--color-gold-ink);
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-space);
}
.section--surface {
background: var(--color-surface);
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
margin-bottom: var(--space-7);
}
.section-head--stacked {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.section-head--stacked p {
color: var(--color-text-muted);
max-width: 56ch;
}
.split {
display: grid;
gap: var(--space-6);
}
@media (min-width: 900px) {
.split {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-7);
align-items: start;
}
.split__title {
grid-column: 1 / span 6;
}
.split__body {
grid-column: 8 / -1;
}
.split--center {
align-items: center;
}
}
.split__title .lede,
.split__title p {
margin-top: var(--space-4);
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.page-head {
padding-top: clamp(3.5rem, 2rem + 6vw, 8rem);
padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.page-head__grid {
display: grid;
gap: var(--space-5);
}
.page-head__title {
font-size: var(--text-display-xl);
}
@media (min-width: 900px) {
.page-head__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: end;
}
.page-head__title {
grid-column: 1 / span 7;
}
.page-head__lede {
grid-column: 8 / -1;
padding-bottom: 0.6em;
}
}
@media (min-width: 900px) {
.page-head--stacked .page-head__title,
.page-head--stacked .page-head__lede {
grid-column: 1 / -1;
}
.page-head--stacked .page-head__lede {
padding-bottom: 0;
max-width: 48rem;
}
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--color-bg);
border-bottom: 1px solid transparent;
transition: border-color var(--duration) var(--ease-out);
}
.site-header.is-scrolled,
body.is-menu-open .site-header {
border-bottom-color: var(--color-line);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-6);
min-height: var(--header-height);
}
.wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
text-decoration: none;
margin-right: auto;
line-height: 1.1;
}
.wordmark__name {
font-family: var(--font-display);
font-size: 1.3125rem;
letter-spacing: -0.01em;
}
.wordmark__brand {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--color-gold);
}
.wordmark__brand span {
color: var(--color-text-faint);
letter-spacing: 0;
}
.primary-nav__list {
display: flex;
gap: var(--space-2);
}
.primary-nav a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: var(--space-3);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.primary-nav a::after {
content: '';
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: 8px;
height: 1px;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration) var(--ease-out);
}
.primary-nav a:hover,
.primary-nav a[aria-current='page'] {
color: var(--color-text);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current='page']::after {
transform: scaleX(1);
}
.site-header__tools {
display: flex;
align-items: center;
gap: var(--space-4);
}
.lang-switch ul {
display: inline-flex;
align-items: center;
border: var(--border-strong);
border-radius: var(--radius-sm);
}
.lang-switch li + li {
border-left: var(--border-strong);
}
.lang-switch a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 36px;
padding-inline: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--duration-fast), background-color var(--duration-fast);
}
.lang-switch a:hover {
color: var(--color-text);
}
.lang-switch a[aria-current='true'] {
background: var(--color-gold);
color: var(--color-gold-ink);
}
.lang-switch--large a {
min-height: 48px;
min-width: 56px;
font-size: var(--text-sm);
}
.lang-switch--footer {
margin-top: 0;
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-right: calc(-1 * var(--space-3));
}
.menu-toggle__bars,
.menu-toggle__bars::before {
display: block;
width: 24px;
height: 1.5px;
background: currentColor;
transition: transform var(--duration) var(--ease-out);
}
.menu-toggle__bars {
position: relative;
transform: translateY(-4px);
}
.menu-toggle__bars::before {
content: '';
position: absolute;
top: 8px;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars {
transform: translateY(0) rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before {
transform: translateY(-8px) rotate(-90deg);
}
.mobile-menu {
position: fixed;
inset: var(--header-height) 0 0 0;
z-index: var(--z-menu);
background: var(--color-bg);
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-menu[hidden] {
display: none;
}
.mobile-menu.is-open .mobile-menu__inner {
animation: menu-in var(--duration) var(--ease-out) both;
}
.mobile-menu__inner {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding-block: var(--space-6) var(--space-8);
}
.mobile-menu__list a {
display: block;
padding-block: var(--space-3);
border-bottom: var(--border);
font-family: var(--font-display);
font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
line-height: 1.15;
text-decoration: none;
}
.mobile-menu__list a[aria-current='page'] {
color: var(--color-gold);
}
.mobile-menu__contact {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.mobile-menu__contact a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--color-text-muted);
text-decoration: none;
}
.mobile-menu__contact a:hover {
color: var(--color-text);
}
@keyframes menu-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
.primary-nav,
.site-header__tools > .lang-switch {
display: none;
}
.menu-toggle {
display: inline-flex;
}
}
@media (min-width: 900px) {
.mobile-menu {
display: none !important;
}
}
.site-footer {
border-top: var(--border);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
font-size: var(--text-sm);
}
.site-footer__top {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
padding-bottom: var(--space-7);
border-bottom: var(--border);
}
.site-footer__mark {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
font-family: var(--font-display);
font-size: var(--text-xl);
}
.site-footer__mark img {
width: 2.75rem;
height: 2.75rem;
}
.site-footer__mark span {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--color-gold);
}
.site-footer__email {
font-size: var(--text-lg);
text-decoration-color: var(--color-gold);
overflow-wrap: anywhere;
}
.site-footer__email:hover {
color: var(--color-gold);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-7) var(--space-6);
padding-block: var(--space-7);
}
.site-footer__heading {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-faint);
margin-bottom: var(--space-3);
}
.site-footer__list a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--duration-fast);
}
.site-footer__list a:hover,
.site-footer__list a[aria-current='page'] {
color: var(--color-text);
}
.site-footer__list .icon {
width: 14px;
height: 14px;
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-4) var(--space-6);
padding-top: var(--space-5);
border-top: var(--border);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.site-footer__list--static li {
display: flex;
align-items: center;
min-height: 40px;
color: var(--color-text-muted);
}
.site-footer__list--static .site-footer__owner {
font-weight: 600;
color: var(--color-text);
}
.site-footer__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
}
.site-footer__policies {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-5);
}
.site-footer__policies a {
display: inline-flex;
align-items: center;
min-height: 40px;
color: var(--color-text-muted);
text-decoration: none;
}
.site-footer__policies a:hover,
.site-footer__policies a[aria-current='page'] {
color: var(--color-text);
}
.contact-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.contact-button {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 1px solid var(--color-control-border);
border-radius: var(--radius);
color: var(--color-text);
transition:
background-color var(--duration) var(--ease-out),
border-color var(--duration) var(--ease-out),
color var(--duration) var(--ease-out),
transform var(--duration) var(--ease-out);
}
.contact-button:hover,
.contact-button:focus-visible {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-gold-ink);
transform: translateY(-2px);
}
.contact-icon {
width: 22px;
height: 22px;
}
.section-head--stacked .section-head__single-line {
max-width: none;
}
.icon {
flex-shrink: 0;
width: 18px;
height: 18px;
transition: transform var(--duration) var(--ease-out);
}
.icon--up {
transform: rotate(-90deg);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-3) var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.btn:hover .icon {
transform: translateX(3px);
}
.btn--primary {
background: var(--color-gold);
color: var(--color-gold-ink);
}
.btn--primary:hover {
background: var(--color-gold-hover);
}
.btn--ghost {
border-color: var(--color-line-strong);
color: var(--color-text);
}
.btn--ghost:hover {
border-color: var(--color-gold);
}
.btn--light {
background: var(--color-text);
color: var(--color-gold-ink);
}
.btn--light:hover {
background: var(--color-gold);
}
.btn:active {
transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled='true'] {
opacity: 0.6;
cursor: progress;
}
.text-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-gold);
text-underline-offset: 0.35em;
}
.text-link:hover {
color: var(--color-gold);
}
.text-link:hover .icon {
transform: translateX(3px);
}
.text-link--muted {
color: var(--color-text-muted);
font-weight: 500;
text-decoration-color: var(--color-line-strong);
}
.text-button {
min-height: 44px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 0.3em;
}
.text-button:hover {
color: var(--color-text);
}
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
margin-top: var(--space-7);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
}
.back-link:hover {
color: var(--color-text);
}
.dash-list {
list-style: none;
padding: 0;
}
.dash-list li {
position: relative;
padding-left: 1.5rem;
}
.dash-list li + li {
margin-top: var(--space-3);
}
.dash-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.85em;
width: 0.75rem;
height: 1px;
background: var(--color-gold);
}
.inline-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
}
.inline-list li:not(:last-child)::after {
content: '·';
margin-left: var(--space-3);
color: var(--color-text-faint);
}
.index-row,
.work-row,
.channel-link,
.area-list a,
.section-index a {
position: relative;
text-decoration: none;
}
.index-row::before,
.work-row::before,
.channel-link::before,
.area-list a::before,
.section-index a::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 1px;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-slow) var(--ease-out);
}
.index-row:hover::before,
.index-row:focus-visible::before,
.work-row:hover::before,
.work-row:focus-visible::before,
.channel-link:hover::before,
.channel-link:focus-visible::before,
.area-list a:hover::before,
.area-list a:focus-visible::before,
.section-index a:hover::before,
.section-index a:focus-visible::before {
transform: scaleX(1);
}
.index-list {
border-bottom: var(--border);
}
.index-list li {
border-top: var(--border);
}
.index-row {
display: grid;
grid-template-columns: 2.5rem 1fr auto;
gap: var(--space-2) var(--space-4);
align-items: center;
padding-block: var(--space-6);
}
.index-row__number {
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-gold);
}
.index-row__title {
font-family: var(--font-display);
font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
line-height: 1.1;
transition: color var(--duration-slow) var(--ease-out);
}
.index-row__text {
grid-column: 2 / 3;
color: var(--color-text-muted);
max-width: 52ch;
}
.index-row__arrow {
grid-column: 3;
grid-row: 1;
align-self: center;
color: var(--color-text-faint);
}
.index-row,
.work-row,
.section-index a {
transform-origin: left center;
transition:
transform var(--duration-slow) var(--ease-out),
opacity var(--duration-slow) var(--ease-out),
filter var(--duration-slow) var(--ease-out);
}
.index-row:hover .index-row__title,
.index-row:focus-visible .index-row__title,
.work-row:hover .work-row__name,
.work-row:focus-visible .work-row__name,
.section-index a:hover,
.section-index a:focus-visible,
.section-index a:hover span,
.section-index a:focus-visible span {
color: var(--color-gold);
}
@media (hover: hover) {
.index-row:hover,
.index-row:focus-visible,
.work-row:hover,
.work-row:focus-visible {
transform: scale(1.025);
}
.section-index a:hover,
.section-index a:focus-visible {
transform: scale(1.06);
}
.index-list:has(.index-row:hover, .index-row:focus-visible) .index-row:not(:hover):not(:focus-visible),
.work-list:has(.work-row:hover, .work-row:focus-visible) .work-row:not(:hover):not(:focus-visible),
.section-index ol:has(a:hover, a:focus-visible) a:not(:hover):not(:focus-visible) {
opacity: 0.35;
filter: grayscale(1);
transform: scale(0.97);
}
}
@media (prefers-reduced-motion: reduce) {
.index-row,
.work-row,
.section-index a {
transform: none !important;
}
}
@media (min-width: 900px) {
.index-row {
grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 5fr) auto;
}
.index-row__text {
grid-column: 3;
}
.index-row__arrow {
grid-column: 4;
}
}
.work-list li {
border-top: var(--border);
}
.work-list li:last-child {
border-bottom: var(--border);
}
.work-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2) var(--space-5);
align-items: center;
padding-block: var(--space-6);
}
.work-row__name {
font-family: var(--font-display);
font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
line-height: 1.1;
letter-spacing: -0.01em;
transition: color var(--duration-slow) var(--ease-out);
}
.work-row__type {
grid-column: 1;
color: var(--color-text-muted);
}
.work-row__arrow {
grid-column: 2;
grid-row: 1 / span 2;
width: 28px;
height: 28px;
color: var(--color-text-faint);
}
@media (min-width: 900px) {
.work-row {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto;
}
.work-row__type {
grid-column: 2;
grid-row: 1;
}
.work-row__arrow {
grid-column: 3;
grid-row: 1;
}
}
.channel-list li {
border-top: var(--border);
}
.channel-list li:last-child {
border-bottom: var(--border);
}
.channel-link {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-1) var(--space-4);
padding-block: var(--space-4);
}
.channel-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-faint);
}
.channel-value {
grid-column: 1;
font-size: var(--text-lg);
overflow-wrap: anywhere;
}
.channel-action {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-gold);
text-align: right;
}
.channel-link:hover .channel-action .icon {
transform: translateX(3px);
}
.channel-list--compact .channel-action {
font-size: 0;
gap: 0;
}
.channel-list--compact .channel-value {
font-size: var(--text-base);
}
@media (max-width: 599px) {
.channel-link {
grid-template-columns: 1fr;
}
.channel-action {
grid-column: 1;
grid-row: auto;
justify-content: flex-start;
text-align: left;
}
.channel-list--compact .channel-link {
grid-template-columns: 1fr auto;
}
.channel-list--compact .channel-action {
grid-column: 2;
grid-row: 1 / span 2;
}
}
.profile-list li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 var(--space-4);
border-top: var(--border);
padding-block: var(--space-2);
}
.profile-list li:last-child {
border-bottom: var(--border);
}
.profile-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-faint);
}
.profile-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
color: var(--color-text-muted);
text-decoration: none;
overflow-wrap: anywhere;
}
.profile-link:hover {
color: var(--color-text);
}
.profile-link .icon {
width: 14px;
height: 14px;
color: var(--color-gold);
}
.area-list {
margin-top: var(--space-4);
}
.area-list li {
border-top: var(--border);
}
.area-list li:last-child {
border-bottom: var(--border);
}
.area-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 60px;
font-family: var(--font-display);
font-size: var(--text-xl);
}
.area-list a .icon {
color: var(--color-text-faint);
}
.area-list a:hover .icon {
color: var(--color-gold);
transform: translateX(4px);
}
.cv-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.table-wrap {
width: 100%;
}
.cert-table,
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.data-table caption {
text-align: left;
font-weight: 600;
padding-bottom: var(--space-3);
}
.cert-table th,
.cert-table td,
.data-table th,
.data-table td {
text-align: left;
vertical-align: top;
padding: var(--space-4) var(--space-4) var(--space-4) 0;
border-top: var(--border);
}
.cert-table thead th,
.data-table thead th {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-faint);
padding-block: var(--space-3);
border-top: 0;
}
.cert-table tbody th {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 400;
line-height: 1.3;
}
.cert-table tbody tr:last-child > *,
.data-table tbody tr:last-child > * {
border-bottom: var(--border);
}
.cert-table td {
color: var(--color-text-muted);
}
.cert-table__links {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-5);
}
.cert-table__links .text-link {
min-height: 32px;
}
.data-table tbody th {
font-weight: 600;
white-space: nowrap;
}
.data-table td {
color: var(--color-text-muted);
}
@media (max-width: 759px) {
.cert-table thead,
.data-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.cert-table tr,
.data-table tr {
display: block;
padding-block: var(--space-4);
border-top: var(--border);
}
.cert-table tbody tr:last-child,
.data-table tbody tr:last-child {
border-bottom: var(--border);
}
.cert-table th,
.cert-table td,
.data-table th,
.data-table td {
display: block;
padding: var(--space-1) 0;
border: 0 !important;
}
.cert-table td[data-label]::before,
.data-table td[data-label]::before {
content: attr(data-label) ': ';
color: var(--color-text-faint);
}
}
.contact-form {
display: grid;
gap: var(--space-5);
}
.contact-form__fields {
display: grid;
gap: var(--space-5);
}
@media (min-width: 600px) {
.contact-form__fields {
grid-template-columns: 1fr 1fr;
}
.field--full,
.field[data-field='email'],
.field[data-field='subject'] {
grid-column: 1 / -1;
}
}
.field {
display: grid;
gap: var(--space-2);
align-content: start;
}
.field__label {
font-size: var(--text-sm);
font-weight: 600;
}
.field__control {
width: 100%;
min-height: 52px;
padding: 0.8rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-control-border);
border-radius: var(--radius-sm);
font-size: 1rem;
line-height: 1.5;
transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
textarea.field__control {
min-height: 11rem;
resize: vertical;
}
.field__control:hover {
border-color: var(--color-text-muted);
}
.field__control:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 1px;
border-color: var(--color-gold);
background: var(--color-surface-2);
}
.field__control[aria-invalid='true'] {
border-color: var(--color-error);
}
.field__error {
font-size: var(--text-sm);
color: var(--color-error);
}
.field__error:empty {
display: none;
}
.field--trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-status {
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-line-strong);
border-left-width: 1px;
border-radius: var(--radius-sm);
font-weight: 500;
}
.form-status[hidden] {
display: none;
}
.form-status[data-state='success'] {
border-color: var(--color-gold);
color: var(--color-text);
}
.form-status[data-state='error'] {
border-color: var(--color-error);
color: var(--color-error);
}
.form-status:focus {
outline: none;
}
.estimate-note {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: var(--border);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.estimate-note[hidden] {
display: none;
}
.contact-form__submit {
justify-self: start;
}
.form-noscript {
color: var(--color-text-muted);
}
.range {
--fill: 0%;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 44px;
background: transparent;
cursor: pointer;
}
.range::-webkit-slider-runnable-track {
height: 2px;
background: linear-gradient(to right, var(--color-gold) var(--fill), var(--color-line-strong) var(--fill));
border-radius: 2px;
}
.range::-moz-range-track {
height: 2px;
background: var(--color-line-strong);
border-radius: 2px;
}
.range::-moz-range-progress {
height: 2px;
background: var(--color-gold);
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
margin-top: -12px;
border-radius: 50%;
background: var(--color-gold);
border: 6px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-gold);
transition: transform var(--duration-fast) var(--ease-out);
}
.range::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-gold);
border: 6px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-gold);
}
.range:active::-webkit-slider-thumb {
transform: scale(1.12);
}
.range:focus-visible {
outline: none;
}
.range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 1px var(--color-gold), 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-gold);
}
.range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 1px var(--color-gold), 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-gold);
}
.range__scale {
display: flex;
justify-content: space-between;
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
}
.reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition:
opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
}
.reveal-ready [data-reveal].is-visible {
opacity: 1;
transform: none;
}
@media (max-width: 479px) {
.button-row .btn,
.estimator__cta,
.contact-form__submit,
.closing__inner .btn,
.cv-actions .btn {
width: 100%;
}
}
mark.highlight {
padding: 0 0.18em;
background: var(--color-gold);
color: var(--color-gold-ink);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.cert-groups {
border-bottom: var(--border);
}
.cert-group {
border-top: var(--border);
}
.cert-group__summary {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: 72px;
padding-block: var(--space-4);
cursor: pointer;
list-style: none;
transition: color var(--duration) var(--ease-out);
}
.cert-group__summary::-webkit-details-marker {
display: none;
}
.cert-group__issuer {
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.2;
}
.cert-group__count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.cert-group__chevron {
margin-left: auto;
width: 12px;
height: 12px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-3px) rotate(45deg);
transition: transform var(--duration) var(--ease-out);
}
.cert-group[open] .cert-group__chevron {
transform: translateY(3px) rotate(-135deg);
}
.cert-group__summary:hover,
.cert-group[open] .cert-group__issuer {
color: var(--color-gold);
}
.cert-group .table-wrap {
padding-bottom: var(--space-5);
}
.cert-table__id {
display: block;
margin-top: var(--space-1);
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--color-text-faint);
overflow-wrap: anywhere;
}
@media (min-width: 760px) {
.cert-group .cert-table {
table-layout: fixed;
}
.cert-group .cert-table th:nth-child(1) { width: 52%; }
.cert-group .cert-table th:nth-child(2) { width: 18%; }
.cert-group .cert-table th:nth-child(3) { width: 30%; }
}
.hero {
padding-top: clamp(3.5rem, 2rem + 7vw, 9rem);
padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}
.hero__title {
max-width: 28ch;
font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4.5rem);
}
.hero__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-content: start;
}
.hero__body .lede {
max-width: 62rem;
}
.hero__lede-lead {
display: block;
color: var(--color-gold);
font-weight: 600;
}
.hero__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.hero__actions .btn {
width: min(100%, 24rem);
min-height: 60px;
padding-inline: var(--space-6);
font-size: var(--text-base);
}
.hero__actions .btn--primary {
font-weight: 800;
}
@media (min-width: 900px) {
.hero__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
row-gap: var(--space-7);
}
.hero__title {
grid-column: 1 / -1;
}
.hero__body {
grid-column: 1 / span 11;
}
.hero__actions {
grid-column: 1 / -1;
margin-top: calc(-1 * var(--space-4));
}
}
@media (prefers-reduced-motion: no-preference) {
.hero__title,
.hero__body,
.hero__actions {
animation: rise var(--duration-slow) var(--ease-out) both;
}
.hero__body {
animation-delay: 120ms;
}
.hero__actions {
animation-delay: 240ms;
}
}
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
.home-statement__inner {
display: grid;
justify-items: center;
gap: var(--space-6);
text-align: center;
}
.home-statement__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 0.6rem + 3.2vw, 3.5rem);
line-height: 1.3;
letter-spacing: -0.01em;
}
@media (min-width: 900px) {
.home-statement__title {
white-space: nowrap;
}
}
.home-statement__text {
max-width: 46rem;
color: var(--color-text);
}
.home-statement__cta {
min-height: 60px;
padding-inline: var(--space-6);
font-size: var(--text-lg);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.25em;
}
.cta-band .h2 {
font-size: clamp(2rem, 1rem + 2.4vw, 3.375rem);
}
.form-section__alternatives {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-5);
margin-top: var(--space-5);
}
.contact-hero__email {
display: inline-block;
margin-block: var(--space-6);
font-family: var(--font-display);
font-size: clamp(1.5rem, 0.6rem + 4.6vw, 4.5rem);
line-height: 1.1;
letter-spacing: -0.01em;
text-decoration: underline;
text-decoration-color: var(--color-gold);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
overflow-wrap: normal;
transition: color var(--duration-fast);
}
.contact-hero__email {
font-size: clamp(1.5rem, 0.7rem + 3.2vw, 3.25rem);
}
.contact-hero__email:hover {
color: var(--color-gold);
}
.contact-hero__direct {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
margin-block: var(--space-6);
}
.contact-hero__direct .contact-hero__email {
margin-block: 0;
}
.contact-hero__phone {
font-family: var(--font-display);
font-size: clamp(1.5rem, 0.7rem + 3.2vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.01em;
text-decoration: underline;
text-decoration-color: var(--color-gold);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
white-space: nowrap;
transition: color var(--duration-fast);
}
.contact-hero__phone:hover {
color: var(--color-gold);
}
.services-layout {
display: grid;
gap: var(--space-7);
padding-bottom: var(--section-space);
}
.section-index ol {
border-top: var(--border);
}
.section-index li {
border-bottom: var(--border);
}
.section-index a {
display: flex;
align-items: baseline;
gap: var(--space-3);
min-height: 48px;
padding-block: var(--space-3);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
}
.section-index a span {
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
transition: color var(--duration-fast);
}
.section-index a:hover,
.section-index a[aria-current='true'] {
color: var(--color-text);
}
.section-index a[aria-current='true'] span {
color: var(--color-gold);
}
@media (min-width: 900px) {
.services-layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.section-index {
grid-column: 1 / span 3;
}
.section-index ol {
position: sticky;
top: calc(var(--header-height) + var(--space-6));
}
.services-list {
grid-column: 5 / -1;
}
}
.service {
padding-block: var(--space-8);
border-top: var(--border);
}
.service:first-child {
padding-top: 0;
border-top: 0;
}
.service__head {
display: grid;
gap: var(--space-3);
margin-bottom: var(--space-7);
}
.service__number {
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-gold);
}
.service__summary {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 48ch;
}
.service__body {
display: grid;
gap: var(--space-7) var(--space-8);
}
.service__body .eyebrow {
margin-bottom: var(--space-3);
}
.service__offer p:first-of-type {
font-size: var(--text-lg);
line-height: 1.65;
max-width: 60ch;
}
.service__contribution p {
margin-bottom: var(--space-3);
color: var(--color-text-muted);
}
@media (min-width: 1200px) {
.service__body {
grid-template-columns: 1fr 1fr;
}
.service__offer {
grid-column: 1 / -1;
}
}
.process {
display: grid;
gap: var(--space-7) var(--space-6);
margin-top: var(--space-7);
counter-reset: step;
}
@media (min-width: 600px) {
.process {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.process {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.process__step {
padding-top: var(--space-5);
border-top: 1px solid var(--color-line-strong);
}
.process__number {
display: block;
font-family: var(--font-display);
font-size: var(--text-h2);
line-height: 1;
color: var(--color-gold);
}
.process__title {
margin-block: var(--space-4) var(--space-2);
font-size: var(--text-lg);
font-weight: 600;
}
.process__step p {
color: var(--color-text-muted);
}
.closing__inner {
display: grid;
gap: var(--space-5);
justify-items: start;
}
.closing__inner .h2 {
max-width: 22ch;
}
.project-index {
background: var(--color-bg);
border-block: var(--border);
}
.project-index__list {
display: grid;
}
.project-index__item {
position: relative;
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 0 var(--space-3);
align-items: baseline;
padding-block: var(--space-4);
text-decoration: none;
color: var(--color-text-muted);
transition: color var(--duration-fast);
}
.project-index__item::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 2px;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration) var(--ease-out);
}
.project-index__number {
font-size: var(--text-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
}
.project-index__name {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.2;
color: var(--color-text);
}
.project-index__type {
grid-column: 2;
font-size: var(--text-sm);
}
.project-index__item:hover,
.project-index__item[aria-current='true'] {
color: var(--color-text);
}
.project-index__item:hover::before,
.project-index__item[aria-current='true']::before {
transform: scaleX(1);
}
.project-index__item[aria-current='true'] .project-index__number {
color: var(--color-gold);
}
@media (max-width: 899px) {
.project-index__list li + li {
border-top: var(--border);
}
}
@media (min-width: 900px) {
.project-index {
position: sticky;
top: var(--header-height);
z-index: var(--z-sticky);
transition: border-color var(--duration) var(--ease-out);
}
.project-index__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
.project-index__item {
padding-block: var(--space-5);
}
.project-index__type {
font-size: var(--text-xs);
}
.page-projects {
--project-index-height: 7.5rem;
}
.page-projects .project {
scroll-margin-top: var(--project-index-height);
}
}
.project {
padding-block: var(--section-space);
border-top: var(--border);
}
.project:first-child {
border-top: 0;
}
.project:nth-child(even) {
background: var(--color-surface);
}
.project__head {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-7);
}
.project__type {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-gold);
}
.project__title {
font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
}
.project__title:focus {
outline: none;
}
.project__summary {
max-width: none;
}
.project__plate,
.project__media {
margin-bottom: var(--space-8);
border: var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.project__media img {
width: 100%;
}
.project__plate {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: var(--space-5) var(--space-6);
min-height: clamp(10rem, 7rem + 7vw, 14rem);
padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--duration) var(--ease-out), color var(--duration-slow) var(--ease-out);
}
.project:nth-child(even) .project__plate {
background: var(--color-surface-2);
}
.project__plate {
position: relative;
isolation: isolate;
}
.project__plate::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-slow) var(--ease-out);
}
.project__plate:hover,
.project__plate:focus-visible {
border-color: var(--color-gold);
color: var(--color-gold-ink);
}
.project__plate:hover::before,
.project__plate:focus-visible::before {
transform: scaleX(1);
}
.project__plate:hover .project__plate-label,
.project__plate:focus-visible .project__plate-label {
color: var(--color-gold-ink);
}
.project__plate:hover .project__plate-url,
.project__plate:focus-visible .project__plate-url {
text-decoration-color: var(--color-gold-ink);
}
.project__plate-label {
grid-column: 1 / -1;
align-self: start;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-gold);
}
.project__plate:hover .project__plate-label .icon {
transform: translate(2px, -2px);
}
.project__plate-url {
font-family: var(--font-display);
font-size: clamp(1.75rem, 0.8rem + 4vw, 5rem);
line-height: 1.05;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
text-decoration: underline;
text-decoration-color: var(--color-line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
transition: text-decoration-color var(--duration) var(--ease-out);
}
.project__plate-facts {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-muted);
text-align: right;
}
@media (max-width: 599px) {
.project__plate {
grid-template-columns: 1fr;
}
.project__plate-facts {
align-items: flex-start;
text-align: left;
}
}
.project__body {
display: grid;
gap: var(--space-7);
}
.project__facts {
display: grid;
gap: var(--space-5);
align-content: start;
}
.project__facts > div {
padding-top: var(--space-3);
border-top: var(--border);
}
.project__facts dt {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-faint);
margin-bottom: var(--space-2);
}
.project__facts dd {
font-size: var(--text-sm);
}
.link-stack li + li {
margin-top: var(--space-2);
}
.link-stack .text-link {
min-height: 32px;
}
.link-stack__url {
display: block;
font-size: var(--text-xs);
color: var(--color-text-faint);
overflow-wrap: anywhere;
}
.project__story {
display: grid;
}
.project__step {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-4);
padding-block: var(--space-5);
border-top: var(--border);
}
.project__step:last-child {
border-bottom: var(--border);
}
.project__step-number {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.3;
color: var(--color-gold);
}
.project__step-title {
margin-bottom: var(--space-2);
font-size: var(--text-base);
font-weight: 600;
color: var(--color-gold);
}
.project__step p {
color: var(--color-text-muted);
max-width: 72ch;
}
@media (min-width: 900px) {
.project__body {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.project__facts {
grid-column: 1 / span 3;
}
.project__story {
grid-column: 4 / -1;
}
}
.about-intro {
padding-top: clamp(3rem, 2rem + 5vw, 7rem);
padding-bottom: var(--section-space);
}
.about-intro__grid {
display: grid;
gap: var(--space-7);
}
.portrait {
width: min(100%, 22rem);
}
.portrait img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: var(--radius-sm);
}
.about-intro__text {
display: grid;
gap: var(--space-5);
align-content: center;
}
.about-intro__title {
font-size: var(--text-display-xl);
}
@media (max-width: 899px) {
.portrait {
width: min(70%, 18rem);
order: 2;
}
}
@media (min-width: 900px) {
.about-intro__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
}
.portrait {
grid-column: 1 / span 4;
width: 100%;
}
.about-intro__text {
grid-column: 6 / -1;
}
}
.principle-list {
display: grid;
margin-top: var(--space-6);
border-bottom: var(--border);
}
.principle-row {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-1) var(--space-4);
align-items: baseline;
padding-block: var(--space-5);
border-top: var(--border);
}
.principle-row__number {
font-family: var(--font-display);
font-size: var(--text-lg);
font-variant-numeric: tabular-nums;
color: var(--color-gold);
}
.principle-row__title {
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.2;
}
.principle-row__text {
grid-column: 2;
color: var(--color-text-muted);
}
.timeline {
display: grid;
margin-top: var(--space-7);
}
.timeline__item {
position: relative;
display: grid;
grid-template-columns: 15px 1fr;
align-content: start;
column-gap: var(--space-5);
padding-bottom: var(--space-6);
border-radius: var(--radius);
outline-offset: 6px;
}
.timeline__marker {
position: relative;
grid-row: 1 / span 2;
width: 15px;
}
.timeline__marker::before {
content: '';
position: absolute;
top: 0.4rem;
bottom: calc(-1 * var(--space-6) - 0.35rem);
left: 7px;
width: 1px;
background: var(--color-line-strong);
}
.timeline__item:last-child .timeline__marker::before {
display: none;
}
.timeline__dot {
position: absolute;
top: 0.35rem;
left: 0;
width: 15px;
height: 15px;
border: 1px solid var(--color-control-border);
border-radius: 50%;
background: var(--color-bg);
transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.timeline__period {
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
transition: color var(--duration) var(--ease-out);
}
.timeline__content {
grid-column: 2;
margin-top: var(--space-2);
}
.timeline__title {
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: 400;
line-height: 1.2;
color: var(--color-text-muted);
transition: color var(--duration) var(--ease-out);
}
.timeline__content p {
margin-top: var(--space-2);
color: var(--color-text-faint);
transition: color var(--duration) var(--ease-out);
}
.timeline__item:hover .timeline__period,
.timeline__item:focus-visible .timeline__period {
color: var(--color-gold);
}
.timeline__item:hover .timeline__title,
.timeline__item:focus-visible .timeline__title {
color: var(--color-text);
}
.timeline__item:hover .timeline__content p,
.timeline__item:focus-visible .timeline__content p {
color: var(--color-text-muted);
}
.timeline__item:hover .timeline__dot,
.timeline__item:focus-visible .timeline__dot {
background: var(--color-gold);
border-color: var(--color-gold);
box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.18);
}
@media (hover: none) {
.timeline__period { color: var(--color-gold); }
.timeline__title { color: var(--color-text); }
.timeline__content p { color: var(--color-text-muted); }
}
@media (min-width: 900px) {
.timeline {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
column-gap: var(--space-7);
}
.timeline__item {
grid-template-columns: 1fr;
grid-template-rows: 15px auto auto;
row-gap: var(--space-4);
padding-bottom: 0;
}
.timeline__marker {
grid-row: 1;
width: 100%;
height: 15px;
}
.timeline__marker::before {
top: 7px;
bottom: auto;
left: 7px;
right: calc(-1 * var(--space-7));
width: auto;
height: 1px;
}
.timeline__dot {
top: 0;
}
.timeline__content {
grid-column: 1;
margin-top: 0;
}
}
.contact-hero {
padding-top: clamp(3rem, 2rem + 5vw, 7rem);
padding-bottom: var(--section-space);
}
.contact-hero__grid {
display: grid;
gap: var(--space-8);
}
.contact-hero__title {
font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem);
max-width: 12ch;
margin-bottom: var(--space-5);
}
.contact-hero__channels {
display: grid;
gap: var(--space-3);
align-content: start;
}
.contact-hero__channels .eyebrow + * {
margin-bottom: var(--space-5);
}
@media (min-width: 1024px) {
.contact-hero__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.contact-hero__text {
grid-column: 1 / span 7;
}
.contact-hero__channels {
grid-column: 8 / -1;
padding-top: var(--space-4);
}
}
.estimator {
background: var(--color-surface);
border-block: var(--border);
}
.estimator__grid {
display: grid;
gap: var(--space-7);
}
.estimator__intro p {
margin-top: var(--space-4);
color: var(--color-text-muted);
max-width: 46ch;
}
.estimator__panel {
display: grid;
align-content: start;
gap: var(--space-6);
padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
background: var(--color-bg);
border: var(--border);
border-radius: var(--radius);
}
.estimator__label-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
margin-bottom: var(--space-2);
}
.estimator__label-row label {
font-weight: 600;
}
.estimator__pages {
font-family: var(--font-display);
font-size: var(--text-xl);
font-variant-numeric: tabular-nums;
color: var(--color-gold);
}
.estimator__result {
padding-top: var(--space-5);
border-top: var(--border);
}
.estimator__result-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.estimator__price {
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-block: var(--space-2);
}
.estimator__hint {
color: var(--color-text-muted);
max-width: 46ch;
}
.estimator__cta {
justify-self: start;
align-self: start;
}
.estimator__limits .eyebrow {
margin-bottom: var(--space-4);
}
.estimator__limits .dash-list {
color: var(--color-text-muted);
}
.estimator__disclaimer {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: var(--border);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
@media (min-width: 1024px) {
.estimator__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
row-gap: var(--space-7);
}
.estimator__intro {
grid-column: 1 / span 5;
}
.estimator__panel {
grid-column: 7 / -1;
grid-row: 1 / span 2;
}
.estimator__limits {
grid-column: 1 / span 5;
}
}
.form-section__grid {
display: grid;
gap: var(--space-7);
}
.form-section__intro p {
margin-top: var(--space-4);
color: var(--color-text-muted);
max-width: 40ch;
}
.form-section__privacy {
font-size: var(--text-sm);
}
.form-section__privacy a {
color: var(--color-text);
text-decoration-color: var(--color-gold);
}
@media (min-width: 1024px) {
.form-section__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.form-section__intro {
grid-column: 1 / span 4;
}
.contact-form {
grid-column: 6 / -1;
}
}
.legal {
padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--section-space);
}
.legal__grid {
display: grid;
gap: var(--space-7);
}
.legal__title {
font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
}
.legal__updated {
margin-top: var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.legal__body {
max-width: 70ch;
}
.legal__body > * + * {
margin-top: var(--space-6);
}
.legal__section {
padding-top: var(--space-6);
border-top: var(--border);
}
.legal__section .h3 {
margin-bottom: var(--space-3);
}
.legal__section p + p {
margin-top: var(--space-3);
}
.legal__section p {
color: var(--color-text-muted);
}
.legal__section strong {
color: var(--color-text);
}
@media (min-width: 1024px) {
.legal__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.legal__head {
grid-column: 1 / span 4;
position: sticky;
top: calc(var(--header-height) + var(--space-6));
align-self: start;
}
.legal__body {
grid-column: 5 / -1;
}
}
.not-found {
padding-block: clamp(4rem, 3rem + 8vw, 10rem);
}
.not-found__inner {
display: grid;
gap: var(--space-5);
justify-items: start;
}
.not-found__code {
font-family: var(--font-display);
font-size: var(--text-h2);
color: var(--color-gold);
}
@media (min-width: 1024px) {
.cta-band .form-section__intro {
grid-column: 1 / span 6;
}
.cta-band .contact-form {
grid-column: 7 / -1;
}
}
.page-about .section {
padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.page-about .about-intro {
padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.cv-block {
display: grid;
justify-items: center;
gap: var(--space-4);
text-align: center;
}
.cv-block__text {
color: var(--color-text-muted);
}
.cv-actions--centered {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 40rem);
margin-top: var(--space-4);
}
.cv-actions--centered .btn {
min-height: 60px;
font-size: var(--text-base);
font-weight: 800;
}
@media (max-width: 599px) {
.cv-actions--centered {
grid-template-columns: 1fr;
}
}
.contact-hero__email,
.contact-hero__phone {
color: var(--color-gold);
}
.contact-hero__email:hover,
.contact-hero__phone:hover {
color: var(--color-text);
}