/* Plain CSS reset: no framework or CDN required. */
*,::before,::after {
  box-sizing:border-box;
  border:0 solid;
  margin:0;
  padding:0
}

html {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  tab-size:4
}

h1,h2,h3,h4,h5,h6 {
  font-size:inherit;
  font-weight:inherit
}

button,input,select,textarea {
  font:inherit;
  letter-spacing:inherit;
  color:inherit
}

button,summary {
  cursor:pointer
}

img {
  vertical-align:middle
}

b,strong {
  font-weight:bolder
}

:root {
  --night:#0a1513;
  --forest:#152c27;
  --paper:#eeeae0;
  --white:#fff;
  --orange:#f0783c;
  --moss:#69746b;
  --line:rgba(10,21,19,.18);
  --pad:clamp(20px,5vw,78px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--night);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden
}

::selection {
  background:var(--orange);
  color:var(--night)
}

a {
  color:inherit
}

img {
  display:block;
  max-width:100%;
  height:auto
}

p {
  line-height:1.62
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  overflow-wrap:break-word
}

em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--orange)
}

.site-header {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  position:relative;
  z-index:20;
  background:var(--night);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14)
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  font-weight:800;
  letter-spacing:-.03em;
  font-size:19px;
  line-height:1
}

.brand small {
  display:block;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-top:5px;
  color:rgba(255,255,255,.55)
}

.brand-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  font-size:14px;
  overflow:hidden
}

.brand-mark b {
  position:absolute;
  transform:translate(-3px,-4px)
}

.brand-mark i {
  position:absolute;
  color:var(--orange);
  font-style:normal;
  transform:translate(3px,5px)
}

.site-header nav {
  display:flex;
  gap:30px;
  align-items:center
}

.site-header nav a {
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em
}

.site-header nav a:not(.nav-cta):hover {
  color:var(--orange)
}

.nav-cta {
  background:var(--orange);
  color:var(--night);
  padding:13px 18px
}

.nav-cta span {
  margin-left:16px
}

.mobile-menu {
  display:none
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  font-weight:800
}

.eyebrow.light {
  color:var(--orange)
}

.hero {
  position:relative;
  display:flex;
  min-height:calc(100svh - 82px);
  padding:0;
  color:#fff;
  overflow:hidden
}

.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,13,12,.9) 0%,rgba(5,13,12,.58) 48%,rgba(5,13,12,.1) 100%),linear-gradient(0deg,rgba(5,13,12,.72),transparent 48%)
}

.hero-copy {
  position:relative;
  z-index:2;
  align-self:flex-end;
  padding:0 var(--pad) clamp(76px,8vw,124px);
  max-width:1120px
}

.hero h1 {
  font-size:clamp(72px,10vw,156px);
  line-height:.78;
  letter-spacing:-.085em;
  margin:26px 0 36px
}

.hero h1 em {
  display:inline-block
}

.lead {
  font-size:clamp(17px,1.5vw,23px);
  max-width:700px;
  color:rgba(255,255,255,.82)
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin:38px 0 0
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-width:235px;
  padding:17px 20px;
  background:var(--orange);
  color:var(--night);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition:.2s
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.15)
}

.button span {
  font-size:17px
}

.button.lime {
  background:var(--night);
  color:#fff
}

.text-link {
  font-size:13px;
  font-weight:800;
  text-decoration:none
}

.hero .text-link {
  color:#fff
}

.hero-index {
  position:absolute;
  z-index:2;
  right:var(--pad);
  bottom:clamp(76px,8vw,124px);
  width:285px;
  border-top:1px solid rgba(255,255,255,.48);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 22px;
  padding-top:18px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em
}

.hero-index span {
  opacity:.55
}

.hero-index b {
  text-align:right
}

.proof-strip {
  background:var(--orange);
  padding:22px var(--pad);
  display:grid;
  grid-template-columns:auto 1fr auto 1.5fr auto 1.2fr;
  gap:18px;
  align-items:center;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.proof-strip span {
  opacity:.58
}

.proof-strip b {
  font-size:10px
}

.services-section,.faq-section,.areas-section,.fit-section,.eeat-section {
  padding:clamp(85px,10vw,155px) var(--pad)
}

.services-section {
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:8vw
}

.section-intro {
  position:sticky;
  top:45px;
  align-self:start
}

.section-intro h2,.areas-section h2,.faq-section h2,.fit-section h2,.eeat-section h2 {
  font-size:clamp(52px,6vw,92px);
  line-height:.91;
  letter-spacing:-.07em;
  margin:25px 0 34px
}

.section-intro>p:not(.eyebrow) {
  max-width:420px;
  color:rgba(10,21,19,.67);
  font-size:16px
}

.section-intro .text-link {
  display:inline-block;
  margin-top:20px;
  border-bottom:1px solid
}

.service-showcase {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.service-tile {
  text-decoration:none;
  background:#fff;
  min-width:0;
  transition:.25s
}

.service-tile:nth-child(even) {
  transform:translateY(65px)
}

.service-tile:hover {
  transform:translateY(-5px)
}

.service-tile:nth-child(even):hover {
  transform:translateY(58px)
}

.service-tile-image {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden
}

.service-tile-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}

.service-tile:hover img {
  transform:scale(1.035)
}

.service-tile-image>span {
  position:absolute;
  top:0;
  left:0;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  background:var(--orange);
  font-size:11px;
  font-weight:800
}

.service-tile-copy {
  padding:25px
}

.service-tile-copy>p {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.55
}

.service-tile h3 {
  font-size:clamp(25px,2.4vw,38px);
  letter-spacing:-.055em;
  margin:35px 0 20px
}

.service-tile b {
  display:block;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.process-section,.signs-section,.values-section {
  background:var(--night);
  color:#fff;
  padding:clamp(82px,9vw,140px) var(--pad)
}

.process-section {
  margin-top:60px
}

.process-kicker {
  display:flex;
  justify-content:space-between
}

.process-kicker>span {
  font-size:10px;
  letter-spacing:.15em;
  color:rgba(255,255,255,.4)
}

.process-heading {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12vw;
  align-items:end;
  margin:48px 0 90px
}

.process-heading h2 {
  font-size:clamp(56px,7vw,108px);
  line-height:.88;
  letter-spacing:-.075em;
  margin:0
}

.process-heading p {
  max-width:480px;
  color:rgba(255,255,255,.62);
  font-size:17px
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.2)
}

.steps article {
  padding:28px 40px 0 0;
  border-right:1px solid rgba(255,255,255,.18);
  min-height:250px
}

.steps article+article {
  padding-left:35px
}

.steps article:last-child {
  border-right:0
}

.steps span,.values-section article span {
  color:var(--orange);
  font-size:10px;
  letter-spacing:.12em
}

.steps h3,.values-section h3 {
  font-size:27px;
  margin:75px 0 12px
}

.steps p,.values-section p {
  color:rgba(255,255,255,.58);
  max-width:310px
}

.areas-section {
  background:#ddd9cd
}

.areas-section>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:start
}

