@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:300;font-display:block;src:url(../fonts/0fef8f438cab.woff2) format('woff2')}@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:block;src:url(../fonts/217326f24bfc.woff2) format('woff2')}@font-face{font-family:'Bitter';font-style:normal;font-weight:100 900;font-display:block;src:url(../fonts/33716f70c21c.woff2) format('woff2')}@font-face{font-family:'Bitter';font-style:italic;font-weight:100 900;font-display:block;src:url(../fonts/8914f1fbd5f8.woff2) format('woff2')}
:root{--brand:#12403F;--deep:#0B2C2B;--accent:#C6D64A;--aink:#55631A;--surface:#F6F1E7;
--alt:#EFE7D9;--ink:#171310;--soft:#4A423B;--on:#FDF8F0;--rule:#DDD3C2;
--head:'Saira Condensed','Arial Narrow',Arial,sans-serif;--body:'Bitter',Georgia,serif;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
--rings:repeating-radial-gradient(circle at 18% 108%,transparent 0 54px,rgba(255,255,255,.05) 54px 56px)}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62}
.wrap{max-width:1000px;margin:0 auto;padding:0 34px}
h1,h2,h3,.eyebrow,.btn,nav a{font-family:var(--head);text-transform:uppercase}
h1{font-weight:800;font-size:clamp(32px,5.6vw,58px);line-height:1;letter-spacing:.004em;margin:0}
h2{font-weight:800;font-size:clamp(26px,3.6vw,38px);line-height:1.04;margin:0 0 16px}
h3{font-weight:800;font-size:20px;margin:0 0 8px}
.eyebrow{font-weight:800;font-size:11.5px;letter-spacing:.2em;margin:0 0 14px;color:var(--accent)}
p{margin:0 0 18px}
nav{position:sticky;top:0;z-index:60;background:rgba(11,44,43,.94);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.10)}
nav .in{display:flex;align-items:center;gap:22px;height:62px}
nav .sp{margin-left:auto}
nav a{color:rgba(253,248,240,.82);text-decoration:none;font-size:12.5px;letter-spacing:.13em;font-weight:600}
nav a:hover{color:var(--accent)}
.svgwm{display:flex;align-items:center}.svgwm svg{height:25px;width:auto;display:block}
.btn{display:inline-block;background:var(--accent);color:#12211f;text-decoration:none;font-weight:800;
font-size:14px;letter-spacing:.09em;padding:11px 20px;border-radius:6px;border:0;cursor:pointer}
nav .btn{padding:8px 15px;font-size:12px;white-space:nowrap}
nav .btn .sm{display:none}
@media(max-width:800px){nav a.hide{display:none}}
@media(max-width:600px){nav .btn .lg{display:none}nav .btn .sm{display:inline}
 nav .in{height:58px;gap:12px}nav .btn{padding:8px 12px;font-size:11px;line-height:1.1}
 .svgwm svg{height:20px}}
.stage{position:relative;isolation:isolate;overflow:hidden;padding:92px 0 100px;color:var(--on)}
.stage .bg{position:absolute;inset:0;z-index:0}
.stage .bg img{width:100%;height:100%;object-fit:cover;filter:none;
opacity:1;background:var(--deep)}
.stage .tint{position:absolute;inset:0;z-index:1;background:var(--grain),var(--rings),
linear-gradient(180deg,rgba(11,44,43,.50) 0%,rgba(11,44,43,.16) 45%,rgba(11,44,43,.68) 100%);
background-size:180px 180px,auto,auto}
.stage .in{position:relative;z-index:2;text-align:center}
.stage .lede{max-width:58ch;margin:18px auto 0;font-size:19px;color:rgba(253,248,240,.9)}
.calc{margin:36px auto 0;max-width:600px;text-align:left;background:rgba(7,32,31,.88);
-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
border:1px solid rgba(253,248,240,.18);border-radius:18px;padding:30px;
box-shadow:0 30px 70px rgba(0,0,0,.34)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .calc{background:rgba(7,32,31,.94)}}
.calc h3{text-align:center;color:var(--on);margin-bottom:22px;font-size:24px}
.calc label{display:block;font-family:var(--head);text-transform:uppercase;font-weight:800;
font-size:14.5px;letter-spacing:.13em;color:rgba(253,248,240,.92)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 8px}
.val{font-family:var(--head);font-weight:800;font-size:30px;color:var(--accent);white-space:nowrap}
.calc input[type=range]{width:100%;accent-color:var(--accent);height:26px;margin:0 0 16px}
.out{margin-top:20px;padding-top:20px;border-top:1px solid rgba(253,248,240,.22);text-align:center}
.big{font-family:var(--head);font-weight:800;font-size:clamp(36px,6vw,58px);line-height:1;color:var(--accent)}
.cap{margin:12px auto 0;max-width:50ch;color:rgba(253,248,240,.95);font-size:17px}
.fine{margin-top:16px;font-size:15px;line-height:1.55;color:rgba(253,248,240,.78)}
main{padding:88px 0 112px}
main h2{color:var(--brand)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-bottom:16px}
.cols > div{max-width:62ch}
.cols h2{margin-bottom:18px}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:56px}
 .wrap{padding:0 24px}
 main{padding:56px 0 84px}
 .cta{padding:38px 26px;margin-top:56px}}
