@font-face{font-family:'Cabin';font-style:normal;font-weight:400 700;font-display:swap;src:url('/_v/1998b6bfef/assets/fonts/cabin-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:'Cabin';font-style:normal;font-weight:400 700;font-display:swap;src:url('/_v/488a6c2378/assets/fonts/cabin-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:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/_v/4e52475d9b/assets/fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/_v/554d32abec/assets/fonts/fraunces-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(24.9% 0.012 56);
--ink-soft:       oklch(45.5% 0.015 64);
--paper:          oklch(95.0% 0.025 89);
--paper-raised:   oklch(91.2% 0.033 85);
--brick-wash:     oklch(89.8% 0.022 43);
--primary:        oklch(35.6% 0.090 29);
--primary-deep:   oklch(27.8% 0.071 29);
--corrugate:      oklch(42.8% 0.009 242);
--corrugate-deep: oklch(33.4% 0.008 240);
--hardwood:       oklch(70.4% 0.023 76);
--leadlight:      oklch(48.7% 0.068 156);
--font-display: "Fraunces", "Georgia", serif;
--font-body: "Cabin", "Gill Sans", "Trebuchet MS", sans-serif;
--measure: 68ch;
--gutter: clamp(1.1rem, 4vw, 2rem);
--wrap: 72rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--font-display);
font-variation-settings: "SOFT" 50, "WONK" 0;
font-weight: 600;
line-height: 1.12;
margin: 0 0 .5em;
text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); font-variation-settings: "SOFT" 50, "WONK" 1; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 550; }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .4em; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-deep); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }
small, .meta { color: var(--ink-soft); }
::placeholder { color: color-mix(in oklab, var(--ink-soft) 30%, transparent); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.flow > * + * { margin-top: 1em; }
hr {
border: 0;
height: 14px;
margin: clamp(2rem, 5vw, 3.2rem) auto;
width: min(220px, 50%);
background: url("/assets/micro/divider.svg") center / contain no-repeat;
}
ul.strap {
list-style: none;
padding-left: 0;
max-width: var(--measure);
}
ul.strap li {
padding-left: 1.9rem;
position: relative;
margin-bottom: .55em;
}
ul.strap li::before {
content: "";
position: absolute;
left: 0; top: .42em;
width: 1.15rem; height: .62rem;
background: url("/assets/micro/bullet.svg") center / contain no-repeat;
}
blockquote {
margin: 1.6rem 0;
padding: .4rem 0 .4rem 3.2rem;
position: relative;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 550;
max-width: 56ch;
}
blockquote::before {
content: "";
position: absolute;
left: 0; top: .3rem;
width: 2.2rem; height: 2.2rem;
background: url("/assets/micro/blockquote-mark.svg") center / contain no-repeat;
}
.lane-strip {
height: 9px;
background: var(--corrugate-deep) url("/assets/textures/pattern-corrugate-cream.webp") repeat-x center / auto 100%;
background-blend-mode: multiply;
}
header.site {
background: var(--paper);
border-bottom: 1px solid var(--hardwood);
position: relative;
}
header.site::after {
content: "";
display: block;
position: absolute;
left: 0; right: 0; bottom: -5px;
border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 55%, transparent);
}
.masthead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: .85rem;
}
.masthead .logo img { height: 46px; width: auto; }
nav.primary ul {
list-style: none;
display: flex;
gap: clamp(.9rem, 2vw, 1.7rem);
margin: 0; padding: 0;
align-items: center;
}
nav.primary a {
font-weight: 600;
font-size: .98rem;
letter-spacing: .02em;
text-decoration: none;
color: var(--ink);
padding-block: .3rem;
border-bottom: 2px solid transparent;
}
nav.primary a:hover { color: var(--primary); }
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="about"]    nav.primary a[href="/about/"] {
border-bottom-color: var(--primary);
color: var(--primary);
}
nav.primary a.enq {
background: var(--primary);
color: var(--paper);
padding: .55rem 1.05rem;
border-bottom: none;
}
nav.primary a.enq:hover { background: var(--primary-deep); color: var(--paper); }
details.gate-nav { display: none; }
@media (max-width: 830px) {
nav.primary { display: none; }
details.gate-nav { display: block; position: relative; }
details.gate-nav summary {
list-style: none;
cursor: pointer;
font-weight: 700;
font-size: .92rem;
letter-spacing: .06em;
text-transform: uppercase;
padding: .5rem .8rem;
border: 2px solid var(--corrugate);
color: var(--corrugate);
user-select: none;
}
details.gate-nav summary::-webkit-details-marker { display: none; }
details.gate-nav[open] summary { background: var(--corrugate); color: var(--paper); }
details.gate-nav .pane {
position: absolute;
right: 0; top: calc(100% + 10px);
z-index: 40;
background: var(--paper);
border: 2px solid var(--corrugate);
box-shadow: 0 10px 24px rgb(0 0 0 / .18);
min-width: 15rem;
padding: .4rem 0;
}
details.gate-nav .pane a {
display: block;
padding: .7rem 1.2rem;
text-decoration: none;
color: var(--ink);
font-weight: 600;
border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 45%, transparent);
}
details.gate-nav .pane a:last-child { border-bottom: 0; }
details.gate-nav .pane a.enq { color: var(--primary); font-weight: 700; }
}
.paths {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(.9rem, 2.5vw, 1.6rem);
position: relative;
max-width: 58rem;
}
.paths::before {
content: "";
position: absolute;
inset: 8% auto 8% 50%;
translate: -50% 0;
border-left: 2px dashed color-mix(in oklab, var(--hardwood) 70%, transparent);
}
.path {
padding: clamp(1.1rem, 2.6vw, 1.7rem);
color: var(--paper);
text-decoration: none;
display: flex;
flex-direction: column;
gap: .45rem;
min-height: 100%;
transition: transform .15s ease;
}
.path:hover { transform: translateY(-3px); color: var(--paper); }
.path.repair { background: var(--primary); }
.path.repair:hover { background: var(--primary-deep); }
.path.quote { background: var(--corrugate); }
.path.quote:hover { background: var(--corrugate-deep); }
.path .kicker {
font-size: .8rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
opacity: .85;
}
.path .head {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.4vw, 1.5rem);
font-weight: 600;
line-height: 1.15;
}
.path .sub { font-size: .95rem; opacity: .92; margin: 0; }
.path .go { margin-top: auto; font-weight: 700; font-size: .95rem; }
.path .go::after { content: " \2192"; }
@media (max-width: 620px) {
.paths { grid-template-columns: 1fr; }
.paths::before { display: none; }
}
.btn {
display: inline-block;
padding: .7rem 1.35rem;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border: 0;
cursor: pointer;
font-family: var(--font-body);
}
.btn.repair { background: var(--primary); color: var(--paper); }
.btn.repair:hover { background: var(--primary-deep); color: var(--paper); }
.btn.quote { background: var(--corrugate); color: var(--paper); }
.btn.quote:hover { background: var(--corrugate-deep); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn.ghost:hover { background: var(--primary); color: var(--paper); }
.gate-frame {
position: relative;
border: 6px solid var(--corrugate);
outline: 1px solid var(--hardwood);
outline-offset: 4px;
background: var(--corrugate);
}
.gate-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gate-frame::before, .gate-frame::after {
content: "";
position: absolute;
left: -6px;
width: 32px; height: 10px;
background: var(--primary);
border-radius: 0 5px 5px 0;
z-index: 2;
}
.gate-frame::before { top: 18%; }
.gate-frame::after { bottom: 18%; }
figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .55rem; }
figure { margin: 0; }
section { padding-block: clamp(2.2rem, 6vw, 4rem); }
.section-cream { background: var(--paper); }
.section-raised { background: var(--paper-raised); }
.section-corrugated {
background: var(--paper) url("/assets/textures/pattern-corrugate-cream.webp");
}
.section-brick-dark {
background: var(--primary-deep) url("/assets/textures/pattern-brick-oxblood.webp");
color: var(--paper);
}
.section-brick-dark a { color: var(--paper); }
.section-brick-dark .meta, .section-brick-dark small { color: color-mix(in oklab, var(--paper) 78%, transparent); }
.kicker {
display: block;
font-size: .82rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--corrugate);
margin-bottom: .6rem;
}
.section-brick-dark .kicker { color: color-mix(in oklab, var(--paper) 70%, transparent); }
.honest-call {
background: var(--brick-wash);
border-left: 6px solid var(--primary);
padding: clamp(1.2rem, 3vw, 2rem);
}
.hero { padding-block: clamp(2.4rem, 6vw, 4.6rem) clamp(2rem, 5vw, 3.4rem); }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(1.6rem, 4vw, 3.2rem);
align-items: center;
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 52ch; }
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-grid .gate-frame { max-height: 46vh; overflow: hidden; }
}
.rail { position: relative; padding-left: 2.1rem; max-width: 46rem; margin-bottom: 1.4rem; }
.rail::before, .rail::after {
content: "";
position: absolute;
top: .35rem; bottom: .35rem;
width: 5px;
background: var(--hardwood);
}
.rail::before { left: 0; }
.rail::after { left: 11px; }
.rail .stop { position: relative; padding: 0 0 1.6rem 0; }
.rail .stop:last-child { padding-bottom: 0; }
.rail .stop::before {
content: "";
position: absolute;
left: -2.1rem; top: .45rem;
width: 1.55rem; height: 8px;
background: var(--primary);
}
.rail .when {
font-family: var(--font-display);
font-weight: 650;
font-size: 1.12rem;
color: var(--primary);
}
.rail p { margin: .15em 0 0; }
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.1rem;
margin-top: 1.4rem;
}
.tile {
background: var(--paper-raised);
padding: 1.15rem 1.15rem 1.25rem;
text-decoration: none;
color: var(--ink);
border-top: 4px solid var(--corrugate);
transition: transform .15s ease;
}
.tile:hover { transform: translateY(-3px); color: var(--ink); }
.tile.urgent { border-top-color: var(--primary); }
.tile img { width: 54px; height: 54px; margin-bottom: .6rem; }
.tile .t { font-weight: 700; margin-bottom: .25rem; }
.tile p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.checker {
background: var(--brick-wash);
padding: clamp(1.4rem, 3.5vw, 2.4rem);
border: 1px solid var(--hardwood);
position: relative;
}
.checker fieldset { border: 0; padding: 0; margin: 0; }
.checker .qgroup { margin-bottom: 1.35rem; }
.checker .qgroup > .q {
font-weight: 700;
margin-bottom: .55rem;
display: block;
}
.checker .opts {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.checker .opts label {
background: var(--paper);
border: 2px solid var(--hardwood);
padding: .5rem .85rem;
cursor: pointer;
font-size: .95rem;
user-select: none;
}
.checker .opts input { position: absolute; opacity: 0; pointer-events: none; }
.checker .opts label:has(input:checked) {
border-color: var(--corrugate);
background: var(--corrugate);
color: var(--paper);
font-weight: 600;
}
.checker .opts label:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.checker-result {
margin-top: 1.4rem;
background: var(--paper);
border-left: 6px solid var(--corrugate);
padding: 1.2rem 1.4rem;
}
.checker-result.urgent { border-left-color: var(--primary); }
.checker-result h3 { margin-bottom: .4rem; }
.checker-result .rail-note { font-size: .88rem; color: var(--ink-soft); margin-top: .9rem; margin-bottom: 0; }
.checker-result .cta-row { margin-top: 1rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
table {
border-collapse: collapse;
width: 100%;
font-size: .95rem;
margin: 1.2rem 0;
}
caption { text-align: left; font-size: .85rem; color: var(--ink-soft); padding-bottom: .5rem; }
th, td {
text-align: left;
padding: .6rem .8rem;
border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 60%, transparent);
vertical-align: top;
}
th { font-weight: 700; border-bottom: 2px solid var(--corrugate); }
tbody th { font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 60%, transparent); }
@media (max-width: 560px) {
table { font-size: .85rem; }
th, td { padding: .5rem .45rem; }
}
form.enquiry {
background: var(--paper-raised);
padding: clamp(1.3rem, 3.5vw, 2.2rem);
border-top: 6px solid var(--primary);
max-width: 44rem;
}
form.enquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { form.enquiry .row { grid-template-columns: 1fr; } }
label.field { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .95rem; }
label.field .req { color: var(--primary); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
display: block;
width: 100%;
margin-top: .35rem;
padding: .65rem .75rem;
font: inherit;
font-weight: 400;
color: var(--ink);
background: var(--paper);
border: 1.5px solid var(--hardwood);
border-radius: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--corrugate); outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--corrugate) 30%, transparent); }
textarea { min-height: 7.5rem; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .88rem; color: var(--ink-soft); }
[data-lead-success] {
background: var(--paper);
border-left: 6px solid var(--leadlight);
padding: 1.3rem 1.5rem;
margin-top: 1.2rem;
}
[data-lead-success] img { width: min(230px, 60%); height: auto; margin-bottom: .8rem; }
[data-lead-success] .ok-head { color: var(--leadlight); font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; margin-bottom: .3rem; }
[data-lead-error] {
background: var(--brick-wash);
border-left: 6px solid var(--primary);
padding: .9rem 1.2rem;
margin-top: 1.2rem;
font-weight: 600;
}
footer.site {
background: var(--corrugate-deep);
color: color-mix(in oklab, var(--paper) 88%, transparent);
border-top: 6px solid var(--corrugate);
}
main > section:last-child { padding-bottom: clamp(2.2rem, 6vw, 4rem); }
footer.site .cols {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 2rem;
padding-block: clamp(2rem, 5vw, 3rem) 1.4rem;
}
@media (max-width: 700px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site img.fl { height: 60px; width: auto; margin-bottom: .9rem; }
footer.site a { color: var(--paper); text-decoration-color: color-mix(in oklab, var(--paper) 45%, transparent); }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: .45rem; }
footer.site .disclosure {
border-top: 1px solid color-mix(in oklab, var(--paper) 22%, transparent);
padding-block: 1rem 1.4rem;
font-size: .82rem;
color: color-mix(in oklab, var(--paper) 62%, transparent);
}
footer.site h4 { color: var(--paper); }
footer.site p { max-width: 44ch; }
.page-head { padding-block: clamp(2rem, 5vw, 3.2rem) 0; }
.page-head .lede { font-size: 1.12rem; max-width: 60ch; }
p.hook {
font-family: var(--font-display);
font-variation-settings: "SOFT" 50, "WONK" 1;
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
font-weight: 550;
line-height: 1.2;
color: var(--ink-soft);
max-width: 60ch;
margin: -0.1em 0 0.7em;
}
.anchor-rail {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1.2rem 0 0;
padding: 0;
list-style: none;
}
.anchor-rail a {
display: inline-block;
padding: .4rem .8rem;
background: var(--paper-raised);
border: 1px solid var(--hardwood);
text-decoration: none;
font-size: .9rem;
font-weight: 600;
color: var(--ink);
}
.anchor-rail a:hover { border-color: var(--primary); color: var(--primary); }
.svc {
display: grid;
grid-template-columns: 64px 1fr;
gap: 1.3rem;
align-items: start;
padding-block: clamp(1.6rem, 4vw, 2.4rem);
border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 55%, transparent);
scroll-margin-top: 2rem;
}
.svc:last-of-type { border-bottom: 0; }
.svc img.icon { width: 64px; height: 64px; }
.svc .cta-row { margin-top: .9rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } .svc img.icon { width: 54px; height: 54px; } }
.duet {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.4rem, 4vw, 2.8rem);
align-items: center;
}
@media (max-width: 780px) { .duet { grid-template-columns: 1fr; } }
.area-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; }
@media (max-width: 700px) { .area-cards { grid-template-columns: 1fr; } }
.area-card {
text-decoration: none;
color: var(--ink);
background: var(--paper-raised);
border-top: 4px solid var(--corrugate);
transition: transform .15s ease;
display: block;
}
.area-card:hover { transform: translateY(-3px); color: var(--ink); }
.area-card img { width: 100%; aspect-ratio: 3 / 1.6; object-fit: cover; }
.area-card .pad { padding: 1.1rem 1.2rem 1.3rem; }
.area-card .t { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; }
.area-card p { font-size: .95rem; color: var(--ink-soft); margin: .3rem 0 0; }
dl.glossary { max-width: var(--measure); }
dl.glossary dt {
font-weight: 700;
margin-top: 1.1rem;
font-size: 1.05rem;
}
dl.glossary dd { margin: .2rem 0 0; padding-left: 0; }
ol.brief { counter-reset: c; list-style: none; padding: 0; max-width: var(--measure); }
ol.brief li { counter-increment: c; position: relative; padding: 0 0 1.3rem 3.4rem; }
ol.brief li::before {
content: counter(c, decimal-leading-zero);
position: absolute;
left: 0; top: -.15rem;
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 650;
color: var(--primary);
}
.ladder { max-width: var(--measure); }
.ladder .rung {
border-left: 6px solid var(--corrugate);
background: var(--paper-raised);
padding: 1.1rem 1.3rem;
margin-bottom: 1rem;
}
.ladder .rung.last { border-left-color: var(--primary); }
.ladder .rung .t { font-weight: 700; margin-bottom: .25rem; }
.ladder .rung p { margin: 0; font-size: .97rem; }
.refs {
background: var(--paper-raised);
padding: 1.3rem 1.5rem;
font-size: .92rem;
max-width: var(--measure);
}
.refs h3 { font-size: 1.1rem; }
.refs li { margin-bottom: .6rem; }
.scenario {
background: var(--paper-raised);
border-top: 4px solid var(--hardwood);
padding: 1.2rem 1.4rem;
margin: 1.1rem 0;
max-width: var(--measure);
}
.scenario .tag {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--paper);
background: var(--corrugate);
padding: .15rem .55rem;
margin-bottom: .6rem;
}
.scenario .tag.repair { background: var(--primary); }
.lost { text-align: center; padding-block: clamp(3rem, 8vw, 5rem); }
.lost img { width: min(320px, 70%); margin: 0 auto 1.6rem; }
.lost .cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.lost p { margin-inline: auto; }
.cta-row { display: flex; gap: .9rem; flex-wrap: wrap; }
.center { text-align: center; }
.center p, .center h2 { margin-inline: auto; }
:root {
--ease-settle: cubic-bezier(.2, .7, .3, 1);
--dur-snap: .16s;
--dur-wipe: .18s;
}
a { transition: color var(--dur-snap) var(--ease-settle); }
nav.primary a {
position: relative;
transition: color var(--dur-snap) var(--ease-settle);
}
nav.primary a.enq {
transition: background-color var(--dur-snap) var(--ease-settle),
color var(--dur-snap) var(--ease-settle);
}
.btn {
transition: background-color var(--dur-snap) var(--ease-settle),
color var(--dur-snap) var(--ease-settle),
box-shadow var(--dur-snap) var(--ease-settle),
transform var(--dur-snap) var(--ease-settle);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(38 32 28 / .18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.anchor-rail a {
transition: border-color var(--dur-snap) var(--ease-settle),
color var(--dur-snap) var(--ease-settle);
}
.checker .opts label {
transition: border-color var(--dur-snap) var(--ease-settle),
background-color var(--dur-snap) var(--ease-settle),
color var(--dur-snap) var(--ease-settle);
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
transition: border-color var(--dur-snap) var(--ease-settle),
box-shadow var(--dur-snap) var(--ease-settle);
}
footer.site a { transition: color var(--dur-snap) var(--ease-settle); }
.path {
transition: transform var(--dur-snap) var(--ease-settle),
background-color var(--dur-snap) var(--ease-settle),
box-shadow var(--dur-snap) var(--ease-settle);
}
.tile, .area-card {
transition: transform var(--dur-snap) var(--ease-settle),
box-shadow var(--dur-snap) var(--ease-settle);
}
.path:hover, .path:focus-visible { box-shadow: 0 12px 26px rgb(38 32 28 / .22); }
.tile:hover, .tile:focus-visible,
.area-card:hover, .area-card:focus-visible { box-shadow: 0 10px 24px rgb(38 32 28 / .12); }
.tile:focus-visible, .area-card:focus-visible, .path:focus-visible { transform: translateY(-3px); }
nav.primary a:not(.enq)::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-wipe) var(--ease-settle);
}
nav.primary a:not(.enq):hover::after,
nav.primary a:not(.enq):focus-visible::after { transform: scaleX(1); }
.reveal { transition: opacity .5s ease, transform .5s var(--ease-settle); }
html.motion .reveal { opacity: 0; transform: translateY(14px); }
html.motion .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .001ms !important;
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
html.motion .reveal { opacity: 1 !important; transform: none !important; }
}