.area-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  margin-top:65px
}

.area-grid article {
  border:1px solid rgba(10,21,19,.2);
  padding:28px;
  min-height:265px;
  margin:-1px 0 0 -1px;
  display:flex;
  flex-direction:column
}

.area-grid article span,.service-card-copy>p:first-child,.featured-content span,.post-copy>span {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.55
}

.area-grid h3 {
  font-size:36px;
  letter-spacing:-.05em;
  margin:auto 0 10px
}

.area-grid p {
  opacity:.66;
  margin:0
}

.area-grid .area-feature {
  background:var(--orange);
  grid-row:span 2;
  min-height:530px
}

.area-feature h3 {
  font-size:clamp(75px,8vw,125px)
}

.faq-section {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:10vw
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  padding:26px 0;
  font-weight:800;
  font-size:18px;
  display:flex;
  justify-content:space-between;
  gap:20px
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary span {
  font-size:24px;
  color:var(--orange)
}

.faq-list details[open] summary span {
  transform:rotate(45deg)
}

.faq-list details p {
  max-width:720px;
  color:rgba(10,21,19,.66);
  padding:0 45px 26px 0;
  margin:0
}

.quote-section {
  background:var(--orange);
  padding:clamp(75px,9vw,135px) var(--pad);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12vw
}

.quote-section h2 {
  font-size:clamp(60px,8vw,120px);
  line-height:.82;
  letter-spacing:-.08em;
  margin:28px 0
}

.quote-section em {
  color:var(--night)
}

.quote-copy {
  align-self:end
}

.quote-copy>p {
  font-size:19px;
  max-width:550px
}

.quote-copy .button {
  margin:25px 0
}

.quote-copy small {
  display:block;
  max-width:570px;
  line-height:1.5;
  opacity:.62
}

.site-footer {
  background:#060e0c;
  color:#fff;
  padding:80px var(--pad) 25px
}

.brand-light {
  color:#fff
}

.footer-main {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8vw;
  padding-bottom:70px
}

.footer-main>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px
}

.footer-main a {
  text-decoration:none;
  color:rgba(255,255,255,.62);
  font-size:13px
}

.footer-main a:hover {
  color:var(--orange)
}

.footer-note {
  max-width:350px;
  color:rgba(255,255,255,.5);
  margin-top:22px
}

.footer-label {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:9px;
  color:var(--orange);
  margin-bottom:8px
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.38);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em
}

.page-hero {
  padding:clamp(88px,10vw,160px) var(--pad);
  background:var(--night);
  color:#fff
}

.page-hero h1 {
  font-size:clamp(68px,9vw,140px);
  line-height:.82;
  letter-spacing:-.08em;
  margin:30px 0 42px;
  max-width:1300px
}

.page-hero>p:last-child,.page-hero-content>p:last-child {
  font-size:19px;
  max-width:760px;
  color:rgba(255,255,255,.66)
}

.services-hero {
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end
}

.service-grid {
  padding:0 var(--pad) 130px;
  background:var(--night);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px
}

.service-card {
  background:var(--paper);
  text-decoration:none;
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0
}

.service-card-image {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden
}

.service-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s
}

.service-card:hover img {
  transform:scale(1.035)
}

.service-card-image span {
  position:absolute;
  top:0;
  left:0;
  background:var(--orange);
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800
}

.service-card-copy {
  padding:32px;
  min-height:330px;
  display:flex;
  flex-direction:column
}

.service-card-copy h2 {
  font-size:clamp(38px,4vw,62px);
  line-height:.94;
  letter-spacing:-.065em;
  margin:auto 0 20px
}

.service-card-copy>p:not(:first-child) {
  max-width:570px;
  opacity:.66
}

.service-card-copy>b {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.fit-section,.eeat-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  border-top:1px solid var(--line)
}

.fit-section>p,.eeat-section>div:last-child {
  font-size:19px;
  align-self:center;
  max-width:620px
}

.detail-hero {
  background:var(--night);
  color:#fff;
  padding:clamp(65px,7vw,105px) var(--pad) clamp(85px,9vw,135px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:6vw;
  align-items:end
}

.back-link {
  display:inline-block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-decoration:none;
  margin-bottom:65px;
  color:rgba(255,255,255,.55)
}

.detail-hero h1 {
  font-size:clamp(60px,7.3vw,112px);
  line-height:.84;
  letter-spacing:-.075em;
  max-width:1000px;
  margin:25px 0 34px
}

.detail-hero .lead {
  max-width:720px
}

.detail-hero .button {
  margin-top:24px
}

.detail-visual {
  margin:0;
  position:relative;
  min-height:640px;
  overflow:hidden
}

.detail-visual>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.detail-visual figcaption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(transparent,rgba(5,13,12,.9));
  padding:110px 28px 26px;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.detail-visual figcaption>span {
  font-size:clamp(80px,9vw,140px);
  color:var(--orange);
  font-weight:800;
  letter-spacing:-.09em;
  line-height:.7
}

.detail-visual figcaption div {
  text-align:right
}

.detail-visual figcaption p {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--orange);
  margin:0
}

