/* Nine credible earlier sites: original imagery, readable content and usable basics. */
.before-site{margin:0;font:16px/1.65 Arial,Helvetica,sans-serif;color:#333;background:#e5e2dc}.before-page{max-width:1080px;margin:28px auto;background:#fff;border:1px solid #c6c1b7}.before-page *{box-sizing:border-box}.before-mast{padding:26px 36px}.before-brand{margin:0;font:38px/1.2 Georgia,serif}.before-tag{margin:8px 0 0;font-size:14px}.before-nav{display:flex;flex-wrap:wrap;gap:8px 30px;padding:12px 36px;background:#42433e}.before-nav a{color:white;min-height:32px;display:inline-flex;align-items:center;text-underline-offset:4px}.before-page main{padding:30px 36px}.before-page h1{font:32px/1.3 Georgia,serif;margin:8px 0 18px}.before-page h2{font:25px/1.35 Georgia,serif;margin:0 0 14px}.before-page p{margin:0 0 18px}.before-page .before-brand{margin:0}.before-page .before-tag{margin:8px 0 0}.before-kicker{font-size:12px;letter-spacing:.13em;text-transform:uppercase}.before-photo{margin:0;min-width:0}.before-photo img{display:block;width:100%;height:auto;object-fit:contain}.before-photo figcaption{font-size:12px;padding:8px 16px;background:#efede8;color:#4b4b47}.before-columns{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin:36px 0}.before-services ul{padding-left:20px}.before-services li{padding:5px 0}.before-contact{border-top:1px solid #ccc;padding-top:30px;margin-top:34px;max-width:680px}.before-contact form{display:grid;gap:12px}.before-contact label{display:grid;gap:4px}.before-contact input,.before-contact textarea{font:inherit;width:100%;padding:8px;border:1px solid #999;border-radius:0}.before-contact button{font:inherit;min-height:44px;padding:8px 18px;width:max-content;max-width:100%;border:1px solid #777;background:#eee;color:#222;cursor:pointer}.before-demo{font-size:13px;color:#555}.before-footer{padding:24px 36px;border-top:1px solid #ccc;font-size:12px}.before-footer .dt-team-access{margin:0}.before-page :focus-visible{outline:3px solid #b65c23;outline-offset:4px}.before-introduction{display:grid;grid-template-columns:1fr 1.3fr;gap:34px;align-items:center}
/* Country wedding brochure: centred letterpress-style masthead and full estate photo. */
.before-wedding-venues{background:#e8e2d6}.before-wedding-venues .before-page{max-width:1050px;background:#fffcf4;border:double 4px #b0a28e}.before-wedding-venues .before-mast{text-align:center;padding:34px}.before-wedding-venues .before-brand{letter-spacing:.045em;color:#6b5540}.before-wedding-venues .before-nav{justify-content:center;background:#85715d}.before-wedding-venues .before-welcome{text-align:center;max-width:750px;margin:auto}.before-wedding-venues h2{color:#6b5540}
/* A small vineyard's earthy, two-column website. */
.before-wineries{background:#d9d9cf}.before-wineries .before-page{display:grid;grid-template-columns:205px 1fr;max-width:1110px}.before-wineries .before-mast{grid-column:1/-1;background:#eee9d7;border-bottom:5px solid #98613c;color:#43503a}.before-wineries .before-sidebar{background:#566048;color:white;padding:20px 0}.before-wineries .before-nav{display:grid;gap:0;background:transparent;padding:0}.before-wineries .before-nav a{padding:12px 24px;border-bottom:1px solid #77806c}.before-wineries .before-sidebar>p{padding:30px 24px;font:italic 16px Georgia,serif}.before-wineries main{padding:24px}.before-wineries .before-photo{margin-bottom:28px}.before-wineries .before-footer{grid-column:1/-1}.before-wineries h1,.before-wineries h2{color:#58603c}
/* Established estate: burgundy masthead and a generous, uncropped gate photograph. */
.before-barossa-winery{background:#f0ece6}.before-barossa-winery .before-mast{background:#582f39;color:#fff7ed;padding:32px 40px}.before-barossa-winery .before-tag{text-transform:uppercase;letter-spacing:.12em;font-size:11px}.before-barossa-winery .before-nav{background:#e8dccb}.before-barossa-winery .before-nav a{color:#542e37}.before-barossa-winery h1,.before-barossa-winery h2{color:#632f3b}.before-barossa-winery .before-services{padding:20px;background:#f2eade;border-left:4px solid #8c6b54}
/* Commercial contractor: practical yellow/charcoal identity with a project-led opening. */
.before-commercial-fit-outs{background:#dce0e1}.before-commercial-fit-outs .before-page{max-width:1180px;border-top:8px solid #d2b64f}.before-commercial-fit-outs .before-brand{font:bold 36px Arial,sans-serif;letter-spacing:-1px;text-transform:uppercase}.before-commercial-fit-outs .before-mast{background:#262c30;color:white}.before-commercial-fit-outs .before-nav{background:#d2b64f}.before-commercial-fit-outs .before-nav a{color:#222;font-weight:bold}.before-commercial-fit-outs .before-introduction{grid-template-columns:.8fr 1.3fr;align-items:start}.before-commercial-fit-outs h1,.before-commercial-fit-outs h2{font-family:Arial,sans-serif;font-weight:bold}.before-commercial-fit-outs .before-welcome{padding-top:18px}.before-commercial-fit-outs .before-services{border-top:4px solid #d2b64f;padding-top:18px}
/* Boutique salon: blush stationery and a portrait-led, compact composition. */
.before-hair-salons{background:#e9dcdf}.before-hair-salons .before-page{max-width:990px;background:#fffafa}.before-hair-salons .before-mast{text-align:center;color:#704950}.before-hair-salons .before-brand{font-style:italic;font-size:44px}.before-hair-salons .before-nav{background:#8f6670;justify-content:center}.before-hair-salons .before-introduction{grid-template-columns:1fr 1fr}.before-hair-salons .before-photo{border:8px solid #f1e1e4}.before-hair-salons h1,.before-hair-salons h2{color:#794d5c}.before-hair-salons .before-columns{border-block:1px solid #d5bfc7;padding:24px 0}
/* Hair atelier: restrained black-and-ivory with the full original portrait. */
.before-hair-salons-interactive{background:#f4f1eb}.before-hair-salons-interactive .before-page{max-width:1140px;border:none}.before-hair-salons-interactive .before-mast{padding:35px 38px 22px}.before-hair-salons-interactive .before-brand{font-size:43px;letter-spacing:.035em}.before-hair-salons-interactive .before-tag{font-size:10px;letter-spacing:.27em}.before-hair-salons-interactive .before-nav{background:#fff;border-block:1px solid #c5bda9}.before-hair-salons-interactive .before-nav a{color:#333;text-decoration:none;font-size:14px}.before-hair-salons-interactive .before-introduction{grid-template-columns:.85fr 1.35fr;gap:28px}.before-hair-salons-interactive .before-photo figcaption{background:#f4f0e6}.before-hair-salons-interactive .before-services{background:#eee7da;padding:24px}.before-hair-salons-interactive .before-about{padding:24px 0}
/* Cabinet maker: warm timber palette and a catalogue-like project photograph. */
.before-kitchens-joinery{background:#d9d2c5}.before-kitchens-joinery .before-page{max-width:1020px;background:#fffdf7;border:1px solid #988570}.before-kitchens-joinery .before-mast{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:3px solid #8b745a}.before-kitchens-joinery .before-brand{font-variant:small-caps;color:#514536}.before-kitchens-joinery .before-tag{max-width:160px;text-align:right}.before-kitchens-joinery .before-nav{background:#77745c}.before-kitchens-joinery .before-welcome{max-width:720px}.before-kitchens-joinery .before-photo{border:1px solid #c0ad91;padding:9px;background:#eee5d5}.before-kitchens-joinery .before-services h2{border-bottom:1px solid #a39679;padding-bottom:12px}
/* Local trade business: familiar blue, a clear list and a straightforward form. */
.before-plumbing-gas{background:#e7edf2}.before-plumbing-gas .before-page{max-width:1100px;border:2px solid #3d6e8b}.before-plumbing-gas .before-mast{background:#fff;border-bottom:6px solid #be654c}.before-plumbing-gas .before-brand{font:bold 34px Arial,sans-serif;color:#285873}.before-plumbing-gas .before-nav{background:#326a88}.before-plumbing-gas h1,.before-plumbing-gas h2{font-family:Arial,sans-serif;color:#285873;font-weight:bold}.before-plumbing-gas .before-trade{grid-template-columns:1.2fr 1fr;align-items:center}.before-plumbing-gas .before-services{background:#edf4f8;padding:24px;border:1px solid #b4cbd8}.before-plumbing-gas .before-contact button{background:#326a88;color:white;border:0}
/* Waterside accommodation: a simple postcard-like site with room for the setting. */
.before-boutique-stays{background:#d4e2df}.before-boutique-stays .before-page{max-width:960px;margin-top:36px;border:10px solid #f9f5e9}.before-boutique-stays .before-mast{text-align:center;background:#f9f5e9;color:#395d59}.before-boutique-stays .before-brand{font:italic 42px Georgia,serif}.before-boutique-stays .before-nav{justify-content:center;background:#547872}.before-boutique-stays .before-photo figcaption{text-align:center;background:#f4f1e5}.before-boutique-stays .before-welcome{text-align:center}.before-boutique-stays h1,.before-boutique-stays h2{color:#456c67}.before-boutique-stays .before-about{border-left:1px solid #b9cbc5;padding-left:25px}
@media(max-width:650px){.before-page{margin:12px!important;border-width:1px!important}.before-mast{padding:24px!important}.before-page .before-brand{font-size:30px!important}.before-page main{padding:24px 20px}.before-nav{padding:8px 18px;gap:4px 20px}.before-nav a{min-height:44px}.before-page h1{font-size:27px}.before-columns,.before-introduction{display:block!important}.before-introduction .before-photo{margin-top:22px}.before-columns>section{margin-bottom:24px}.before-wineries .before-page{display:block}.before-wineries .before-nav{display:flex;flex-wrap:wrap}.before-wineries .before-nav a{padding:4px 12px;border:0}.before-wineries .before-sidebar{padding:0}.before-wineries .before-sidebar>p{display:none}.before-kitchens-joinery .before-mast{display:block}.before-kitchens-joinery .before-tag{text-align:left;max-width:none}.before-boutique-stays .before-about{border:0;padding-left:0}.before-footer{padding:22px}.before-trade .before-services{margin-top:20px}.before-photo img{height:auto!important;max-height:none!important}}

/* Supplied before-makeover marker stays on the example even with its frame hidden. */
.before-photo{position:relative}
.before-photo .before-makeover-badge{position:absolute;top:0;right:0;width:clamp(150px,42%,280px);height:auto;max-width:46%;pointer-events:none;filter:none}
.before-photo .before-makeover-badge{inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill}

.before-status-sticky{position:fixed;z-index:105;top:calc(var(--dt-top-height,0px) + 7px);left:50%;width:min(330px,80vw);padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,22px) rotate(-35deg);transform-origin:center;transition:transform .32s ease,opacity .2s ease,visibility .2s}
.before-status-sticky img{display:block;width:100%;height:auto;margin:0}
.before-status-pinned .before-status-sticky{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(0)}
.before-photo .before-makeover-badge{transition:opacity .2s ease}
.before-status-pinned .before-photo .before-makeover-badge{opacity:0}
@media(prefers-reduced-motion:reduce){.before-status-sticky,.before-photo .before-makeover-badge{transition:none}}