:root{--ink:#142b3e;--muted:#4b6270;--blue:#074681;--green:#368d23;--green-text:#276d1b;--opening:linear-gradient(90deg,#fff 0%,#eef5fa 100%);--green-dark:#235b20;--line:#dce5e7;--wash:#f1f6f7;--max:1200px;color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
:root {
  --brand-rule: linear-gradient(110deg, var(--blue) 0 64%, #fff 64% calc(64% + 2px), var(--green) calc(64% + 2px));
}
*{box-sizing:border-box}
body {
  margin: 0;
  border-inline: clamp(2px, .36vw, 5px) solid;
  border-inline-start-color: var(--blue);
  border-inline-end-color: var(--green);
}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #287bb1;outline-offset:5px}
.shell{width:min(var(--max),calc(100% - 64px));margin-inline:auto}
.skip{position:fixed;top:8px;left:8px;z-index:8;transform:translateY(-150%);padding:12px;background:#fff}
.skip:focus{transform:none}
.hero,.page-intro{background:var(--opening)}
.site-header {
  position: relative;
  isolation: isolate;
  background:
    url(christmas-snow.svg) top center / 480px 210px repeat,
    radial-gradient(ellipse at 84% 20%, #e0f0e2, transparent 58%),
    linear-gradient(110deg, #fcfdff, #e8f2fa 54%, #f5f9f5);
}
.site-header::before{content:"";position:absolute;inset:0 auto auto 0;width:min(31%,405px);aspect-ratio:480/112;background:url(waves.svg) top left/contain no-repeat;z-index:-1;pointer-events:none}
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"phone logo online";align-items:center;justify-items:center;column-gap:clamp(14px,3vw,38px);padding-block:clamp(29px,3vw,40px) 18px}
.masthead>.logo{grid-area:logo}
.masthead-contact{display:grid;justify-items:center;min-width:0;gap:1px;text-align:center}
.masthead-phone{grid-area:phone}
.masthead-online{grid-area:online}
.masthead-label{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;color:var(--green-text);font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.masthead-label svg{width:16px;height:16px;flex:none}
.masthead-contact>a{max-width:100%;padding:4px 0;color:var(--blue);font-size:clamp(.89rem,1.25vw,1.05rem);font-weight:750;text-decoration:none;overflow-wrap:anywhere}
.masthead-contact>a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--green-text)}
.masthead-social{display:flex;justify-content:center;gap:8px;margin-top:4px}
.masthead-social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #b9ceda;border-radius:50%;color:var(--blue);background:#fff}
.masthead-social a:hover{color:#fff;background:var(--blue);border-color:var(--blue)}
.masthead-social svg{width:17px;height:17px}
@media(max-width:740px){
.masthead{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"logo logo" "phone online";align-items:start;gap:13px 9px}
.masthead-contact>a{font-size:clamp(.78rem,3.4vw,.93rem)}
.masthead-contact{width:100%}
}
.logo {
  position: relative;
  display: block;
  width: clamp(276px, 40vw, 462px);
  max-width: 100%;
  padding: clamp(9px, 1vw, 14px);
  border: 3px solid transparent;
  border-radius: clamp(14px, 1.6vw, 21px);
  background:
    linear-gradient(120deg, #fff 45%, #f5f9f7) padding-box,
    linear-gradient(128deg, var(--blue) 34%, #6c9e9c 52%, var(--green) 70%) border-box;
  box-shadow: 0 6px 17px #12354b14;
}
.logo img{width:100%;height:auto}
.logo::before,
.logo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.logo::before {
  inset: -10px;
  background: url(christmas-lights.svg) center / 100% 100% no-repeat;
}
.logo::after {
  width: clamp(58px, 6.5vw, 88px);
  aspect-ratio: 1;
  top: clamp(-47px, -3.5vw, -34px);
  left: clamp(-31px, -2.4vw, -19px);
  background: url(santa-hat.svg) center / contain no-repeat;
  transform: rotate(-13deg);
  filter: drop-shadow(0 2px 2px #142b3e40);
}
.site-header--compact::before{width:min(25%,330px)}
.site-header--compact .masthead{padding-block:clamp(27px,2.8vw,38px) 18px}
.site-header--compact .logo{width:clamp(228px,34vw,346px)}
.nav-bar{background:var(--brand-rule) top/100% 3px no-repeat;padding-top:3px}
nav{display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,62px);min-height:51px}
nav a{text-decoration:none;font-weight:800;font-size:clamp(1.02rem,1.5vw,1.2rem);position:relative;padding-block:12px;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--blue)}
nav a[aria-current]::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--green)}
.visit-strip{background:#f1f7f0;border-block:1px solid #e0ebdf;padding-block:12px 10px}
.visit-heading-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin-bottom:5px}
.visit-strip h2{margin:0;text-align:center;color:var(--blue);font-size:clamp(.95rem,2.8vw,1.1rem);letter-spacing:0;line-height:1.3}
.visit-playback{min-height:28px;padding:3px 9px;border:1px solid #9bb6a1;border-radius:999px;background:#fff;color:var(--blue);font-size:.75rem;font-weight:750;cursor:pointer}
.visit-playback:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.visit-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px}
.visit-track{grid-column:2;grid-row:1;display:flex;gap:8px;min-width:0;overflow-x:auto;margin:0;padding:5px 5px 7px;list-style:none;scrollbar-width:thin;scrollbar-color:#9bb6a1 transparent}
.visit-track li{flex:none}
.visit-track a{display:flex;align-items:center;min-height:40px;border:1px solid var(--green);border-radius:999px;padding:6px 14px;background:#fff;color:var(--blue);font-weight:750;font-size:.88rem;text-decoration:none;white-space:nowrap}
.visit-track a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.visit-track a:focus-visible{outline-offset:2px}
.visit-arrow{display:grid;place-items:center;grid-row:1;width:38px;height:38px;padding:0;border:1px solid #b9ceda;border-radius:50%;background:#fff;color:var(--blue);font-size:1.65rem;line-height:1;cursor:pointer}
.visit-arrow:hover:not([aria-disabled="true"]){background:var(--blue);color:#fff}
.visit-arrow[aria-disabled="true"]{opacity:.45;cursor:default}
.visit-prev{grid-column:1}
.visit-next{grid-column:3}
#enquiry-heading{scroll-margin-top:18px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:.65em;min-height:46px;padding:11px 18px;border:1px solid transparent;border-radius:7px;font-weight:750;font-size:.91rem;text-decoration:none;background:var(--green-text);color:#fff}
.button:hover{background:var(--green-dark)}
.button.secondary{color:var(--blue);background:#fff;border-color:#b8cbd4}
.button.secondary:hover{background:#e8f2f6}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--green-text);font-size:.74rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3{letter-spacing:-.035em;line-height:1.06}
h1{font-size:clamp(2.75rem,6vw,5.3rem);margin-bottom:22px;max-width:13ch}
h1 em{color:var(--blue);font-style:normal}
h2{font-size:clamp(2rem,4vw,3.35rem);margin-bottom:16px}
h3{font-size:1.25rem;margin-bottom:8px}
p{line-height:1.65}
.intro{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);max-width:57ch}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:clamp(25px,5vw,72px);padding-block:clamp(28px,4vw,54px) 60px}
.hero .intro{max-width:43ch;margin-bottom:27px}
.actions{display:flex;flex-wrap:wrap;gap:11px}
.hero-photo{margin:0;position:relative;border-radius:13px;overflow:hidden;background:#173952;box-shadow:0 20px 43px #12354b26}
.hero-photo img{height:clamp(360px,37vw,465px);width:100%;object-fit:cover;object-position:57% center}
.hero-photo figcaption{position:absolute;inset:auto 0 0;padding:36px 20px 17px;color:white;background:linear-gradient(transparent,#081b2bd9);font-size:.85rem;font-weight:650}
.band{background:var(--blue);color:white}
.band .shell{display:flex;justify-content:space-between;gap:20px;padding-block:17px;font-size:.87rem;font-weight:650}
.section{padding-block:clamp(52px,7vw,90px)}
.section.alt{background:var(--wash)}
.section-title{margin-bottom:28px}
.section-title p{margin-bottom:0}
.section-title::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 13px;
  border-radius: 2px;
  background: var(--brand-rule);
}
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.service{grid-column:span 2;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.service:nth-child(-n+2){grid-column:span 3}
.service-photo{width:100%;height:auto;aspect-ratio:2;object-fit:cover;background:var(--wash)}
.service:nth-child(-n+2) .service-photo{aspect-ratio:2.5}
.service-copy{padding:20px 22px 23px;border-top:3px solid var(--green)}
.service p{margin:0;color:var(--muted);font-size:.94rem}
.showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,6vw,80px)}
.showcase img{width:100%;height:clamp(245px,35vw,395px);object-fit:cover;border-radius:11px}
.page-intro .shell{padding-block:clamp(27px,4vw,53px) 46px}
.page-intro h1{max-width:none}
.page-intro .intro{margin-bottom:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 25px}
.filters button{min-height:42px;padding:7px 13px;border:1px solid #bacbd0;background:white;border-radius:30px;color:var(--ink);font-weight:700;cursor:pointer;font-size:.84rem}
.filters button:hover{border-color:var(--blue)}
.filters button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.project{margin:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:white}
.project.featured{grid-column:1/-1}
.compare{--split:50%;position:relative;isolation:isolate;overflow:hidden;background:#183448;aspect-ratio:1.95}
.featured .compare{aspect-ratio:2.45}
.compare.portrait{aspect-ratio:1.14}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--position,center)}
.compare .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare .label{position:absolute;top:12px;padding:5px 9px;background:#0b2139e6;color:#fff;border-radius:4px;font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}
.compare .label.left{left:12px}
.compare .label.right{right:12px}
.compare .divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 0 2px #17344380)}
.compare .handle{position:absolute;top:50%;left:var(--split);transform:translate(-50%,-50%);background:#fff;color:var(--blue);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;box-shadow:0 2px 12px #18344855;pointer-events:none}
.compare .handle svg{width:25px;height:25px}
.compare input{position:absolute;inset:0 -22px;width:calc(100% + 44px);height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;appearance:none;background:transparent}
.compare input::-webkit-slider-thumb{appearance:none;width:44px;height:44px}
.compare input::-moz-range-thumb{width:44px;height:44px;border:0}
.compare:focus-within .handle{outline:3px solid #fff;box-shadow:0 0 0 6px var(--blue)}
.project figcaption{padding:15px 18px 17px}
.project figcaption p{color:var(--muted);font-size:.88rem;margin-bottom:0}
.project figcaption h3{margin-bottom:5px}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.details figure{margin:0;border-radius:9px;background:#fff;overflow:hidden}
.details img{width:100%;aspect-ratio:1.6;object-fit:cover}
.details figcaption{font-size:.85rem;padding:10px 12px;font-weight:650}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.contact-panel{padding:clamp(22px,4vw,40px);border:1px solid var(--line);border-radius:11px;background:#fff}
.contact-panel.coverage{background:var(--wash)}
.contact-list{margin:20px 0 0}
.contact-list div{display:grid;gap:4px;padding-block:13px;border-top:1px solid var(--line)}
.contact-list dt{color:var(--muted);font-size:.84rem;font-weight:650}
.contact-list dd{margin:0;font-weight:800;color:var(--blue);overflow-wrap:anywhere}
.contact-list a:hover{text-decoration-thickness:2px}
.contact-sidebar{display:grid;gap:20px}
.enquiry-form,.enquiry-field{display:grid;gap:8px}
.enquiry-form{gap:16px}
.enquiry-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.enquiry-field label{font-size:.89rem;font-weight:750}
.enquiry-field label span{font-weight:500;color:var(--muted)}
.enquiry-field input,.enquiry-field select,.enquiry-field textarea{width:100%;min-height:46px;border:1px solid #9aafb9;border-radius:6px;padding:10px 12px;background:#fff;color:var(--ink);font:inherit}
.enquiry-field textarea{resize:vertical}
.enquiry-field small{color:var(--muted);font-size:.82rem}
.enquiry-form button{justify-self:start;cursor:pointer}
.enquiry-note{margin:0;color:var(--muted);font-size:.82rem}
.enquiry-confirmation{display:none;margin:0 0 20px;padding:12px 15px;border-left:3px solid var(--green);background:#edf6eb;border-radius:4px;scroll-margin-top:16px}
.enquiry-confirmation:target{display:block}
.footer{position:relative;background:var(--brand-rule) top/100% 3px no-repeat #f7fafb;isolation:isolate;padding-top:3px;overflow:hidden}
.footer::after{content:"";position:absolute;right:0;bottom:0;width:min(23%,250px);aspect-ratio:480/112;background:url(waves.svg) center/contain no-repeat;transform:rotate(180deg);z-index:-1}
.footer .shell{display:grid;grid-template-columns:1fr auto;align-items:start;gap:16px;padding-block:26px 42px}
.footer strong{display:block;margin-bottom:4px}
.footer p{color:var(--muted);font-size:.85rem;margin:0}
.footer a{display:inline-block;font-size:.86rem;color:var(--blue);font-weight:750}
@media(max-width:850px){
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.service,.service:nth-child(-n+2){grid-column:auto}
.service:nth-child(-n+2) .service-photo{aspect-ratio:2}
.hero-grid{gap:24px}
.hero-photo img{height:350px}
}
@media(max-width:660px){
.shell{width:calc(100% - 32px)}
nav{min-height:49px}
.hero-grid,.showcase,.contact-grid{grid-template-columns:1fr}
.hero-grid{padding-block:26px 27px;gap:26px}
.hero-photo img{height:clamp(235px,65vw,350px)}
.band .shell{font-size:.73rem;gap:10px}
.band .shell span:last-child{text-align:right}
.page-intro .shell{padding-block:25px 33px}
.gallery{grid-template-columns:1fr}
.featured .compare{aspect-ratio:1.6}
.details{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer .shell{grid-template-columns:1fr}
}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

@media(max-width:420px){.enquiry-fields{grid-template-columns:1fr}}

.service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
}
.service-links a {
  color: var(--blue);
  font-size: .9rem;
  font-weight: 750;
  text-underline-offset: 3px;
}
.service-links a:hover { color: var(--green-text); }
.service-page h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}
.service-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.service-details p {
  color: var(--muted);
  margin-bottom: 0;
}
@media (max-width: 850px) {
  .service-details { grid-template-columns: 1fr; }
}