.detail-visual figcaption b {
  font-size:11px
}

.detail-content {
  padding:clamp(85px,9vw,135px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12vw
}

.detail-content h2 {
  font-size:48px;
  letter-spacing:-.055em;
  margin:25px 0 38px
}

.check-list,.plain-list {
  list-style:none;
  padding:0;
  margin:0
}

.check-list li,.plain-list li {
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-weight:700
}

.check-list li:before {
  content:'✓';
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  background:var(--orange);
  margin-right:14px;
  font-size:11px
}

.plain-list {
  counter-reset:item
}

.plain-list li:before {
  counter-increment:item;
  content:'0'counter(item);
  font-size:9px;
  color:var(--orange);
  margin-right:18px
}

.signs-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12vw
}

.signs-section h2 {
  font-size:clamp(54px,6.5vw,98px);
  line-height:.88;
  letter-spacing:-.07em;
  margin:28px 0
}

.signs-section ol {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(255,255,255,.18)
}

.signs-section li {
  padding:25px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:18px
}

.signs-section li span {
  display:inline-block;
  width:55px;
  color:var(--orange);
  font-size:9px
}

.image-page-hero {
  position:relative;
  min-height:calc(100svh - 82px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:0
}

.image-page-hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.page-hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,13,12,.88),rgba(5,13,12,.3)),linear-gradient(0deg,rgba(5,13,12,.78),transparent 50%)
}

.page-hero-content {
  position:relative;
  z-index:2;
  padding:0 var(--pad) clamp(75px,8vw,120px)
}

.page-hero-content h1 {
  font-size:clamp(68px,9vw,140px);
  line-height:.82;
  letter-spacing:-.08em;
  margin:28px 0 38px
}

.story-section {
  padding:clamp(85px,10vw,155px) var(--pad);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:9vw
}

.story-stat {
  min-height:620px;
  position:relative;
  overflow:hidden
}

.story-stat>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.story-stat:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(5,13,12,.86),transparent 60%)
}

.story-stat>div {
  position:absolute;
  z-index:2;
  inset:auto 30px 28px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.story-stat span {
  font-size:clamp(65px,7vw,105px);
  font-weight:800;
  letter-spacing:-.09em
}

.story-stat p {
  font-weight:700;
  max-width:180px;
  margin:0
}

.story-copy {
  align-self:center
}

.story-copy h2 {
  font-size:clamp(46px,5.5vw,82px);
  line-height:.94;
  letter-spacing:-.065em;
  margin:26px 0 36px
}

.story-copy>p:not(.eyebrow) {
  font-size:18px;
  max-width:720px
}

.values-section>div {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:42px
}

.values-section article {
  padding:25px 30px 0 0;
  min-height:310px;
  border-right:1px solid rgba(255,255,255,.18)
}

.values-section article+article {
  padding-left:25px
}

.values-section article:last-child {
  border:0
}

.featured-post {
  position:relative;
  margin:0;
  background:var(--night);
  color:#fff;
  min-height:700px;
  overflow:hidden
}

.featured-post>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.featured-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,13,12,.92) 0%,rgba(5,13,12,.46) 60%,rgba(5,13,12,.12))
}

.featured-content {
  position:relative;
  z-index:2;
  padding:clamp(70px,9vw,140px) var(--pad);
  max-width:980px
}

.featured-content h2 {
  font-size:clamp(55px,7vw,105px);
  line-height:.88;
  letter-spacing:-.075em;
  margin:40px 0
}

.featured-content p {
  color:rgba(255,255,255,.68);
  font-size:18px;
  max-width:650px
}

.featured-content a {
  display:inline-block;
  margin-top:22px;
  color:var(--orange);
  font-weight:800
}

.posts-grid {
  padding:1px var(--pad) 110px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px
}

.posts-grid article {
  position:relative;
  background:#fff;
  min-height:580px;
  display:grid;
  grid-template-rows:250px 1fr
}

.posts-grid article>img {
  width:100%;
  height:100%;
  object-fit:cover
}

.post-copy {
  padding:28px;
  display:flex;
  flex-direction:column
}

.post-copy h2 {
  font-size:36px;
  line-height:1.02;
  letter-spacing:-.055em;
  margin:auto 0 18px;
  max-width:520px
}

.post-copy p {
  max-width:540px;
  opacity:.66
}

.post-copy a {
  font-weight:800;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em
}

.posts-grid article>b {
  position:absolute;
  right:18px;
  top:16px;
  background:var(--orange);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:10px
}

.editorial-note {
  padding:0 var(--pad) 100px
}

.editorial-note p {
  border-top:1px solid var(--line);
  padding-top:25px;
  font-size:13px;
  max-width:850px;
  opacity:.64
}

.breadcrumb {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:55px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.48)
}

.breadcrumb a {
  text-decoration:none
}

.breadcrumb a:hover {
  color:var(--orange)
}

.breadcrumb b {
  color:#fff;
  font-weight:700
}

.seo-copy-section {
  padding:clamp(85px,9vw,140px) var(--pad);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:10vw;
  border-bottom:1px solid var(--line)
}

.seo-copy-heading h2 {
  font-size:clamp(46px,5.5vw,82px);
  line-height:.94;
  letter-spacing:-.065em;
  margin:25px 0
}

.seo-copy-body {
  max-width:760px
}

