@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/public-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/public-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/public-sans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/public-sans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
--ink:         oklch(0.232 0.015 248.5);
--paper:       oklch(0.993 0.003 228.8);
--primary:     oklch(0.297 0.018 248.4);
--accent:      oklch(0.485 0.085 246.5);
--accent-deep: oklch(0.440 0.079 247.4);
--sky:         oklch(0.946 0.008 236.6);
--postchange:  oklch(0.763 0.032 234.6);
--gull:        oklch(0.662 0.036 234.4);
--pine:        oklch(0.447 0.042 164.0);
--pine-deep:   oklch(0.408 0.040 164.0);
--font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--wide: 1160px;
--narrow: 760px;
--radius: 14px;
--radius-sm: 8px;
--ease: cubic-bezier(.33,.9,.35,1);
--t-front: .16s;
--t-settle: .22s;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
figure { margin: 0; }
::placeholder { color: color-mix(in oklab, var(--gull) 40%, transparent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--postchange); color: var(--ink); }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 750;
font-stretch: 113%;
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--primary);
margin: 0 0 .5em;
text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
strong { font-weight: 600; }
small { font-size: .875rem; }
.kicker {
font-family: var(--font-display);
font-weight: 620;
font-stretch: 76%;
font-size: .8125rem;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--accent-deep);
display: block;
margin: 0 0 .9em;
}
.on-dark .kicker { color: var(--postchange); }
.mono {
font-family: var(--font-mono);
font-size: .8125rem;
letter-spacing: .01em;
}
.lede { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); line-height: 1.55; color: var(--ink); max-width: 34em; }
.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.wrap--narrow { max-width: var(--narrow); }
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.band--sky { background: var(--sky) url(/assets/textures/pattern-chevron-drift-whisper.svg) repeat; }
.band--wash { background: var(--sky) url(/assets/textures/texture-glass-wash.webp) center / cover no-repeat; }
.band--paper { background: var(--paper); }
.on-dark {
background: var(--primary) url(/assets/textures/pattern-ruffle-grain-dark.svg) repeat;
color: var(--paper);
}
.on-dark :is(h1,h2,h3) { color: var(--paper); }
.on-dark p { color: var(--paper); }
.on-dark .muted { color: var(--postchange); }
.on-dark a:not(.btn) { color: var(--paper); text-decoration-color: var(--postchange); }
.on-dark a:not(.btn):hover { color: var(--postchange); }
.muted { color: color-mix(in oklab, var(--ink) 62%, var(--paper)); }
.seam { display: block; width: 100%; height: clamp(34px, 6vw, 78px); }
.seam img, .seam svg { width: 100%; height: 100%; display: block; }
.seam--flip { transform: scaleX(-1); }
.seam--exit { transform: rotate(180deg); }
.strip {
background: var(--sky);
border-bottom: 1px solid color-mix(in oklab, var(--gull) 45%, transparent);
padding: .42rem 0;
overflow: clip;
}
.strip .wrap { display: flex; gap: 1.5rem; justify-content: space-between; align-items: baseline; }
.strip .mono { color: var(--primary); white-space: nowrap; font-size: .72rem; letter-spacing: .04em; }
.strip .mono b { font-weight: 500; color: var(--accent-deep); }
@media (max-width: 700px) { .strip .mono + .mono { display: none; } }
.site-head { background: var(--paper); position: relative; z-index: 40; }
.site-head .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 1.2rem; padding-block: .9rem;
}
.site-head .logo img { height: 46px; width: auto; }
.nav-primary { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.5rem); }
.nav-primary a:not(.btn) {
position: relative;
font-family: var(--font-display);
font-weight: 600; font-stretch: 100%;
font-size: .95rem;
color: var(--primary);
text-decoration: none;
padding: .35rem .15rem;
border-bottom: 2px solid transparent;
transition: border-color .18s var(--ease), color .18s var(--ease);
}
.nav-primary a:not(.btn):hover { color: var(--accent-deep); border-bottom-color: var(--postchange); }
body[data-page="services"] .nav-primary a[href="/services/"],
body[data-page="areas"]    .nav-primary a[href="/areas/"],
body[data-page="guides"]   .nav-primary a[href="/guides/"],
body[data-page="forecast"] .nav-primary a[href="/kerbside-forecast/"],
body[data-page="about"]    .nav-primary a[href="/about/"] {
border-bottom-color: var(--accent);
color: var(--accent-deep);
}
.nav-toggle {
display: none;
background: none; border: 1px solid var(--gull); border-radius: var(--radius-sm);
padding: .5rem .6rem; cursor: pointer; color: var(--primary);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
@media (max-width: 880px) {
.nav-toggle { display: block; }
.nav-primary {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
background: var(--paper);
border-top: 1px solid var(--sky);
border-bottom: 3px solid var(--primary);
box-shadow: 0 18px 30px -18px oklch(0.232 0.015 248.5 / .35);
flex-direction: column; align-items: stretch; gap: 0;
padding: .6rem 1.2rem 1.2rem;
}
.nav-primary.open { display: flex; }
.nav-primary a:not(.btn) { padding: .8rem .2rem; font-size: 1.1rem; border-bottom: 1px solid var(--sky); }
.nav-primary .btn { margin-top: .9rem; justify-content: center; }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-display); font-weight: 700; font-stretch: 105%;
font-size: 1rem; line-height: 1.2;
padding: .78rem 1.4rem;
border-radius: var(--radius-sm);
border: 2px solid transparent;
text-decoration: none; cursor: pointer;
transition: background .18s var(--ease), color .18s var(--ease),
border-color .18s var(--ease), translate .18s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:hover { translate: 0 -1px; }
.btn-accent { background: var(--accent); color: var(--paper); }
.btn-accent:hover { background: var(--accent-deep); color: var(--paper); }
.btn-slate { background: var(--primary); color: var(--paper); }
.btn-slate:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-ghost:hover { background: var(--primary); color: var(--paper); }
.on-dark .btn-ghost { border-color: var(--paper); color: var(--paper); }
.on-dark .btn-ghost:hover { background: var(--paper); color: var(--primary); }
.nav-primary a.btn-accent, .on-dark a.btn-accent, .foot a.btn-accent { color: var(--paper); }
.on-dark a.btn-slate { color: var(--paper); }
.card {
background: var(--paper);
border: 1px solid color-mix(in oklab, var(--gull) 42%, transparent);
border-radius: var(--radius);
padding: 1.5rem;
}
.card--sky { background: var(--sky) url(/assets/textures/pattern-chevron-drift-firm.svg) repeat; background-size: 124px auto; border: none; }
.svc-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(12, 1fr); }
.svc-card {
grid-column: span 4;
display: flex; flex-direction: column; gap: .6rem;
background: var(--paper);
border: 1px solid color-mix(in oklab, var(--gull) 42%, transparent);
border-radius: var(--radius);
padding: 1.6rem 1.5rem 1.4rem;
text-decoration: none; color: var(--ink);
position: relative; overflow: clip;
transition: border-color .2s var(--ease), translate .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-card:hover {
border-color: var(--accent);
translate: 0 -3px;
box-shadow: 0 16px 28px -20px oklch(0.297 0.018 248.4 / .4);
color: var(--ink);
}
.svc-card--lead { grid-column: span 8; background: var(--sky) url(/assets/textures/pattern-chevron-drift-whisper.svg) repeat; border: none; }
.svc-card img.svc-icon { width: 56px; height: 56px; }
.svc-card h3 { margin: 0; }
.svc-card p { margin: 0; color: color-mix(in oklab, var(--ink) 72%, var(--paper)); font-size: .95rem; }
.svc-card .mono { color: var(--accent-deep); margin-top: auto; padding-top: .5rem; }
.svc-card--estate .mono { color: var(--primary); }
@media (max-width: 880px) { .svc-card, .svc-card--lead { grid-column: span 6; } }
@media (max-width: 620px) { .svc-card, .svc-card--lead { grid-column: span 12; } }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.chip {
font-family: var(--font-mono); font-size: .78rem;
padding: .28rem .7rem;
border: 1px solid color-mix(in oklab, var(--gull) 55%, transparent);
border-radius: 999px;
color: var(--primary);
background: var(--paper);
white-space: nowrap;
}
.on-dark .chip { background: transparent; color: var(--postchange); border-color: color-mix(in oklab, var(--postchange) 45%, transparent); }
.bulletin {
background: var(--paper);
border: 1.5px solid var(--primary);
border-radius: var(--radius);
overflow: clip;
}
.bulletin-head {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
background: var(--primary); color: var(--paper);
padding: .55rem 1.1rem;
}
.bulletin-head .mono { color: var(--postchange); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.bulletin-head .mono:first-child { color: var(--paper); }
.bulletin-body { padding: 1.2rem 1.1rem; }
.bulletin-row {
display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
padding: .5rem 0;
border-bottom: 1px dashed color-mix(in oklab, var(--gull) 55%, transparent);
}
.bulletin-row:last-child { border-bottom: none; }
ul.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
ul.ticks li {
padding-left: 1.7em; position: relative; margin-bottom: .55em;
}
ul.ticks li::before {
content: ""; position: absolute; left: 0; top: .32em;
width: 1.05em; height: .74em;
background: url(/assets/micro/bullet.svg) no-repeat center / contain;
}
ul.ticks--rinse li::before { background-image: url(/assets/micro/bullet-rinse.svg); }
hr.divider {
border: none; height: 20px; width: min(320px, 70%);
margin: 2.6rem auto;
background: url(/assets/micro/divider.svg) no-repeat center / contain;
}
.on-dark hr.divider { background-image: url(/assets/micro/divider-on-dark.svg); }
blockquote {
margin: 2rem 0; padding: .4rem 0 .4rem 3.2rem; position: relative;
font-size: 1.15rem; line-height: 1.55; color: var(--primary);
font-family: var(--font-display); font-weight: 550; font-stretch: 105%;
}
blockquote::before {
content: ""; position: absolute; left: 0; top: .45rem;
width: 34px; height: 28px;
background: url(/assets/micro/quote.svg) no-repeat center / contain;
}
.table-wrap { overflow-x: auto; }
table.spec {
border-collapse: collapse; width: 100%; min-width: min(560px, 100%);
font-size: .95rem;
}
table.spec th, table.spec td {
text-align: left; padding: .65rem .9rem .65rem 0;
border-bottom: 1px solid color-mix(in oklab, var(--gull) 45%, transparent);
vertical-align: top;
}
table.spec th {
font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
table.spec td.num, table.spec th.num { text-align: right; padding-right: 1.4rem; }
table.spec td.num:last-child, table.spec th.num:last-child { padding-right: 0; }
table.spec td.yes { color: var(--pine-deep); font-weight: 600; }
table.spec td.no { color: var(--primary); font-weight: 600; }
details.faq {
border-bottom: 1px solid color-mix(in oklab, var(--gull) 45%, transparent);
padding: .3rem 0;
}
details.faq summary {
cursor: pointer; list-style: none;
font-family: var(--font-display); font-weight: 650; font-stretch: 108%;
font-size: 1.08rem; color: var(--primary);
padding: .85rem 2rem .85rem 0; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
content: ""; position: absolute; right: .2rem; top: 50%;
width: 14px; height: 10px; translate: 0 -50%;
background: url(/assets/micro/bullet.svg) no-repeat center / contain;
transform: rotate(180deg);
transition: transform .2s var(--ease);
}
details.faq[open] summary::after { transform: rotate(0deg); }
details.faq .faq-body { padding: 0 0 1.1rem; max-width: 62ch; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
label.field { display: block; }
label.field span {
display: block; font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase;
color: var(--primary); margin-bottom: .35rem;
}
input, select, textarea {
width: 100%; font: inherit; color: var(--ink);
background: var(--paper);
border: 1.5px solid color-mix(in oklab, var(--gull) 70%, transparent);
border-radius: var(--radius-sm);
padding: .7rem .85rem;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.lead-msg { border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: 1rem; }
.lead-msg[data-lead-success] { background: var(--sky); border: 1.5px solid var(--pine); }
.lead-msg[data-lead-success] .spot { width: 72px; height: 72px; margin-bottom: .5rem; }
.lead-msg[data-lead-error] { background: var(--sky); border: 1.5px solid var(--accent-deep); color: var(--primary); font-weight: 600; }
figure.shot { border-radius: var(--radius); overflow: clip; position: relative; }
figure.shot img { width: 100%; height: 100%; object-fit: cover; }
figure.shot figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
color: var(--paper);
background: linear-gradient(transparent, oklch(0.232 0.015 248.5 / .78));
padding: 1.6rem .9rem .55rem;
}
.shot-note { font-family: var(--font-mono); font-size: .68rem; color: color-mix(in oklab, var(--ink) 55%, var(--paper)); margin-top: .45rem; }
.runs { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .runs { grid-template-columns: 1fr; } }
.run {
border-left: 3px solid var(--primary);
padding: .2rem 0 .2rem 1.4rem;
}
.run--ridge { border-left-color: var(--pine); }
.run h3 { margin-bottom: .2rem; }
.run .mono { color: color-mix(in oklab, var(--ink) 60%, var(--paper)); display: block; margin-bottom: .9rem; }
.run ol { list-style: none; margin: 0; padding: 0; }
.run ol li { padding: .42rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--gull) 45%, transparent); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.run ol li:last-child { border-bottom: none; }
.run ol a { text-decoration: none; color: var(--primary); font-weight: 600; }
.run ol a:hover { color: var(--accent-deep); text-decoration: underline; }
.run ol .mono { margin: 0; font-size: .7rem; text-align: right; }
.page-intro { padding-block: clamp(2.4rem, 6vw, 4.2rem) clamp(1.6rem, 4vw, 2.6rem); }
.page-intro .lede { margin-top: .4rem; }
.wm { position: relative; overflow: clip; isolation: isolate; }
.wm::after {
content: ""; position: absolute; right: -3%; bottom: -9%;
width: clamp(220px, 26vw, 360px); aspect-ratio: 1;
pointer-events: none; z-index: -1;
background: url(/assets/textures/motif-watermark-ink.svg) no-repeat center / contain;
}
.wm--dark::after { background-image: url(/assets/textures/motif-watermark-white.svg); }
.foot-region {
background: var(--primary) url(/assets/textures/pattern-ruffle-grain-dark.svg) repeat;
color: var(--paper);
position: relative; overflow: clip; isolation: isolate;
}
.foot-region::after {
content: ""; position: absolute; right: -2%; top: 34%;
width: clamp(240px, 26vw, 380px); aspect-ratio: 1;
pointer-events: none; z-index: -1;
background: url(/assets/textures/motif-watermark-white.svg) no-repeat center / contain;
}
.enquiry-band { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.4rem, 5vw, 3.4rem); }
.enquiry-band h2 { color: var(--paper); max-width: 16em; }
.enquiry-band .lede { color: var(--postchange); }
.enquiry-band .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.foot { border-top: 1px solid color-mix(in oklab, var(--postchange) 30%, transparent); padding-block: 2.6rem 2rem; }
.foot a:not(.btn) { color: var(--paper); text-decoration: none; }
.foot a:not(.btn):hover { color: var(--postchange); text-decoration: underline; }
.foot-cols { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 880px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; } }
.foot h4 {
font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
letter-spacing: .12em; text-transform: uppercase;
color: var(--postchange); margin: 0 0 .8rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: .22rem 0; font-size: .95rem; }
.foot .brand-col img { height: 58px; width: auto; margin-bottom: 1rem; }
.foot .brand-col p { color: var(--postchange); font-size: .92rem; max-width: 30em; }
.foot-legal {
margin-top: 2.2rem; padding-top: 1.2rem;
border-top: 1px solid color-mix(in oklab, var(--postchange) 22%, transparent);
display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: baseline;
font-size: .8rem; color: var(--postchange);
}
.foot-legal a { color: var(--postchange); }
body[data-register="estate"] .strip { display: none; }
body[data-register="estate"] a { color: var(--primary); }
body[data-register="estate"] .kicker { color: var(--primary); letter-spacing: .14em; }
body[data-register="estate"] .btn-accent { background: var(--primary); }
body[data-register="estate"] .btn-accent:hover { background: var(--ink); }
body[data-register="estate"] .mono-drop { display: none; }
body[data-register="estate"] input:focus,
body[data-register="estate"] select:focus,
body[data-register="estate"] textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
body[data-register="estate"] .band--sky { background-image: none; }
body[data-register="estate"] .step-list > li::before { color: var(--primary); }
body[data-register="estate"] figure.shot figcaption {
font-family: var(--font-body);
font-style: italic;
font-size: .8rem;
letter-spacing: .01em;
}
body[data-register="estate"] .page-intro {
padding-block: clamp(3.2rem, 7vw, 5.6rem) clamp(2rem, 5vw, 3.2rem);
}
.hero { position: relative; overflow: clip; }
.hero-sky {
background: var(--paper) url(/assets/textures/texture-glass-wash.webp) center / cover no-repeat;
padding-block: clamp(2.6rem, 6vw, 5rem) clamp(2rem, 5vw, 3.4rem);
}
.hero-grid { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); grid-template-columns: 7fr 5fr; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { max-width: 11em; }
.hero .lede { margin-top: 1rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.hero .mono-drop { margin-top: 1.5rem; color: var(--accent-deep); display: block; }
.hero-figure { position: relative; }
.hero-figure figure.shot { aspect-ratio: 4/3; box-shadow: 0 24px 48px -28px oklch(0.297 0.018 248.4 / .55); }
.front-band { padding-block: clamp(2rem, 4.5vw, 3.2rem); }
.front-band .trip { display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .front-band .trip { grid-template-columns: 1fr; gap: 1.1rem; } }
.front-band .trip > div { border-left: 2px solid var(--postchange); padding-left: 1.1rem; }
.front-band .trip h3 { color: var(--paper); margin-bottom: .25rem; font-size: 1.12rem; }
.front-band .trip p { color: var(--postchange); font-size: .93rem; margin: 0; }
.fc-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 1.8rem; }
.fc-chip {
font-family: var(--font-mono); font-size: .82rem;
padding: .55rem .95rem;
border: 1.5px solid color-mix(in oklab, var(--gull) 65%, transparent);
border-radius: 999px;
background: var(--paper); color: var(--primary);
cursor: pointer;
transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.fc-chip:hover { border-color: var(--accent); }
.fc-chip[aria-pressed="true"] { background: var(--primary); color: var(--paper); border-color: var(--primary); }
.fc-verdict-k { color: var(--pine-deep); font-weight: 600; }
.fc-verdict-r { color: var(--accent-deep); font-weight: 600; }
.fc-verdict-s { color: var(--primary); font-weight: 600; }
.fc-scale { font-family: var(--font-display); font-weight: 750; font-stretch: 112%; font-size: 1.5rem; color: var(--primary); }
.fc-empty img { width: 150px; height: 90px; margin: 0 auto .6rem; }
.fc-empty { text-align: center; color: color-mix(in oklab, var(--ink) 60%, var(--paper)); padding: 1.4rem 0; }
#fc-cta { margin-top: 1.4rem; }
.grid-2 { display: grid; gap: clamp(1.4rem, 3.5vw, 2.6rem); grid-template-columns: 1fr 1fr; align-items: start; }
.grid-3 { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.step-list { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step-list > li {
counter-increment: step;
position: relative; padding: 0 0 1.4rem 3.4rem;
}
.step-list > li::before {
content: counter(step, decimal-leading-zero);
position: absolute; left: 0; top: .1rem;
font-family: var(--font-mono); font-size: .95rem; font-weight: 500;
color: var(--accent-deep);
border: 1.5px solid color-mix(in oklab, var(--gull) 60%, transparent);
border-radius: var(--radius-sm);
padding: .3rem .5rem; line-height: 1;
}
.step-list h3 { margin-bottom: .25rem; }
.step-list p { margin-bottom: 0; max-width: 58ch; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.rv, .rv-in { opacity: 1 !important; transform: none !important; }
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--primary); color: var(--paper);
padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--paper); }
.fc-row { padding: .7rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--gull) 55%, transparent); }
.fc-row:last-of-type { border-bottom: none; }
.fc-row-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.fc-row-head strong { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; color: var(--primary); }
.fc-row-head span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.fc-row p { margin: .3rem 0 0; font-size: .95rem; max-width: 60ch; color: color-mix(in oklab, var(--ink) 80%, var(--paper)); }
.fc-scale-row {
display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
margin-top: 1.2rem; padding-top: 1rem;
border-top: 1.5px solid var(--primary);
}
.fc-cap-note { color: var(--accent-deep); }
.fc-note { font-size: .85rem; color: color-mix(in oklab, var(--ink) 62%, var(--paper)); max-width: 60ch; }
.ba-pair { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .ba-pair { grid-template-columns: 1fr; } }
.ba-pair figure.shot { aspect-ratio: 4/3; }
.refs {
border-top: 1.5px solid var(--primary);
padding-top: 1.2rem; margin-top: 2.4rem;
}
.refs h2, .refs h3 { font-size: 1.05rem; }
.refs ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.refs li { margin-bottom: .55rem; max-width: 75ch; color: color-mix(in oklab, var(--ink) 75%, var(--paper)); }
.mini-form {
background: var(--paper);
border: 1.5px solid var(--primary);
border-radius: var(--radius);
padding: 1.6rem 1.5rem 1.5rem;
}
.mini-form h2, .mini-form h3 { margin-bottom: .3rem; }
.mini-form .mono { color: var(--accent-deep); display: block; margin-bottom: 1rem; }
.mini-form .btn { width: 100%; margin-top: 1rem; }
.foot--solo { border-top: none; padding-top: 3rem; }
.enquiry-band--still h2 { max-width: none; }
.foot-region--still { background: var(--primary); }
.foot-region--still::after { content: none; }
.foot-note { flex-basis: 100%; opacity: .8; }
.fact-line {
display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: baseline;
font-family: var(--font-mono); font-size: .78rem; color: var(--primary);
border-block: 1px solid color-mix(in oklab, var(--gull) 45%, transparent);
padding: .55rem 0; margin: 1.2rem 0 1.6rem;
}
.foot-region .kicker { color: var(--postchange); }
.foot-region .btn-ghost { border-color: var(--paper); color: var(--paper); }
.foot-region .btn-ghost:hover { background: var(--paper); color: var(--primary); }
.foot-region a.btn-accent { color: var(--paper); }
.foot-region .mono-drop { color: var(--postchange); }
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .2s var(--ease), translate .2s var(--ease); }
a.card:hover { border-color: var(--accent); translate: 0 -3px; }
a.card h3 { margin-bottom: .35rem; }
a.card p { color: color-mix(in oklab, var(--ink) 72%, var(--paper)); font-size: .95rem; }
.rv { opacity: 0; transform: translateY(14px); }
.rv-in {
opacity: 1; transform: none;
transition: opacity var(--t-settle) var(--ease), transform var(--t-settle) var(--ease);
}
body[data-register="estate"] .rv { transform: translateY(8px); }
body[data-register="estate"] .rv-in { transition-duration: calc(var(--t-settle) * 1.4); }
.nav-primary a:not(.btn)::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform var(--t-front) var(--ease);
}
.nav-primary a:not(.btn):hover::after,
.nav-primary a:not(.btn):focus-visible::after { transform: scaleX(1); }
body[data-register="estate"] .nav-primary a:not(.btn)::after { background: var(--ink); }
.svc-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent); transform: scaleY(0); transform-origin: top;
transition: transform var(--t-front) var(--ease);
}
.svc-card:hover::before, .svc-card:focus-visible::before { transform: scaleY(1); }
body[data-register="estate"] .svc-card::before { background: var(--ink); }
.btn:active { translate: 0 0; }
.svc-card:active { translate: 0 -1px; }
a.card:active { translate: 0 -1px; }
body[data-register="estate"] .svc-card:hover,
body[data-register="estate"] a.card:hover { translate: 0 -1.5px; }
.btn:focus-visible { translate: 0 -1px; }
.svc-card:focus-visible {
border-color: var(--accent);
translate: 0 -3px;
box-shadow: 0 16px 28px -20px oklch(0.297 0.018 248.4 / .4);
}
a.card:focus-visible { border-color: var(--accent); translate: 0 -3px; }
.fc-chip:focus-visible { border-color: var(--accent); }
body[data-register="estate"] .svc-card:focus-visible,
body[data-register="estate"] a.card:focus-visible { translate: 0 -1.5px; }
a { transition: color var(--t-front) var(--ease); }
input, select, textarea {
transition: border-color var(--t-front) var(--ease), box-shadow var(--t-front) var(--ease);
}
.nav-toggle { transition: border-color var(--t-front) var(--ease), color var(--t-front) var(--ease); }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--primary); color: var(--accent-deep); }
details.faq summary { transition: color var(--t-front) var(--ease); }
details.faq summary:hover, details.faq summary:focus-visible { color: var(--accent-deep); }
body[data-register="estate"] .nav-toggle:hover,
body[data-register="estate"] .nav-toggle:focus-visible,
body[data-register="estate"] details.faq summary:hover,
body[data-register="estate"] details.faq summary:focus-visible { color: var(--ink); }