.cta{background:var(--brand);color:var(--on);border-radius:16px;padding:48px 40px;margin:72px 0 0;
position:relative;isolation:isolate;overflow:hidden;text-align:center}
.cta::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--grain),var(--rings);background-size:180px 180px,auto}
.cta>*{position:relative;z-index:1}
.cta h2{color:var(--on)}
footer{background:var(--deep);color:rgba(253,248,240,.7);padding:56px 0 72px;font-size:15px}
footer .svgwm svg{height:26px}

/* appended from at-megamenu-hover-gap.css by build_at_html.py */
/* at-megamenu-hover-gap.css
 *
 * FIX FOR A DEFECT IN THE DESIGN BUILD. Delete this file, and the --css-append
 * flag that pulls it in, the moment build_site_v*.py fixes it at source.
 *
 * THE BUG, as measured on the live site on 22 Aug 2026:
 *
 *   .panel { position:absolute; top:calc(100% + 14px); display:none }
 *   .menu:hover .panel { display:flex }
 *
 * The services mega-menu opens on hover and cannot be clicked. The 14px offset
 * puts the panel 14 pixels below the bottom of .menu, and those 14 pixels
 * belong to no part of .menu at all — document.elementFromPoint() in the middle
 * of that band returned DIV.wrap, and menu.contains() on it was false.
 *
 * So the moment the pointer leaves the word "Services" and heads for the panel,
 * it crosses dead ground, .menu:hover goes false, and the panel is display:none
 * before it can be reached. The menu drops down and nothing in it is clickable.
 *
 * THE FIX: an invisible strip directly above the panel, spanning its full width,
 * and — this is the point — belonging to the panel, which belongs to .menu. The
 * pointer never leaves .menu on the way down.
 *
 * After injecting this on the live page, elementFromPoint at the same spot
 * returned DIV.panel, menu.contains() was true, and parking the cursor in the
 * middle of the gap kept menu.matches(':hover') true with the panel still
 * display:flex. Before the fix, the same probe put the cursor outside .menu.
 *
 * 18px, not 14px, so it overlaps the panel edge slightly rather than meeting it
 * exactly — a one-pixel rounding error either way must not reopen the hole.
 *
 * Nothing here changes anything anyone can see. It only makes the gap hoverable.
 */
.panel::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 18px;
}

/* Keyboard users get the same panel via :focus-within, which the design already
 * handles. This makes the focused link inside it visible against the bone
 * panel, which the design does not — there is no focus style on .panel a. */
.panel a:focus-visible {
    outline: 2px solid var(--aink);
    outline-offset: 3px;
    border-radius: 3px;
}


/* appended from at-forms.css by build_at_html.py */
/* at-forms.css
 *
 * Styling for the enquiry form. The design build has no form in it at all, so
 * there is nothing to match against — this is written from the same tokens the
 * rest of the page uses, so it belongs to the brand rather than to a guess.
 *
 * Appended by build_at_html.py --css-append. When the design build grows its
 * own form styles, delete this and the flag.
 *
 * Every colour here is a var() the design already defines. If a token changes
 * in ambitious-tradies.json, the form changes with it.
 */

/* The honeypot. Not display:none — some bots skip hidden inputs, and some
 * password managers do too. Off-screen, zero size, untabbable, hidden from
 * assistive tech via aria-hidden on the wrapper. */
.at-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.atform {
    max-width: 30rem;
    margin: 0 auto;
    text-align: left;
}

.atfield {
    margin: 0 0 18px;
}

.atfield label {
    display: block;
    font-family: var(--head);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 800;
    margin-bottom: 7px;
    color: var(--ink);
}

/* On the dark grounds the design uses for its call-to-action bands, the label
 * has to flip or it disappears. */
.dark .atfield label,
.deep .atfield label,
.hero .atfield label {
    color: var(--on);
}

.atfield input,
.atfield textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--body);
    font-size: 16px;              /* 16px or iOS zooms the page on focus */
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 12px 14px;
    -webkit-appearance: none;
    appearance: none;
}

.atfield textarea {
    resize: vertical;
    min-height: 108px;
}

.atfield input:focus,
.atfield textarea:focus {
    outline: 2px solid var(--aink);
    outline-offset: 2px;
    border-color: var(--aink);
}

.atfield .req {
    color: var(--aink);
}

.dark .atfield .req,
.deep .atfield .req,
.hero .atfield .req {
    color: var(--accent);
}

.atsubmit {
    margin: 26px 0 0;
}

.atsubmit .btn {
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    font-size: 14px;
}

/* Result banners. Both carry role="status" or role="alert" in the markup, so
 * they are announced, not just coloured. */
.formnote {
    max-width: 30rem;
    margin: 0 auto 22px;
    padding: 16px 18px;
    border-radius: 12px;
    text-align: left;
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
}

.formnote p {
    margin: 0;
}

.formnote-ok {
    background: var(--accent);
    color: var(--ink);
}

.formnote-bad {
    background: var(--surface);
    color: var(--ink);
    border-left: 4px solid #b32d2e;
}

@media (max-width: 600px) {
    .atform {
        max-width: none;
    }
}