.seo-copy-body p {
  font-size:18px;
  color:rgba(10,21,19,.72);
  margin-bottom:24px
}

.benefits-section {
  background:var(--forest);
  color:#fff;
  padding:clamp(80px,9vw,135px) var(--pad)
}

.section-title-row {
  display:flex;
  justify-content:space-between;
  align-items:start
}

.section-title-row h2 {
  font-size:clamp(50px,6vw,92px);
  line-height:.9;
  letter-spacing:-.07em;
  margin:28px 0 65px
}

.section-title-row>span {
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.42)
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.2)
}

.benefit-grid article {
  padding:28px 35px 0 0;
  min-height:280px;
  border-right:1px solid rgba(255,255,255,.18)
}

.benefit-grid article+article {
  padding-left:35px
}

.benefit-grid article:last-child {
  border-right:0
}

.benefit-grid article>span {
  font-size:10px;
  letter-spacing:.12em;
  color:var(--orange)
}

.benefit-grid h3 {
  font-size:30px;
  letter-spacing:-.045em;
  margin:78px 0 12px
}

.benefit-grid p {
  max-width:330px;
  color:rgba(255,255,255,.58)
}

.service-process-section {
  padding:clamp(85px,9vw,140px) var(--pad);
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:10vw;
  background:#ddd9cd
}

.process-side h2 {
  font-size:clamp(48px,5.5vw,82px);
  line-height:.93;
  letter-spacing:-.065em;
  margin:25px 0 30px
}

.process-side>p:last-child {
  max-width:420px;
  color:rgba(10,21,19,.66)
}

.service-process-list {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line)
}

.service-process-list li {
  display:grid;
  grid-template-columns:55px 1fr;
  gap:20px;
  padding:27px 0;
  border-bottom:1px solid var(--line)
}

.service-process-list li>span {
  font-size:10px;
  color:var(--orange);
  padding-top:6px
}

.service-process-list h3 {
  font-size:27px;
  letter-spacing:-.04em;
  margin-bottom:8px
}

.service-process-list p {
  margin:0;
  max-width:650px;
  color:rgba(10,21,19,.66)
}

