@font-face{font-family:Sora;src:url('/assets/fonts/sora.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/instrument-sans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Bright daylight palette: white surfaces, deep navy text, a trade colour for links and highlights,
   and one warm call-to-action colour so the next step always stands out. */
:root{--bg:#F4F7FB;--success:#16A34A;--success-soft:#DCFCE7;--surface:#FFFFFF;--raised:#F7F9FC;--line:#DEE5EE;--field-border:#93A1B3;--ink:#0E1A2B;--muted:#4A5A6F;--accent:#0C9C83;--accent-soft:#E2F6F1;--link:#087866;--cta:#FF6A2B;--cta-hover:#F25A18;--cta-ink:#1C0C02;--navy:#0E1A2B;--shadow:0 10px 30px rgba(14,26,43,.10);--error:#B42318;--bg-deep:var(--bg);--text:var(--ink);--panel:var(--surface);--panel-strong:var(--surface)}
html[data-sector='plumber']{--accent:#1663E6;--accent-soft:#E8F0FD;--link:#1663E6}
/* The logo tile carries the trade: a water drop for plumbing, a key for locksmiths. */
html[data-sector='plumber'] .brand::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.4 4.1 5.6 7.3 5.6 10.1a5.6 5.6 0 0 1-11.2 0c0-2.8 2.2-6 5.6-10.1z'/%3E%3Cpath d='M9.3 14.2a2.8 2.8 0 0 0 2.4 2.5'/%3E%3C/svg%3E")}
html{background:var(--bg)}
body{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:400;color:var(--ink);background:var(--bg)}
a{text-underline-offset:4px}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.site-header{top:12px}.site-header.is-scrolled{top:8px}
.site-header .nav{min-height:64px;gap:24px;padding:10px 12px 10px 20px;border:1px solid rgba(14,26,43,.08);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}
.site-header .brand{font-family:Sora,sans-serif;font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--ink);text-decoration:none;max-width:245px;display:inline-flex;align-items:center;gap:10px}
.site-header .brand::before{content:'';display:inline-block;width:32px;height:32px;border-radius:10px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15.5' r='4'/%3E%3Cpath d='m10.9 12.6 8.6-8.6M16.5 7l2.5 2.5M14 9.5l2 2'/%3E%3C/svg%3E") center/20px 20px no-repeat;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);flex:0 0 32px}
.site-header .brand::after{display:none}
.site-header .links a{color:var(--ink);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none}
.site-header .links a:hover{color:var(--link);text-decoration:underline}
.site-header .nav-cta,.home-page .btn.accentbtn{background:var(--cta);border:1px solid var(--cta);color:var(--cta-ink);box-shadow:0 6px 16px rgba(255,106,43,.28);text-shadow:none;font-weight:700;text-decoration:none;border-radius:12px;transition:background 160ms ease-out,transform 160ms ease-out}
.site-header .nav-cta:hover,.home-page .btn.accentbtn:hover{background:var(--cta-hover);filter:none;transform:translateY(-1px)}
.site-header .menu-button{background:var(--accent-soft);border:1px solid transparent;color:var(--ink);box-shadow:none}
.site-header .links.is-open{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.site-header .rapid-response-bar{background:var(--surface);color:var(--muted);border-color:var(--line);box-shadow:none;font-size:13px}
.site-header .rapid-response-bar b{color:var(--ink)}
/* The footer is a deep navy band so pages end with contrast rather than more white. */
footer{background:var(--navy);padding:44px 0 32px;margin-top:40px}
footer .footer{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;justify-content:space-between;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#C3CEDC;font-size:15px;line-height:1.6}
.footer .footer-brand{color:#FFFFFF;font-family:Sora,sans-serif;font-size:18px;font-weight:700}
.footer p{margin:8px 0;max-width:620px;color:#C3CEDC}.footer nav{display:flex;flex-wrap:wrap;gap:14px 20px}.footer nav a,.footer a{color:#FFFFFF;font-size:14px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35)}
.footer .photo-credit{display:block;font-size:11px;line-height:1.5;color:#8EA0B6}.footer .photo-credit a{font-size:11px;color:#B9C7D8}
/* Frosted glass only where the header sits over the photo. */
@supports(backdrop-filter:blur(16px)){.home-page .site-header:not(.is-scrolled) .nav{background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(140%)}}
@media(prefers-reduced-transparency:reduce){.home-page .site-header:not(.is-scrolled) .nav{background:var(--surface);backdrop-filter:none}}
@media(max-width:900px){.site-header .nav{gap:12px;padding:8px 8px 8px 16px}.site-header .brand{max-width:220px;font-size:15px}.site-header .nav-cta{display:none}.site-header .links a{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-header,.site-header *{transition:none!important;animation:none!important}}

.site-header{position:fixed;z-index:30;right:0;left:0}.site-header .nav{display:flex;align-items:center;justify-content:space-between}.site-header .links{display:flex;gap:22px}.site-header .menu-button{display:none;position:relative;width:48px;height:48px;min-width:48px;border-radius:12px}.site-header .brand{flex-shrink:0}
@media(max-width:900px){.site-header .menu-button{display:block}.site-header .links{display:none}.site-header .links.is-open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:15px;right:15px;padding:24px;border-radius:14px}}
/* Footer text stays readable on the navy band on every page, including the homepage. */
footer .footer p,body.home-page footer .footer p{color:#C3CEDC}
footer .footer .photo-credit,body.home-page footer .footer .photo-credit{color:#A9B7C9}

/* Focus and anchor targets must clear the fixed navigation on small screens. */
html{scroll-padding-top:112px}.site-header.is-scrolled .nav{background:var(--surface);backdrop-filter:none}main :is(input,textarea,select,button,[tabindex]){scroll-margin-top:112px}