/* ==========================================================================
AVRAMOSKI MEDIA — GLOBAL STYLESHEET
Loads on every page. Order: tokens/base -> loader/transition ->
flow button -> navbar/menu -> footer.
THEMING
The page is light by default. Any section becomes dark by adding
data-theme="dark" to it. Components never hard-code a colour: they read
--fg, --fg-2, --hair, --bg and --accent, which the theme block swaps.
Flipping a section is therefore a one-attribute change, and the header
inverts itself over it automatically (main.js watches data-theme).
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root{
/* Raw surfaces */
--paper:#FFFFFF; /* page default */
--paper-raised:#FAFAF9; /* faint lift, used sparingly */
--slate:#0E0E10; /* dark sections. Not pure black. */
--slate-raised:#17171A;
--slate-menu:#09090B;
/* Raw ink */
--ink:#111114;
--ink-2:rgba(17,17,20,.62);
--ink-3:rgba(17,17,20,.42);
--ink-hair:rgba(17,17,20,.12);
--light:#F5F5F3;
--light-2:rgba(245,245,243,.64);
--light-3:rgba(245,245,243,.42);
--light-hair:rgba(245,245,243,.15);
/* ------------------------------------------------------------------
ACCENT — petrol.
No single hue clears 4.5:1 against BOTH white and near-black, so the
accent is a pair: the deep value on light surfaces, a lifted value on
dark ones. Same hue, two lightnesses.
#0F5C63 on #FFFFFF -> 7.69:1
#57CAD4 on #0E0E10 -> 9.92:1
Chosen because it is far from Enderby's cobalt, it is not yellow
(which would contradict the "FREE INSPECTION in yellow" argument on
the roofing page), and it is not a warning colour.
To change it, change these two lines and check contrast first.
------------------------------------------------------------------ */
--accent-on-light:#0F5C63;
--accent-on-dark:#57CAD4;
/* Contextual — light is the default context */
--bg:var(--paper);
--bg-raised:var(--paper-raised);
--fg:var(--ink);
--fg-2:var(--ink-2);
--fg-3:var(--ink-3);
--hair:var(--ink-hair);
--accent:var(--accent-on-light);
--accent-contrast:#FFFFFF; /* label sitting on an accent fill */
/* Layout */
--edge:clamp(1.25rem, 4vw, 5rem);
--container-max:1280px;
--container-read:820px;
--space-section:clamp(3.25rem, 2rem + 6vw, 9rem);
--radius-0:0;
--radius-xs:2px;
/* Motion */
--ease-out-expo:cubic-bezier(.16, 1, .3, 1);
--ease-in-quart:cubic-bezier(.5, 0, .75, 0);
--ease-smooth:cubic-bezier(.65, 0, .35, 1);
--dur-fast:200ms;
--dur-base:400ms;
--dur-slow:800ms;
--toggle-dur:800ms; /* hamburger choreography */
/* Z-layers */
--z-header:100;
--z-menu:200;
--z-transition:250;
/* Type */
--font-display:"Schibsted Grotesk","Inter",system-ui,sans-serif;
--font-body:"Inter",system-ui,-apple-system,sans-serif;
}
/* --- The dark context ------------------------------------------------------
Add data-theme="dark" to any section. Everything inside re-reads its
colours from here. Nothing else needs changing. */
[data-theme="dark"]{
--bg:var(--slate);
--bg-raised:var(--slate-raised);
--fg:var(--light);
--fg-2:var(--light-2);
--fg-3:var(--light-3);
--hair:var(--light-hair);
--accent:var(--accent-on-dark);
--accent-contrast:var(--slate);
background:var(--bg);
color:var(--fg);
}
/* ==========================================================================
2. RESET + BASE
========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scrollbar-width:thin;scrollbar-color:rgba(17,17,20,.28) transparent}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:rgba(17,17,20,.22)}
::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--accent-on-light);color:#fff}
body{
font-family:var(--font-body);
background:var(--paper);
color:var(--ink);
min-height:100svh;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.5;
}
img,video{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Lenis housekeeping */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* FOUC guard partner rule. Each page also needs the inline head script. */
html.js [data-reveal]{visibility:hidden}
/* ==========================================================================
3. TYPE SCALE
NOTE: CSS requires whitespace around + inside clamp(). Without it the
whole declaration is silently dropped and the element loses its size.
========================================================================== */
.h1{font-family:var(--font-display);font-size:clamp(1.95rem, 1.1rem + 3.9vw, 5rem);
font-weight:600;line-height:1.02;letter-spacing:-.032em;color:var(--fg)}
.h2{font-family:var(--font-display);font-size:clamp(1.7rem, 1.15rem + 2.3vw, 3.5rem);
font-weight:600;line-height:1.07;letter-spacing:-.028em;color:var(--fg)}
.h3{font-family:var(--font-display);font-size:clamp(1.375rem, 1.2rem + .9vw, 1.75rem);
font-weight:600;line-height:1.18;letter-spacing:-.022em;color:var(--fg)}
.lead{font-size:clamp(1.0625rem, .98rem + .6vw, 1.5rem);line-height:1.42;
letter-spacing:-.014em;color:var(--fg-2)}
.copy{font-size:clamp(1rem, .96rem + .25vw, 1.125rem);line-height:1.62;color:var(--fg-2)}
.label{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
line-height:1;color:var(--fg-3)}
.label-sm{font-size:.6875rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;line-height:1;color:var(--fg-3)}
.u-accent{color:var(--accent);font-style:normal}
/* ==========================================================================
4. LAYOUT HELPERS
========================================================================== */
.section{padding-block:var(--space-section);background:var(--bg);color:var(--fg)}
.section--tight{padding-block:calc(var(--space-section) * .6)}
.shell{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--edge)}
.read{max-width:var(--container-read);margin-inline:auto}
.ctr{text-align:center}
.raised{background:var(--bg-raised)}
.grain{position:absolute;inset:0;opacity:.03;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.u-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
/* ==========================================================================
5. LOADER — film gate. Always dark, whatever the page theme.
Display gated on html.js, so no JavaScript means no overlay, ever.
========================================================================== */
.loader{display:none}
html.js .loader{display:block;position:fixed;inset:0;z-index:var(--z-transition)}
html.js.loader-skip .loader{display:none}
.loader__backdrop{position:absolute;inset:0;
background:linear-gradient(158deg, #14141A 0%, #0E0E10 45%, #08080A 100%)}
.loader__panel{position:absolute;left:0;right:0;height:50%;background:var(--slate)}
.loader__panel--top{top:0}
.loader__panel--bottom{bottom:0}
/* A thin light seam. Monochrome, so it reads as a film gate rather than a
brand colour looking for somewhere to live. */
.loader__line{position:absolute;left:0;right:0;height:1px;opacity:0;
background:linear-gradient(90deg,
rgba(245,245,243,.15) 0%,
rgba(245,245,243,.95) 50%,
rgba(245,245,243,.15) 100%)}
.loader__line--top{bottom:0}
.loader__line--bottom{top:0}
.loader__mark{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);
margin:0;opacity:0}
.loader__mark img{width:clamp(150px, 34vw, 300px);height:auto}
/* ==========================================================================
6. PAGE TRANSITION
========================================================================== */
html.pt-in::before{content:"";position:fixed;inset:0;z-index:var(--z-transition);
background:var(--slate)}
.pt{position:fixed;inset:0;z-index:var(--z-transition);pointer-events:none}
.pt__panel{position:absolute;left:0;right:0;height:calc(50% + 1px);background:var(--slate)}
.pt__panel--top{top:0}
.pt__panel--bottom{bottom:0}
.pt__seam{position:absolute;top:50%;left:0;right:0;height:1px;margin-top:-.5px;
background:var(--light);box-shadow:0 0 20px rgba(245,245,243,.35);opacity:0}
/* ==========================================================================
7. FLOW BUTTON
Markup:
Label
Label
========================================================================== */
.btn-flow{
--flow-ink:var(--fg);
--flow-ink-invert:var(--bg);
--flow-flood:var(--fg);
--flow-border:var(--hair);
--flow-border-hover:var(--fg);
--flow-tint:transparent;
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
padding:16px 32px;
border:1px solid var(--flow-border);
border-radius:var(--radius-xs);
background-color:var(--flow-tint);
font-family:var(--font-body);font-size:.75rem;font-weight:500;line-height:1;
letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
white-space:nowrap;color:var(--flow-ink);
-webkit-tap-highlight-color:transparent;
transition:border-color var(--dur-fast) ease;
}
/* Primary. Solid accent fill, label inverts on hover. One per viewport. */
.btn-flow--solid{
--flow-ink:var(--accent-contrast);
--flow-ink-invert:var(--accent);
--flow-flood:var(--bg);
--flow-border:var(--accent);
--flow-border-hover:var(--accent);
--flow-tint:var(--accent);
font-weight:600;
}
[data-theme="dark"] .btn-flow--solid{ --accent-contrast:var(--slate); }
.btn-flow__flood{position:absolute;left:-8px;bottom:-8px;width:16px;height:16px;
border-radius:50%;background-color:var(--flow-flood);transform:scale(0);
transform-origin:center;z-index:-1;pointer-events:none;
transition:transform 1000ms var(--ease-out-expo)}
.btn-flow__label{position:relative;display:block;overflow:hidden;padding:2px 0}
.btn-flow__text{display:block;transition:transform 600ms var(--ease-out-expo) 60ms}
.btn-flow__text--dup{position:absolute;inset:0;padding:inherit;
transform:translateY(115%);color:var(--flow-ink-invert)}
@media (hover:hover) and (pointer:fine){
.btn-flow:hover{border-color:var(--flow-border-hover)}
.btn-flow:hover .btn-flow__flood{transform:scale(45)}
.btn-flow:hover .btn-flow__text{transform:translateY(-115%)}
.btn-flow:hover .btn-flow__text--dup{transform:translateY(0)}
}
.btn-flow:focus-visible{border-color:var(--flow-border-hover);
outline:2px solid var(--fg);outline-offset:3px}
.btn-flow:focus-visible .btn-flow__flood{transform:scale(45)}
.btn-flow:focus-visible .btn-flow__text{transform:translateY(-115%)}
.btn-flow:focus-visible .btn-flow__text--dup{transform:translateY(0)}
/* Underline link */
.link-u{position:relative;display:inline-block;text-decoration:none;font-weight:500;
color:var(--accent)}
.link-u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:right;
transition:transform var(--dur-base) var(--ease-out-expo)}
@media (hover:hover) and (pointer:fine){
.link-u:hover::after{transform:scaleX(1);transform-origin:left}
}
.link-u:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* ==========================================================================
8. SHELL — NAVBAR + HAMBURGER + FULL-SCREEN MENU
Ported from the Enderby design system. Structure, timing and keyframes
are unchanged; only the colour tokens are swapped. Do not rewrite these
by hand — the hamburger keyframes and the menu's asymmetric in/out
choreography depend on exact values and on the class names main.js sets
(.to-x, .to-o, .is-open, .closing).
========================================================================== */
/* --- Navbar ---------------------------------------------------------------
Transparent at top, blurred surface after 80px of scroll. */
.site-header{
position:fixed;
top:0; left:0; right:0;
z-index:var(--z-header);
display:flex;
align-items:center;
justify-content:space-between;
padding:1.25rem var(--edge);
transition:background-color var(--dur-fast) ease,
backdrop-filter var(--dur-fast) ease,
border-color var(--dur-fast) ease;
border-bottom:1px solid transparent;
}
.site-header.scrolled{
background:rgba(255,255,255,0.82);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
border-bottom-color:var(--ink-hair);
}
.site-header--on-dark.scrolled{
background:rgba(14,14,16,0.68);
border-bottom-color:var(--light-hair);
}
/* While the menu is open the header rides above the overlay */
.site-header.menu-open{
z-index:calc(var(--z-menu) + 1);
background:transparent;
-webkit-backdrop-filter:none;
backdrop-filter:none;
border-bottom-color:transparent;
}
.site-header--on-dark .nav-toggle{ --bar:var(--light); }
.site-logo{display:inline-flex;align-items:center;line-height:0}
.site-logo__img{display:block;height:24px;width:auto}
.site-logo--footer .site-logo__img{height:34px}
/* Theme swap: ink logo on light surfaces (default), paper logo on dark */
.site-logo__img--paper{display:none}
[data-theme="dark"] .site-logo__img--ink{display:none}
[data-theme="dark"] .site-logo__img--paper{display:block}
.site-header.menu-open .site-logo__img--ink{display:none}
.site-header.menu-open .site-logo__img--paper{display:block}
.site-header--on-dark:not(.menu-open) .site-logo__img--ink{display:none}
.site-header--on-dark:not(.menu-open) .site-logo__img--paper{display:block}
@media (hover:hover) and (pointer:fine){
.site-logo{transition:opacity 200ms ease}
.site-logo:hover{opacity:.75}
}
.site-logo:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:reduce){ .site-logo{transition:none} }
@media (max-width:767px){
.site-logo__img{height:19px}
.site-logo--footer .site-logo__img{height:27px}
}
/* --- Hamburger: bars converge, retract, redraw as an X, and back --------- */
.nav-toggle{
--bar:var(--ink);
position:relative;
width:48px;
height:48px;
background:none;
border:0;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.menu-open .nav-toggle{--bar:var(--light)}
.nav-toggle::before,
.nav-toggle::after{
content:"";
position:absolute;
left:0;
width:100%;
height:2px;
border-radius:2px;
background:var(--bar);
transition:background-color var(--dur-fast) ease, width var(--dur-fast) ease;
animation-duration:var(--toggle-dur);
animation-timing-function:ease;
animation-fill-mode:both;
}
.nav-toggle::before{top:15px}
.nav-toggle::after{top:31px}
/* Rest-state hover: bottom bar shortens. Only active when no toggle
animation classes are applied (main.js strips .to-o when the close
animation finishes). */
.nav-toggle:not(.to-x):not(.to-o):hover::after{width:62%}
.nav-toggle.to-x::before{animation-name:bar-top-to-x}
.nav-toggle.to-x::after {animation-name:bar-bot-to-x}
.nav-toggle.to-o::before{animation-name:bar-top-to-o}
.nav-toggle.to-o::after {animation-name:bar-bot-to-o}
@keyframes bar-top-to-x{
0% {top:15px; left:0; width:100%; transform:rotate(0)}
32% {top:23px; left:0; width:100%; transform:rotate(0)}
52% {top:23px; left:48px; width:0; transform:rotate(0)}
60% {top:23px; left:24px; width:0; transform:rotate(45deg)}
100% {top:23px; left:0; width:100%; transform:rotate(45deg)}
}
@keyframes bar-bot-to-x{
0% {top:31px; left:0; width:100%; transform:rotate(0)}
32% {top:23px; left:0; width:100%; transform:rotate(0)}
52% {top:23px; left:0; width:0; transform:rotate(0)}
60% {top:23px; left:24px; width:0; transform:rotate(-45deg)}
100% {top:23px; left:0; width:100%; transform:rotate(-45deg)}
}
@keyframes bar-top-to-o{
0% {top:23px; left:0; width:100%; transform:rotate(45deg)}
40% {top:23px; left:24px; width:0; transform:rotate(45deg)}
48% {top:23px; left:0; width:0; transform:rotate(0)}
72% {top:23px; left:0; width:100%; transform:rotate(0)}
100% {top:15px; left:0; width:100%; transform:rotate(0)}
}
@keyframes bar-bot-to-o{
0% {top:23px; left:0; width:100%; transform:rotate(-45deg)}
40% {top:23px; left:24px; width:0; transform:rotate(-45deg)}
48% {top:23px; left:48px; width:0; transform:rotate(0)}
72% {top:23px; left:0; width:100%; transform:rotate(0)}
100% {top:31px; left:0; width:100%; transform:rotate(0)}
}
/* ==========================================================================
9. FULL-SCREEN MENU
Open: panel wipes in 400ms, then items stagger in 60ms apart.
Close: items stagger OUT fast (200ms, reversed) then the panel wipes.
Asymmetric in/out, driven by .closing plus main.js.
========================================================================== */
.menu{
position:fixed;
inset:0;
z-index:var(--z-menu);
background:var(--slate-menu);
transform:translateY(-100%);
transition:transform var(--dur-base) var(--ease-out-expo),
visibility 0s var(--dur-base);
visibility:hidden;
display:flex;
align-items:center;
justify-content:center;
padding:6rem var(--edge);
overflow:hidden;
}
.menu.open{
transform:translateY(0);
visibility:visible;
transition:transform var(--dur-base) var(--ease-out-expo);
}
/* Ambient light pools. No filter:blur — the radial falloff is the blur,
which is far cheaper to paint. */
.menu .glow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.menu .glow-1{
width:60vmax; height:60vmax;
right:-26vmax; top:10%;
background:radial-gradient(circle,
rgba(245,245,243,0.10) 0%,
rgba(245,245,243,0.04) 40%,
transparent 68%);
animation:drift-1 24s ease-in-out infinite alternate;
}
.menu .glow-2{
width:44vmax; height:44vmax;
left:-20vmax; bottom:-18vmax;
background:radial-gradient(circle,
rgba(245,245,243,0.08) 0%,
rgba(245,245,243,0.03) 40%,
transparent 68%);
animation:drift-2 30s ease-in-out infinite alternate;
}
@keyframes drift-1{
from{transform:translate(0,0) scale(1)}
to {transform:translate(-6vmax,8vmax) scale(1.12)}
}
@keyframes drift-2{
from{transform:translate(0,0) scale(1)}
to {transform:translate(7vmax,-5vmax) scale(1.08)}
}
/* Static on mobile — battery */
@media (max-width:768px){ .menu .glow{animation:none;will-change:auto} }
/* Film grain, dark takeover surfaces only */
.menu::after{
content:"";
position:absolute;
inset:0;
opacity:0.035;
mix-blend-mode:overlay;
pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* --- Links column */
.menu-inner{position:relative;width:fit-content}
.menu-links{list-style:none}
.menu-links li{overflow:hidden} /* line mask for reveal and exit */
.menu-link{
display:flex;
align-items:center;
gap:clamp(1.25rem, 3vw, 2.5rem);
padding:0.35rem 0;
text-decoration:none;
transform:translateY(115%);
transition:transform var(--dur-slow) var(--ease-out-expo);
}
.menu-link .num{
font-weight:700;
font-size:clamp(0.9rem, 0.7rem + 0.9vw, 1.5rem);
letter-spacing:0.02em;
font-variant-numeric:tabular-nums;
color:var(--light);
min-width:2.2ch;
transition:color var(--dur-fast) ease;
}
.menu-link .txt{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(2.5rem, 1.67rem + 3.7vw, 5rem);
line-height:1.02;
letter-spacing:-0.03em;
text-transform:uppercase;
color:var(--light);
overflow:hidden;
}
/* Roll hover: label flips up, the duplicate rolls in beneath */
.menu-link .roll{
position:relative;
display:block;
transition:transform 350ms var(--ease-out-expo);
}
.menu-link .roll::after{
content:attr(data-text);
position:absolute;
top:100%;
left:0;
color:var(--accent-on-dark);
}
.menu-link:hover .roll,
.menu-link:focus-visible .roll{transform:translateY(-100%)}
/* Current page: dimmed, no roll. You are here. */
.menu-link[aria-current="page"] .txt,
.menu-link[aria-current="page"] .num{color:var(--light-3)}
.menu-link[aria-current="page"]:hover .roll,
.menu-link[aria-current="page"]:focus-visible .roll{transform:none}
/* --- Social row */
.menu-social{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:clamp(1.5rem, 3vw, 2.5rem);
margin-top:clamp(3rem, 6vh, 4.5rem);
overflow:hidden;
}
.menu-social a{
display:inline-block;
font-weight:700;
font-size:0.875rem;
letter-spacing:0.06em;
text-transform:uppercase;
text-decoration:none;
color:var(--light);
transform:translateY(140%);
transition:transform var(--dur-slow) var(--ease-out-expo),
color var(--dur-fast) ease;
}
.menu-social a:hover,
.menu-social a:focus-visible{color:var(--accent-on-dark)}
/* --- Staggered reveal: 60ms per item after the 400ms wipe */
.menu.open .menu-link,
.menu.open .menu-social a{transform:translateY(0)}
.menu.open li:nth-child(1) .menu-link{transition-delay:400ms}
.menu.open li:nth-child(2) .menu-link{transition-delay:460ms}
.menu.open li:nth-child(3) .menu-link{transition-delay:520ms}
.menu.open li:nth-child(4) .menu-link{transition-delay:580ms}
.menu.open li:nth-child(5) .menu-link{transition-delay:640ms}
.menu.open .menu-social a{transition-delay:700ms}
/* --- Exit choreography: items out fast and reversed, then the wipe.
.closing is added while .open is still on; main.js removes both after
~240ms and the panel wipe takes over. */
.menu.open.closing .menu-link{
transform:translateY(-115%);
transition:transform 200ms var(--ease-in-quart);
}
.menu.open.closing .menu-social a{
transform:translateY(-140%);
transition:transform 200ms var(--ease-in-quart);
transition-delay:0ms;
}
.menu.open.closing li:nth-child(5) .menu-link{transition-delay:0ms}
.menu.open.closing li:nth-child(4) .menu-link{transition-delay:30ms}
.menu.open.closing li:nth-child(3) .menu-link{transition-delay:60ms}
.menu.open.closing li:nth-child(2) .menu-link{transition-delay:90ms}
.menu.open.closing li:nth-child(1) .menu-link{transition-delay:120ms}
.menu:not(.open) .menu-link,
.menu:not(.open) .menu-social a{transition:none}
/* --- Reduced motion: simple fades and instant states */
@media (prefers-reduced-motion:reduce){
.nav-toggle::before,
.nav-toggle::after{animation:none !important;transition:background-color var(--dur-fast) ease}
.nav-toggle.is-open::before{top:23px;transform:rotate(45deg)}
.nav-toggle.is-open::after {top:23px;transform:rotate(-45deg)}
.menu{
transform:none;
opacity:0;
transition:opacity var(--dur-fast) ease, visibility 0s var(--dur-fast);
}
.menu.open{opacity:1;transition:opacity var(--dur-fast) ease}
.menu-link,
.menu-social a,
.menu-link .roll{transform:none !important;transition:none !important}
.menu .glow{animation:none}
}
/* ==========================================================================
10. FOOTER — always dark, the page's closing bookend
========================================================================== */
.site-footer{background:var(--slate);color:var(--light);
padding-block:var(--space-section) 40px;position:relative}
.site-footer__inner{max-width:var(--container-max);margin-inline:auto;
padding-inline:var(--edge)}
.site-footer__main{display:grid;grid-template-columns:1.15fr 1fr;
gap:clamp(48px, 7vw, 110px);align-items:start}
.site-footer__headline{font-family:var(--font-display);
font-size:clamp(2rem, 1.4rem + 2.6vw, 3.5rem);font-weight:600;line-height:1.06;
letter-spacing:-.028em;margin-bottom:20px}
.site-footer__sub{font-size:1.0625rem;line-height:1.55;color:rgba(245,245,243,.64);
max-width:44ch;margin-bottom:32px}
.site-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.site-footer__eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:rgba(245,245,243,.42);margin-bottom:18px}
.site-footer__address{font-style:normal;font-size:.9375rem;line-height:1.6;
color:rgba(245,245,243,.64);margin-bottom:14px}
.site-footer__email{display:inline-block;font-size:.9375rem;color:var(--light);
text-decoration:none;margin-bottom:22px;padding-bottom:3px;
border-bottom:1px solid var(--accent-on-dark);
transition:border-color var(--dur-fast) ease}
.site-footer__email:hover{color:var(--accent-on-dark)}
.site-footer__nav li{margin-bottom:12px}
.site-footer__nav a{font-size:.9375rem;color:rgba(245,245,243,.64);
text-decoration:none;transition:color var(--dur-fast) ease}
.site-footer__nav a:hover{color:var(--accent-on-dark)}
.site-footer__socials{display:flex;gap:10px}
.social-chip{position:relative;display:grid;place-items:center;width:38px;height:38px;
overflow:hidden;border:1px solid rgba(245,245,243,.15);border-radius:var(--radius-xs);
color:rgba(245,245,243,.64);
transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease}
.social-chip__icon{grid-area:1/1;transition:transform 460ms var(--ease-out-expo)}
.social-chip__icon--dup{transform:translateY(120%)}
@media (hover:hover) and (pointer:fine){
.social-chip:hover{border-color:var(--accent-on-dark);color:var(--accent-on-dark)}
.social-chip:hover .social-chip__icon{transform:translateY(-120%)}
.social-chip:hover .social-chip__icon--dup{transform:translateY(0)}
}
.social-chip:focus-visible{outline:2px solid var(--light);outline-offset:3px}
.site-footer__legal{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
margin-top:clamp(56px, 7vw, 88px);padding-top:24px;
border-top:1px solid rgba(245,245,243,.15);
font-size:.75rem;color:rgba(245,245,243,.42)}
.site-footer__legal a{color:rgba(245,245,243,.42);text-decoration:none}
.site-footer__legal a:hover{color:var(--light)}
/* --- Curtain reveal, opt-in ------------------------------------------------
Add .site-footer--curtain to the footer and .page-content to .
enhancements.js keeps the spacing in sync. */
.site-footer--curtain{position:fixed;bottom:0;left:0;right:0;z-index:0}
.page-content{position:relative;z-index:1;background:var(--paper);
margin-bottom:var(--footer-h, 0px);
box-shadow:0 24px 48px -12px rgba(0,0,0,.3)}
/* ==========================================================================
10b. ICONS
One matched set, drawn inline as SVG. 1.4 stroke, no rounded-square
containers. Used only where an icon does work the copy cannot: scanning
a list, or separating a yes column from a no column. A statement that
needs an icon to land is not a strong enough statement.
========================================================================== */
.ico{width:30px;height:30px;display:block;fill:none;stroke:var(--accent);
stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:38px;height:38px}
.ico--sm{width:14px;height:14px}
.ico--muted{stroke:var(--fg-3)}
.ico--onfill{stroke:var(--accent-contrast)}
/* ==========================================================================
11. REVEAL SUPPORT (driven by animations.js)
========================================================================== */
.rv-mask{display:block;overflow:hidden}
.rv-line{display:block}
/* ==========================================================================
12. REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion:reduce){
.btn-flow,.btn-flow__flood,.btn-flow__text,
.social-chip,.social-chip__icon,.site-header,
.link-u,.link-u::after,.site-footer__email{transition:none !important}
html{scroll-behavior:auto}
}
/* ==========================================================================
13. RESPONSIVE
========================================================================== */
@media (max-width:900px){
.site-footer__main{grid-template-columns:1fr;gap:48px}
/* Tap targets. Anything finger-operated needs roughly 44px of height.
These are text links, so the height comes from padding rather than
from making the type bigger. */
.site-footer__nav a,
.site-footer__legal a,
.menu-social a{display:inline-block;padding-block:11px}
.site-footer__nav li{margin-bottom:2px}
.site-footer__email{padding-block:9px}
.site-logo{padding-block:12px}
.social-chip{width:44px;height:44px}
.link-u{padding-block:10px}
}
@media (max-width:560px){
.site-footer__cols{grid-template-columns:1fr;gap:28px}
.menu-inner{padding-top:100px}
}