.preparation-section {
  padding:clamp(80px,9vw,135px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12vw;
  background:var(--orange)
}

.preparation-section h2 {
  font-size:clamp(52px,6.5vw,96px);
  line-height:.88;
  letter-spacing:-.07em;
  margin:28px 0
}

.preparation-section em {
  color:var(--night)
}

.preparation-section ul {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(10,21,19,.35);
  align-self:end
}

.preparation-section li {
  padding:22px 0;
  border-bottom:1px solid rgba(10,21,19,.35);
  font-weight:800
}

.preparation-section li:before {
  content:'→';
  display:inline-block;
  width:42px
}

.local-service-section {
  padding:clamp(85px,9vw,140px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw 10vw
}

.local-service-section h2 {
  font-size:clamp(48px,5.5vw,82px);
  line-height:.93;
  letter-spacing:-.065em;
  margin:25px 0
}

.local-copy {
  align-self:center;
  max-width:680px
}

.local-copy p {
  font-size:17px;
  color:rgba(10,21,19,.7)
}

.local-copy a {
  display:inline-block;
  margin-top:15px;
  font-size:12px;
  font-weight:800
}

.location-tags {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:35px;
  border-top:1px solid var(--line)
}

.location-tags span {
  border:1px solid var(--line);
  padding:11px 15px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.content-standard {
  padding:55px var(--pad);
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:10vw;
  background:#d7d3c7;
  border-top:1px solid var(--line)
}

.content-standard h2 {
  font-size:34px;
  letter-spacing:-.05em;
  margin:20px 0
}

.content-standard>div:last-child {
  max-width:780px
}

.content-standard p {
  font-size:13px;
  color:rgba(10,21,19,.66)
}

.content-standard .reviewed {
  margin-top:25px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800;
  color:var(--night)
}

.related-services-section {
  background:var(--night);
  color:#fff;
  padding:clamp(80px,9vw,135px) var(--pad)
}

.related-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:55px
}

.related-heading h2 {
  font-size:clamp(50px,6vw,90px);
  line-height:.9;
  letter-spacing:-.07em;
  margin:25px 0 0
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px
}

.related-grid>a {
  background:var(--paper);
  color:var(--night);
  text-decoration:none;
  min-width:0
}

.related-grid img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.related-grid>a>div {
  padding:24px;
  position:relative
}

.related-grid span {
  font-size:9px;
  color:var(--orange)
}

.related-grid h3 {
  font-size:27px;
  letter-spacing:-.05em;
  margin:40px 0 18px
}

.related-grid b {
  display:block;
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em
}

@media(max-width:960px) {
  .site-header nav {
    display:none
  }

  .mobile-menu {
    display:block;
    position:relative
  }

  .mobile-menu summary {
    list-style:none;
    border:1px solid rgba(255,255,255,.4);
    padding:10px 14px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
    cursor:pointer
  }

  .mobile-menu summary::-webkit-details-marker {
    display:none
  }

  .mobile-menu div {
    position:absolute;
    right:0;
    top:45px;
    background:var(--orange);
    color:var(--night);
    width:230px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:18px
  }

  .mobile-menu div a {
    text-decoration:none;
    font-weight:800
  }

  .hero-index {
    display:none
  }

  .services-section,.faq-section,.quote-section,.detail-hero,.detail-content,.signs-section,.fit-section,.eeat-section,.story-section {
    grid-template-columns:1fr
  }

  .section-intro {
    position:static
  }

  .service-showcase {
    margin-top:30px
  }

  .process-heading {
    grid-template-columns:1fr;
    gap:30px
  }

  .steps {
    grid-template-columns:1fr
  }

  .steps article,.steps article+article {
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:25px 0;
    min-height:190px
  }

  .area-grid {
    grid-template-columns:1fr 1fr
  }

  .area-grid .area-feature {
    grid-row:auto;
    grid-column:span 2;
    min-height:390px
  }

  .service-grid,.posts-grid {
    grid-template-columns:1fr
  }

  .detail-visual {
    min-height:560px
  }

  .footer-main {
    grid-template-columns:1fr 1fr
  }

  .footer-main>div:first-child {
    grid-column:span 2
  }

  .values-section>div {
    grid-template-columns:1fr 1fr
  }

  .values-section article:nth-child(2) {
    border-right:0
  }

}

@media(max-width:600px) {
  .site-header {
    height:74px
  }

  .brand {
    font-size:16px
  }

  .brand-mark {
    width:38px;
    height:38px
  }

  .hero {
    min-height:760px
  }

  .hero-copy {
    padding-bottom:80px
  }

  .hero h1 {
    font-size:clamp(64px,20vw,100px)
  }

  .hero-actions {
    align-items:flex-start;
    flex-direction:column
  }

  .proof-strip {
    display:none
  }

  .services-section,.faq-section,.areas-section,.page-hero,.fit-section,.eeat-section {
    padding-top:78px;
    padding-bottom:78px
  }

  .section-intro h2,.areas-section h2,.faq-section h2,.fit-section h2,.eeat-section h2 {
    font-size:50px
  }

  .service-showcase {
    grid-template-columns:1fr
  }

  .service-tile:nth-child(even) {
    transform:none
  }

  .service-tile:nth-child(even):hover {
    transform:translateY(-5px)
  }

  .process-section {
    margin-top:0
  }

  .process-heading h2 {
    font-size:55px
  }

  .area-grid {
    grid-template-columns:1fr
  }

  .area-grid .area-feature {
    grid-column:auto
  }

  .quote-section h2 {
    font-size:64px
  }

  .footer-main {
    grid-template-columns:1fr
  }

  .footer-main>div:first-child {
    grid-column:auto
  }

  .service-card-copy {
    min-height:320px;
    padding:25px
  }

  .service-card-copy h2 {
    font-size:42px
  }

  .services-hero {
    min-height:540px
  }

  .detail-hero h1 {
    font-size:clamp(56px,16vw,78px)
  }

  .detail-visual {
    min-height:470px
  }

  .detail-content h2 {
    font-size:42px
  }

  .signs-section li {
    font-size:16px
  }

  .page-hero-content h1 {
    font-size:clamp(60px,17vw,88px)
  }

  .story-stat {
    min-height:470px
  }

  .story-stat>div {
    display:block
  }

  .story-stat span {
    font-size:62px
  }

  .story-stat p {
    margin-top:8px
  }

  .values-section>div {
    grid-template-columns:1fr
  }

  .values-section article,.values-section article+article {
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:25px 0;
    min-height:220px
  }

  .featured-post {
    min-height:660px
  }

  .featured-content h2 {
    font-size:54px
  }

  .posts-grid {
    padding-left:20px;
    padding-right:20px
  }

  .posts-grid article {
    min-height:560px
  }

  .post-copy h2 {
    font-size:32px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .button,.service-tile,.service-tile img,.service-card-image img {
    transition:none
  }

}

@media(max-width:960px) {
  .seo-copy-section,.service-process-section,.preparation-section,.local-service-section,.content-standard {
    grid-template-columns:1fr
  }

  .benefit-grid {
    grid-template-columns:1fr
  }

  .benefit-grid article,.benefit-grid article+article {
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:26px 0;
    min-height:210px
  }

  .benefit-grid h3 {
    margin-top:55px
  }

  .related-grid {
    grid-template-columns:1fr 1fr
  }

  .content-standard {
    gap:25px
  }

}

@media(max-width:600px) {
  .breadcrumb {
    margin-bottom:42px
  }

  .seo-copy-body p {
    font-size:16px
  }

  .section-title-row {
    display:block
  }

  .benefits-section,.seo-copy-section,.service-process-section,.preparation-section,.local-service-section,.related-services-section {
    padding-top:75px;
    padding-bottom:75px
  }

  .process-side h2,.local-service-section h2 {
    font-size:48px
  }

  .preparation-section h2 {
    font-size:55px
  }

  .related-heading {
    display:block
  }

  .related-heading h2 {
    font-size:52px
  }

  .related-grid {
    grid-template-columns:1fr
  }

  .content-standard {
    padding-top:45px;
    padding-bottom:45px
  }

  .location-tags span {
    flex:1 1 auto;
    text-align:center
  }

}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,21,19,.96);
  backdrop-filter:blur(14px)
}

.site-header nav>a,.nav-services>summary {
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em
}

.site-header nav>a:not(.nav-cta):hover,.nav-services>summary:hover {
  color:var(--orange)
}

.nav-services {
  position:relative
}

.nav-services>summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px
}

.nav-services>summary::-webkit-details-marker {
  display:none
}

.nav-services>summary span {
  color:var(--orange);
  transition:transform .2s
}

.nav-services[open]>summary span {
  transform:rotate(180deg)
}

.nav-services>div {
  position:absolute;
  top:34px;
  left:-24px;
  width:310px;
  background:var(--paper);
  color:var(--night);
  padding:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column
}

.nav-services>div a {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  padding:13px 12px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0
}

.nav-services>div a:hover {
  background:#ded9cd
}

.nav-services>div a span {
  color:var(--orange);
  font-size:9px
}

.nav-services>div .nav-all {
  display:block;
  background:var(--orange);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px
}

.mobile-menu .mobile-service {
  font-size:12px;
  padding-left:14px;
  border-left:2px solid rgba(10,21,19,.28)
}

.mobile-menu .mobile-quote {
  background:var(--night);
  color:#fff;
  padding:14px
}

