/* Live hero and six service links over separately cropped reference artwork. */
.services-page{--su:min(.0998004vw,1.4px)}
.services-hero{height:calc(369 * var(--su));min-height:0;max-height:none;background:#063b5b;overflow:hidden;isolation:isolate}
.services-hero:after{display:none}
.services-hero-photo{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;z-index:-1;mask:url('../images/services/hero-photo-mask.svg') center/100% 100% no-repeat}
.services-hero-inner{position:relative;inset:auto;height:100%;display:flex;align-items:center}
.services-hero-copy{position:relative;width:53%;height:auto;overflow:visible;clip-path:none;white-space:normal;padding:0 0 calc(18 * var(--su)) calc(8 * var(--su))}
.services-paint-label{font-size:calc(21 * var(--su));line-height:1.25;margin-bottom:calc(11 * var(--su));padding:calc(4 * var(--su)) calc(12 * var(--su));font-weight:800;transform:rotate(-4deg)}
.services-paint-label:before{inset:calc(-4 * var(--su)) calc(-12 * var(--su));background:#fb820c;mask:url('../images/reference/about-paint-badge.svg') center/100% 100% no-repeat}
.services-hero h1{font-size:calc(38 * var(--su));line-height:1.04;letter-spacing:calc(-.9 * var(--su));margin:0 0 calc(8 * var(--su));font-weight:800;color:white}
.services-hero h1 em{font-size:calc(65 * var(--su));color:#ff8a18;line-height:1.02;letter-spacing:calc(-1 * var(--su))}
.services-hero-copy>p{font-size:calc(19 * var(--su));line-height:1.3;margin:0}
.services-brush-line{width:calc(170 * var(--su));height:calc(10 * var(--su));margin-top:calc(12 * var(--su))}
.services-ribbon{padding:calc(23 * var(--su)) 0 calc(22 * var(--su));margin-top:calc(-28 * var(--su));position:relative;background:#fafaf7 url('../images/reference/paper-texture.png') center/cover;mask:url('../images/reference/about-paper-edge.svg') center/100% 100% no-repeat;clip-path:polygon(0 23%,10% 12%,20% 3%,29% 0,38% 10%,46% 20%,58% 24%,72% 20%,84% 25%,100% 22%,100% 100%,0 100%);filter:none}
.services-ribbon-grid{position:relative;inset:auto;width:93.2%;max-width:1336px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding-top:calc(15 * var(--su))}
.services-ribbon-grid>a{position:relative;display:flex;align-items:center;gap:calc(8 * var(--su));padding:0 calc(10 * var(--su))!important;border-right:1px solid #c6d0d4!important;min-width:0}
.services-ribbon-grid>a:first-child{padding-left:0!important}.services-ribbon-grid>a:last-child{border:0!important}
.services-ribbon-grid>a>*{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.services-ribbon-grid>a>.services-ribbon-icon{display:block;width:calc(43 * var(--su));height:calc(49 * var(--su));object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.services-ribbon-grid strong{font-size:calc(11 * var(--su));line-height:1.2;margin-bottom:calc(5 * var(--su))}.services-ribbon-grid small{font-size:calc(9 * var(--su));line-height:1.3;white-space:normal}
@media(min-width:1600px){.services-hero-copy{padding-bottom:calc(18 * var(--su))}}
@media(min-width:576px) and (max-width:991px){.services-hero{height:calc(369 * var(--su))}.services-ribbon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 0}.services-ribbon-grid>a>.services-ribbon-icon{width:42px;height:48px}.services-ribbon-grid strong{font-size:13px}.services-ribbon-grid small{font-size:11px}.services-ribbon-grid>a:nth-child(3){border:0!important}.services-ribbon-grid>a:nth-child(4){padding-left:0!important}.services-ribbon{padding:30px 0 24px}}
@media(max-width:575px){.services-page{--su:1px}.services-hero{height:340px}.services-hero-photo{width:1100px;max-width:none;left:calc(100% - 1100px);opacity:.35;mask:none}.services-hero-copy{width:100%;padding:0}.services-paint-label{font-size:18px}.services-hero h1{font-size:clamp(23px,6.3vw,34px)}.services-hero h1 em{font-size:clamp(44px,12vw,62px)}.services-hero-copy>p{font-size:16px}.services-ribbon{margin-top:-22px;padding:30px 0 22px;clip-path:polygon(0 6%,22% 0,47% 5%,76% 4%,100% 6%,100% 100%,0 100%)}.services-ribbon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding-top:0}.services-ribbon-grid>a>.services-ribbon-icon{width:34px;height:40px}.services-ribbon-grid strong{font-size:12px}.services-ribbon-grid small{font-size:10px}.services-ribbon-grid>a:nth-child(odd){padding-left:0!important}.services-ribbon-grid>a:nth-child(even){border:0!important}.services-ribbon-grid>a:nth-child(3){border-right:1px solid #c6d0d4!important}}

.services-ribbon{clip-path:none;mask:url('../images/services/ribbon-paper-mask.svg') center/100% 100% no-repeat}
.services-ribbon-icon{filter:contrast(1.25) brightness(1.07)}
@media(min-width:992px){.services-ribbon-grid>a{padding-inline:calc(6 * var(--su))!important;gap:calc(7 * var(--su))}.services-ribbon-grid strong{font-size:calc(10.5 * var(--su));white-space:nowrap}}
@media(max-width:575px){.services-ribbon{mask:url('../images/reference/about-paper-edge.svg') center/100% 100% no-repeat}}

/* Keep the harbour artwork flush right and soften its join with the navy copy panel. */
.services-hero-photo{left:auto;right:0;mask-image:linear-gradient(90deg,transparent 0%,transparent 36%,#000 52%,#000 100%);mask-position:center;mask-size:100% 100%;mask-repeat:no-repeat}
@media(max-width:575px){.services-hero-photo{left:auto;right:0;mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);opacity:.45}}

/* Reduce only the underlying artwork, preserving the full-width blended hero. */
.services-hero-photo image{transform-box:fill-box;transform-origin:right top;transform:scale(.94)}
@media(max-width:575px){.services-hero-photo image{transform:none}}

@media(min-width:576px){.services-hero-photo{mask-image:linear-gradient(90deg,transparent 0%,transparent 49%,#000 60%,#000 100%)}}

/* The redesigned banner includes its own smooth navy blend. */
.services-hero-photo{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right top;mask:none}
@media(max-width:575px){.services-hero-photo{inset:0;width:100%;opacity:.45}}