.footer-email {
  margin-top:8px;
  color:var(--orange)!important;
  font-weight:800
}

.contact-hero {
  position:relative;
  min-height:670px;
  background:var(--night);
  color:#fff;
  display:flex;
  align-items:flex-end;
  overflow:hidden
}

.contact-hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.contact-hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,13,12,.93),rgba(5,13,12,.3)),linear-gradient(0deg,rgba(5,13,12,.72),transparent)
}

.contact-hero>div:last-child {
  position:relative;
  z-index:2;
  padding:0 var(--pad) clamp(75px,8vw,120px);
  max-width:1120px
}

.contact-hero h1 {
  font-size:clamp(65px,8.5vw,132px);
  line-height:.82;
  letter-spacing:-.08em;
  margin:28px 0 36px
}

.contact-hero>div:last-child>p:last-child {
  max-width:680px;
  font-size:19px;
  color:rgba(255,255,255,.7)
}

.contact-layout {
  padding:clamp(80px,9vw,135px) var(--pad);
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:9vw
}

.contact-layout aside h2 {
  font-size:clamp(42px,4.5vw,68px);
  line-height:.96;
  letter-spacing:-.06em;
  margin:24px 0 42px
}

.contact-layout aside ul {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line)
}

.contact-layout aside li {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-weight:700
}

.contact-layout aside li span {
  display:inline-block;
  width:42px;
  font-size:9px;
  color:var(--orange)
}

.direct-contact {
  margin-top:42px;
  padding:26px;
  background:var(--forest);
  color:#fff
}

.direct-contact p {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--orange)
}

.direct-contact>a {
  font-size:18px;
  font-weight:800;
  word-break:break-word
}

.direct-contact small {
  display:block;
  margin-top:22px;
  line-height:1.6;
  color:rgba(255,255,255,.58)
}

.enquiry-form {
  background:#fff;
  padding:clamp(25px,4vw,55px);
  box-shadow:0 22px 70px rgba(10,21,19,.08)
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.enquiry-form label {
  display:block
}

.enquiry-form label>span {
  display:block;
  margin-bottom:9px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800
}

.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
  width:100%;
  border:0;
  border-bottom:1px solid rgba(10,21,19,.32);
  background:#f5f2ea;
  color:var(--night);
  padding:15px 14px;
  font:inherit;
  border-radius:0;
  outline:none
}

.enquiry-form textarea {
  resize:vertical
}

.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus {
  border-color:var(--orange);
  box-shadow:inset 0 -2px 0 var(--orange)
}

.form-full {
  margin-top:26px
}

.form-submit {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:28px
}

.form-submit button {
  border:0;
  background:var(--orange);
  color:var(--night);
  padding:17px 20px;
  min-width:240px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-weight:800;
  cursor:pointer
}

.form-submit button:hover {
  background:#dc622d
}

.form-submit p {
  font-size:11px;
  max-width:280px;
  color:rgba(10,21,19,.56);
  margin:0
}

.form-message {
  margin:22px 0 0;
  padding:15px;
  border-left:3px solid var(--orange);
  background:#f5f2ea;
  font-size:13px
}

.contact-safety {
  background:var(--night);
  color:#fff;
  padding:clamp(75px,8vw,125px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw
}

.contact-safety h2 {
  font-size:clamp(50px,6vw,90px);
  line-height:.9;
  letter-spacing:-.07em;
  margin:25px 0
}

.contact-safety>div:last-child {
  align-self:end;
  max-width:620px
}

.contact-safety>div:last-child p {
  font-size:18px;
  color:rgba(255,255,255,.63)
}

.contact-safety a {
  display:inline-block;
  margin-top:20px;
  color:var(--orange);
  font-weight:800
}

@media(max-width:960px) {
  .site-header nav {
    display:none
  }

  .mobile-menu {
    display:block
  }

  .mobile-menu div {
    max-height:calc(100svh - 105px);
    overflow-y:auto;
    width:min(320px,calc(100vw - 40px));
    gap:14px
  }

  .contact-layout,.contact-safety {
    grid-template-columns:1fr
  }

  .contact-layout {
    gap:55px
  }

}

/* Controlled navigation buttons keep menus in sync after client-side routing. */
.nav-services>button {
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px
}

.nav-services>button:hover {
  color:var(--orange)
}

.nav-services>button span {
  color:var(--orange);
  transition:transform .2s
}

.nav-services.open>button span {
  transform:rotate(180deg)
}

.mobile-menu>button {
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
  padding:10px 14px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  cursor:pointer
}

@media(max-width:600px) {
  .contact-hero {
    min-height:650px
  }

  .contact-hero h1 {
    font-size:clamp(60px,17vw,84px)
  }

  .contact-layout {
    padding-top:70px;
    padding-bottom:70px
  }

  .form-grid {
    grid-template-columns:1fr
  }

  .enquiry-form {
    padding:25px 20px
  }

  .form-submit {
    align-items:stretch;
    flex-direction:column
  }

  .form-submit button {
    width:100%
  }

  .contact-safety h2 {
    font-size:55px
  }

}

/* Responsive and navigation polish for client handoff. */
.site-header nav a[aria-current="page"],.nav-services>button.active {
  color:var(--orange)
}

.nav-services>div a[aria-current="page"] {
  background:#ded9cd
}

.mobile-menu div a[aria-current="page"] {
  text-decoration:underline;
  text-underline-offset:5px
}

.site-header a:focus-visible,.site-header button:focus-visible,.button:focus-visible,.text-link:focus-visible,.post-copy a:focus-visible,.footer-main a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:4px
}

.mobile-menu div a {
  min-height:44px;
  display:flex;
  align-items:center
}

.button,.nav-cta,.mobile-menu>button {
  min-height:44px
}

.brand>span:last-child {
  min-width:0
}

@media(max-width:960px) {
  .hero-photo {
    object-position:72% center
  }

  .image-page-hero>img,.contact-hero>img,.featured-post>img {
    object-position:center
  }

  .detail-visual>img,.story-stat>img {
    object-position:center
  }

  .posts-grid article>img,.service-card-image img,.service-tile-image img,.related-grid img {
    width:100%;
    height:100%;
    object-fit:cover
  }

  .quote-section,.detail-hero,.detail-content,.story-section,.contact-layout,.contact-safety {
    min-width:0
  }

  .mobile-menu div {
    box-shadow:0 22px 50px rgba(0,0,0,.3)
  }

}

@media(max-width:600px) {
  .hero,.image-page-hero {
    min-height:max(650px,calc(100svh - 74px))
  }

  .hero-photo {
    object-position:78% center
  }

  .hero-shade {
    background:linear-gradient(90deg,rgba(5,13,12,.92),rgba(5,13,12,.62)),linear-gradient(0deg,rgba(5,13,12,.78),transparent 55%)
  }

  .hero-copy,.page-hero-content,.contact-hero>div:last-child {
    padding-bottom:64px
  }

  .button {
    width:100%;
    min-width:0
  }

  .hero-actions {
    width:100%;
    max-width:360px
  }

  .service-card-image {
    aspect-ratio:4/3
  }

  .detail-visual {
    min-height:420px
  }

  .featured-post {
    min-height:620px
  }

  .posts-grid article {
    grid-template-rows:220px 1fr
  }

  .footer-email {
    overflow-wrap:anywhere
  }

  .area-grid article {
    min-height:230px
  }

  .contact-safety h2,.process-heading h2,.preparation-section h2,.related-heading h2 {
    font-size:clamp(44px,14vw,55px)
  }

}

@media(max-width:380px) {
  :root {
    --pad:18px
  }

  .site-header {
    padding-left:16px;
    padding-right:16px
  }

  .brand {
    gap:9px
  }

  .brand small {
    display:none
  }

  .hero h1 {
    font-size:58px
  }

  .page-hero-content h1,.contact-hero h1,.detail-hero h1 {
    font-size:54px
  }

  .section-intro h2,.areas-section h2,.faq-section h2,.fit-section h2,.eeat-section h2 {
    font-size:44px
  }

  .mobile-menu div {
    width:calc(100vw - 32px);
    right:0
  }

  .form-submit button {
    min-width:0
  }

}

.faq-list summary span {
  flex:0 0 24px;
  width:24px;
  text-align:center
}

.nav-services.open:after {
  content:"";
  position:absolute;
  top:100%;
  left:-24px;
  width:310px;
  height:18px
}

/* Keep the longer business name and email readable on narrow screens. */
.site-header {
  gap:20px
}

.brand {
  min-width:0;
  line-height:1.12
}

.brand-mark {
  flex-shrink:0
}

.footer-main>div {
  min-width:0
}

.footer-email {
  overflow-wrap:anywhere
}

.footer-phone {
  font-size:20px!important;
  font-weight:800;
  color:var(--orange)!important
}

.quote-phone {
  display:block;
  width:fit-content;
  margin-top:20px;
  color:var(--orange);
  font-weight:700
}

.direct-contact>a {
  display:block;
  margin-top:12px;
  overflow-wrap:anywhere
}

@media(max-width:960px) {
  .site-header .brand {
    max-width:calc(100% - 88px);
    font-size:18px
  }

  .site-header .brand>span:last-child {
    max-width:205px
  }

  .mobile-menu {
    flex-shrink:0
  }

}

@media(max-width:380px) {
  .site-header {
    gap:12px
  }

  .site-header .brand {
    font-size:16px
  }

  .site-header .brand>span:last-child {
    max-width:145px
  }

  .site-header .brand-mark {
    width:34px;
    height:38px
  }

  .footer-main .brand {
    font-size:18px
  }

}

/* SEO landing-page and approved logo refinements. */
.brand.brand-image {
  display:inline-flex;
  flex:0 1 auto;
  gap:0;
  max-width:100%;
  background:transparent;
  line-height:0
}

.brand-image .brand-logo {
  display:block;
  width:208px;
  max-width:100%;
  height:auto;
  aspect-ratio:8/3;
  object-fit:contain
}

.site-header .brand-image {
  width:208px;
  max-width:calc(100% - 88px)
}

.footer-main .brand-image {
  width:256px;
  max-width:100%
}

.footer-main .brand-image .brand-logo {
  width:100%
}

.hero-copy {
  max-width:1180px
}

.hero h1 {
  font-size:clamp(58px,7.6vw,120px);
  line-height:.84;
  letter-spacing:-.075em;
  margin-bottom:20px
}

.hero-tagline {
  margin:0 0 18px;
  color:var(--orange);
  font-family:Georgia,serif;
  font-size:clamp(23px,2.4vw,38px);
  font-style:italic
}

.hero .lead {
  max-width:760px
}

.quote-actions {
  display:flex;
  align-items:center;
  gap:22px;
  margin:25px 0 30px;
  flex-wrap:wrap
}

.quote-copy .quote-actions .button {
  margin:0
}

.quote-actions .quote-phone {
  display:inline-block;
  width:auto;
  margin:0;
  color:var(--night);
  font-size:18px;
  text-underline-offset:4px
}

.services-hero>.text-link {
  color:var(--orange);
  display:inline-block;
  margin-top:18px;
  width:fit-content
}

.local-septic-hero .detail-visual>img {
  object-position:center
}

.local-septic-hero .breadcrumb {
  margin-bottom:48px
}

@media(max-width:600px) {
  .site-header .brand-image {
    width:176px
  }

  .site-header .brand-image .brand-logo {
    width:100%
  }

  .hero h1 {
    font-size:clamp(46px,13vw,68px);
    line-height:.9
  }

  .hero-tagline {
    font-size:24px
  }

  .quote-actions {
    align-items:stretch;
    flex-direction:column
  }

  .quote-actions .quote-phone {
    padding:6px 0
  }

  .local-septic-hero .detail-visual {
    min-height:400px
  }

}

@media(max-width:380px) {
  .site-header .brand-image {
    width:160px
  }

  .hero h1 {
    font-size:44px
  }

}

/* Long-form guides and trust pages. */
.guide-hero {
  position:relative;
  min-height:720px;
  background:var(--night);
  color:#fff;
  display:flex;
  align-items:flex-end;
  overflow:hidden
}

.guide-hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.guide-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,13,12,.94),rgba(5,13,12,.35)),linear-gradient(0deg,rgba(5,13,12,.82),transparent 55%)
}

.guide-hero>div:last-child {
  position:relative;
  z-index:2;
  padding:80px var(--pad);
  max-width:1120px
}

.guide-hero h1 {
  font-size:clamp(58px,7.5vw,112px);
  line-height:.87;
  letter-spacing:-.075em;
  margin:28px 0
}

.guide-hero>div:last-child>p:last-child {
  font-size:20px;
  max-width:760px;
  color:rgba(255,255,255,.74)
}

.guide-layout {
  padding:clamp(75px,9vw,135px) var(--pad);
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:9vw;
  align-items:start
}

.guide-layout aside {
  position:sticky;
  top:125px
}

.guide-layout aside ul {
  list-style:none;
  padding:0;
  margin:25px 0 32px;
  border-top:1px solid var(--line)
}

.guide-layout aside li {
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:700
}

.guide-layout aside li:before {
  content:'✓';
  color:var(--orange);
  margin-right:12px
}

.guide-copy {
  max-width:820px
}

.guide-copy section {
  padding-bottom:45px;
  margin-bottom:45px;
  border-bottom:1px solid var(--line)
}

.guide-copy h2 {
  font-size:clamp(38px,4vw,58px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0 0 25px
}

.guide-copy p {
  font-size:18px;
  color:rgba(10,21,19,.72)
}

.guide-note {
  background:#ddd9cd;
  padding:28px;
  border-left:4px solid var(--orange)
}

.guide-note strong {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em
}

.guide-note p {
  font-size:14px;
  margin:12px 0 0
}

.legal-hero {
  padding:clamp(90px,11vw,165px) var(--pad);
  background:var(--night);
  color:#fff
}

.legal-hero h1 {
  font-size:clamp(60px,8vw,120px);
  line-height:.88;
  letter-spacing:-.075em;
  margin:28px 0
}

.legal-hero>p:last-child {
  color:rgba(255,255,255,.55)
}

.legal-copy {
  padding:clamp(70px,8vw,120px) var(--pad);
  max-width:1000px
}

.legal-copy h2 {
  font-size:clamp(30px,3vw,44px);
  letter-spacing:-.04em;
  margin:48px 0 16px
}

.legal-copy p {
  font-size:17px;
  color:rgba(10,21,19,.72)
}

.legal-copy a {
  font-weight:800;
  text-underline-offset:4px
}

@media(max-width:960px) {
  .guide-layout {
    grid-template-columns:1fr
  }

  .guide-layout aside {
    position:static
  }

  .guide-layout aside .button {
    max-width:360px
  }

}

@media(max-width:600px) {
  .guide-hero {
    min-height:640px
  }

  .guide-hero>div:last-child {
    padding:60px var(--pad)
  }

  .guide-hero h1 {
    font-size:clamp(46px,13vw,66px)
  }

  .guide-layout {
    padding-top:65px;
    padding-bottom:65px
  }

  .guide-copy p {
    font-size:16px
  }

  .legal-hero h1 {
    font-size:56px
  }

}

/* Native details menus remain operable without JavaScript. */
.nav-services:not([open])>div,.mobile-menu:not([open])>div {
  display:none
}

.nav-services[open]::after {
  content:"";
  position:absolute;
  top:100%;
  left:-24px;
  width:310px;
  height:18px
}

.nav-services>summary.active {
  color:var(--orange)
}

.nav-services summary,.mobile-menu summary {
  min-height:44px;
  display:flex;
  align-items:center
}

.nav-services>div {
  top:100%;
  z-index:2
}

.nav-services>summary:focus-visible,.mobile-menu>summary:focus-visible,a:focus-visible,button:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:4px
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  transform:translateY(-200%);
  z-index:100;
  background:var(--orange);
  padding:12px;
  color:var(--night)
}

.skip-link:focus {
  transform:none
}

[id] {
  scroll-margin-top:100px
}

.hero-copy {
  padding-top:64px
}

.image-page-hero,.contact-hero {
  padding-top:64px
}

.site-header .nav-cta[aria-current="page"] {
  color:var(--night);
  text-decoration:underline
}

.enquiry-form input,.enquiry-form textarea,.enquiry-form select {
  min-width:0;
  font-size:16px
}

.form-grid>* {
  min-width:0
}

.form-submit button {
  min-width:0
}

.site-header .brand-mark {
  flex-shrink:0
}

.faq-list summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px
}

.form-submit button:disabled {
  opacity:.6;
  cursor:not-allowed
}

@media(max-width:960px) {
  .areas-section>div:first-child {
    display:block
  }

  .mobile-menu summary {
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.4)
  }

  .mobile-menu summary::-webkit-details-marker {
    display:none
  }

  .mobile-menu>div {
    top:100%;
    max-height:calc(100svh - 100px)
  }

}

@media(max-width:380px) {
  .detail-hero h1 {
    font-size:clamp(38px,12vw,54px)
  }

  .page-hero h1 {
    font-size:clamp(40px,13vw,54px)
  }

}

@media(prefers-reduced-motion:reduce) {
  *,::before,::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }

}