/* East Coast Drilling. Mobile-first: base styles are for phones,
   min-width queries add the tablet (800px) and desktop (1000px) layouts. */

@font-face { font-family: Kanit; font-weight: 200; font-display: swap; src: url(/assets/fonts/kanit-200.woff2) format("woff2"); }
@font-face { font-family: Kanit; font-weight: 400; font-display: swap; src: url(/assets/fonts/kanit-400.woff2) format("woff2"); }
@font-face { font-family: Kanit; font-weight: 800; font-display: swap; src: url(/assets/fonts/kanit-800.woff2) format("woff2"); }
@font-face { font-family: Kanit; font-weight: 800; font-style: italic; font-display: swap; src: url(/assets/fonts/kanit-800i.woff2) format("woff2"); }

:root {
  --navy: #19206d;
  --navy-mid: #192a78;
  --navy-deep: #000039;
  --indigo: #212153;
  --sky: #40c8f4;
  --grey: #eaebec;
  --white: #fff;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--navy);
  font: 400 17px/1.5 Kanit, system-ui, sans-serif;
  letter-spacing: .02em;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; transition: color .2s linear; }
/* Only on devices with a real pointer, so a tapped link does not stay blue on phones. */
@media (hover: hover) {
  a:hover { color: var(--sky); }
}
a:active { color: var(--sky); }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
p + p { margin-top: 1em; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--navy); color: var(--white);
}
.skip-link:focus { top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 8px 28px;
  border: 0; border-radius: 3px;
  background: var(--sky); color: var(--navy);
  font: 400 15px/1.2 Kanit, sans-serif; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s linear;
}
.btn:hover, .btn:active { background: #3e91ef; color: var(--navy); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  padding: 8px 16px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 57, .15);
}
.site-logo img { width: 220px; }

.nav-toggle {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-right: -8px; padding: 0;
  border: 0; background: none; color: var(--navy); cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none;
  background: var(--white);
  box-shadow: 0 6px 12px rgba(0, 0, 57, .2);
}
.site-nav.is-open { display: block; }
/* Without JavaScript the menu cannot open, so it is always shown. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-header { flex-wrap: wrap; position: static; }
html:not(.js) .site-nav { display: block; position: static; width: 100%; box-shadow: none; }

.site-nav a {
  display: flex; align-items: center;
  min-height: 52px; padding: 0 20px;
  border-top: 1px solid var(--grey);
  text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--sky); }

/* ---------- Home hero: layers move at different speeds on scroll ---------- */
.hero {
  position: relative;
  height: min(868px, 70vw);
  overflow: hidden;
  background: #7f93a8;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.hero__stage {
  position: relative;
  width: min(1240px, 100%);
  aspect-ratio: 1240 / 868;
  margin: 0 auto;
  container-type: inline-size;
}
.hero__title { margin: 0; font-weight: 800; font-style: italic; }
.hero__line, .hero__drop, .hero__arrow { position: absolute; }
.hero__line {
  font-size: 5.806cqw; line-height: 1;
  white-space: nowrap;
}
.hero__line--box {
  padding: .07em .28em;
  background: var(--navy); color: var(--white);
  line-height: 1.11;
}
.hero__arrow {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 8px;
  translate: -50% 0;
}
.hero__arrow img { width: 100%; max-width: 36px; }

/* ---------- Inner page banners ---------- */
.banner {
  position: relative;
  display: grid; place-items: center;
  min-height: 180px;
  aspect-ratio: 1355 / 452;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
}
.banner--tall { aspect-ratio: 16 / 9; }
.banner__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.banner h1 {
  position: relative;
  padding: .12em .3em;
  background: var(--navy); color: var(--white);
  font-size: clamp(24px, 5.3cqw, 72px); font-weight: 800; font-style: italic;
  line-height: 1.1; letter-spacing: .04em; text-align: center;
}
.banner__arrow { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; padding: 8px; }
.banner__arrow img { width: 36px; }

/* ---------- Motion: only when JavaScript runs and the visitor allows it ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes parallax {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(var(--speed) * 2000px), 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .fade-load { animation: fade-in .8s cubic-bezier(.22, .61, .36, 1) .1s both; will-change: opacity; }
  .fade-load--slow { animation-duration: 1s; }

  /* Added by site.js only to items still below the screen, so nothing already
     on screen ever flickers. Opacity runs on the graphics card, not the page. */
  .reveal-pending { opacity: 0; will-change: opacity; }
  .reveal-in { opacity: 1; will-change: opacity; transition: opacity .8s cubic-bezier(.22, .61, .36, 1); }

  [data-parallax] { will-change: transform; }

  /* The browser ties these layers directly to the scroll position, so they
     cannot lag behind it. Browsers without this feature use the fallback in site.js. */
  @supports (animation-timeline: scroll()) {
    [data-parallax] {
      animation: parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 2000px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Home intro ---------- */
.intro {
  padding: 64px 20px 160px;
  background: var(--grey);
  text-align: center;
}
.intro h2 {
  max-width: 550px; margin: 0 auto 32px;
  font-size: clamp(22px, 5vw, 25px); font-weight: 400; line-height: 1.5;
}
.intro p { max-width: 1008px; margin-inline: auto; }

/* ---------- Home services: phones get a simple stacked list ---------- */
.services { background: var(--grey); }
.bore {
  padding-bottom: 72px;
  background: var(--navy-mid) url(/assets/img/East-Coast-Drilling-MOBILE3.jpg) center top / cover no-repeat;
  color: var(--white);
  text-align: center;
}
.bore + .bore { margin-top: 120px; }
.bore__badge {
  display: block;
  width: 200px; margin: 0 auto;
  translate: 0 -100px;
  margin-bottom: -60px;
}
.bore__badge img { width: 100%; }
.bore__top { width: 200px; margin: 0 auto; }
.bore__shaft { display: none; }
.bore__list { display: flex; flex-direction: column; align-items: center; }
.branch { display: flex; flex-direction: column; align-items: center; }
.branch::before { content: ""; width: 1px; height: 28px; background: var(--white); }
.branch a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; max-width: 280px; padding: 4px 12px;
  font-size: 16px; line-height: 1.3; letter-spacing: .06em;
  text-decoration: none; text-transform: uppercase;
}
.bore__bit { width: 40px; margin: 8px auto 28px; }
.bore__bit-line { display: block; width: 1px; height: 28px; margin: 0 auto; background: var(--white); }

/* ---------- Testimonial ---------- */
.reference { padding: 72px 16px; background: var(--indigo); }
.reference__panel {
  position: relative;
  max-width: 800px; margin: 0 auto;
  padding: 72px 20px 40px;
  background: var(--navy-deep); color: var(--white);
  text-align: center;
}
.reference__emblem { position: absolute; left: 50%; top: -50px; translate: -50% 0; width: 85px; }
.reference blockquote { margin: 0; font-weight: 200; line-height: 1.8; }
.reference cite { display: block; margin-top: 24px; font-style: normal; font-weight: 800; color: #e1e3e5; letter-spacing: .08em; }
.reference__photos {
  display: grid; gap: 16px;
  max-width: 800px; margin: 24px auto 0;
}
.reference__photos img { width: 100%; }

/* ---------- Trusted by ---------- */
.trusted { padding: 40px 16px 48px; text-align: center; }
.trusted__badge { width: 200px; margin: 0 auto 24px; }
.trusted__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; }
.trusted__logos img { max-height: 85px; width: auto; }

/* ---------- Contact band with map ---------- */
.contact-band { position: relative; display: grid; background: var(--navy-mid); color: var(--white); }
.contact-band__text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 112px 16px 48px;
  text-align: center; font-weight: 200;
}
.contact-band__label { font-weight: 200; letter-spacing: .06em; }
.contact-band__value { margin-bottom: 16px; }
.contact-band__value a { display: inline-block; padding: 6px; overflow-wrap: anywhere; text-decoration: none; }
.contact-band .btn { margin-top: 8px; }
.contact-band__badge {
  position: absolute; z-index: 2; left: 50%; top: 0; translate: -50% -50%;
  width: 172px;
}
.contact-band__map { position: relative; }

.map { position: relative; width: 100%; height: 340px; background: var(--grey); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__link { display: block; padding: 12px 16px; text-align: center; font-size: 15px; }
.contact-band .map__link { background: var(--navy-mid); }

/* ---------- Footer ---------- */
.site-footer {
  display: grid; justify-items: center; gap: 20px;
  padding: 32px 16px;
  background: var(--navy-deep); color: var(--white);
}
.site-footer__emblem img { width: 40px; }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.site-footer ul a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; }
.site-footer ul a[aria-current="page"] { color: var(--sky); }
.site-footer__social { display: grid; place-items: center; width: 44px; height: 44px; color: #8fa3c7; transition: opacity .2s linear; }
@media (hover: hover) {
  .site-footer__social:hover { color: #8fa3c7; opacity: .8; }
  .to-top:hover { color: var(--white); }
}
.site-footer__social svg { width: 20px; height: 20px; }

.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 4px; background: #333; color: var(--white);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Service pages ---------- */
.page-intro { padding: 56px 20px; text-align: center; }
.page-intro p { max-width: 1000px; margin-inline: auto; }
.page-intro__lead { max-width: 800px !important; margin-bottom: 32px !important; font-weight: 800; }

.svc { position: relative; margin-top: 56px; scroll-margin-top: calc(var(--header-h) + 60px); text-align: center; }
.svc__emblem { position: absolute; z-index: 2; left: 50%; top: -46px; translate: -50% 0; width: 72px; }
.svc__inner { display: grid; gap: 28px; padding: 64px 20px 56px; }
.svc h2 {
  margin-bottom: 20px;
  font-size: clamp(25px, 6vw, 32px); font-weight: 800; font-style: italic;
  line-height: 1.2; overflow-wrap: break-word;
}
.svc__body p + p { margin-top: 1em; }
.svc__body ul { display: inline-block; margin-top: 1em; padding-left: 1.2em; list-style: disc; text-align: left; }
.svc__media { display: grid; justify-items: center; gap: 16px; }
.svc--light { padding: 0 14px; background: url(/assets/img/drilling-services-background1.jpg) center / cover no-repeat; }
.svc--light .svc__inner { background: var(--white); }
.svc--dark { background: var(--navy-mid) url(/assets/img/drilling-services-background2.jpg) center top / cover no-repeat; color: var(--white); }
.svc--dark .svc__emblem { top: 16px !important; }
.svc--dark .svc__inner { padding-top: 112px; }
.svc__body { font-weight: 200; }
.svc__body a { font-weight: 400; }
.page-intro p { font-weight: 200; }
.page-intro p.page-intro__lead { font-weight: 800; }

/* ---------- History timeline ---------- */
.timeline {
  padding: 40px 0 64px;
  background: var(--navy-mid) url(/assets/img/history-mobile-background.jpg) center top / cover no-repeat;
  color: var(--white);
}
.timeline__top { width: 200px; margin: 0 auto; }
.timeline__shaft { display: none; }
.era { padding: 48px 20px 8px; text-align: center; font-weight: 200; }
.era h2 {
  font-size: 40px; font-weight: 800; font-style: italic; line-height: 1.3; letter-spacing: .03em;
}
.era__rule { position: relative; height: 1px; margin: 4px -20px 16px 44px; background: var(--white); }
.era__rule::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--white);
}
.era__photo, .slider { width: 100%; max-width: 560px; margin: 0 auto 16px; }
.era__bit { width: 40px; margin: 32px auto 0; }

.slider { position: relative; }
.slider__track { position: relative; aspect-ratio: 760 / 400; overflow: hidden; background: rgba(0, 0, 57, .35); }
.slider__track--square { aspect-ratio: 4 / 3; }
.slider__slide {
  position: absolute; inset: 0;
  z-index: 0; opacity: 0; visibility: hidden;
}
/* The outgoing photo stays solid underneath, so the background never shows through. */
.slider__slide.is-previous { z-index: 1; opacity: 1; visibility: visible; }
.slider__slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity .8s ease-in-out; }
html:not(.js) .slider__slide:first-child { opacity: 1; visibility: visible; }
.slider__slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.slider__dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.slider__dot {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.slider__dot::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0, 0, 57, .45); transition: background-color .2s;
}
.slider__dot[aria-current="true"]::before { background: var(--navy-deep); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
html:not(.js) .slider__dots { display: none; }

/* ---------- Contact page ---------- */
.contact-cards { display: grid; gap: 40px; padding: 56px 20px; text-align: center; }
.contact-card img { width: 110px; margin: 0 auto 8px; }
.contact-card h2 { margin-bottom: 4px; font-size: 18px; font-weight: 800; }
.contact-card p { font-weight: 200; }
.contact-card p + p { margin-top: 0; }
.contact-card a { display: inline-block; min-height: 44px; padding: 8px 6px; overflow-wrap: anywhere; text-decoration: none; }
.contact-card strong { font-weight: 800; }
.contact-map { padding: 0 0 8px; }
.contact-map .map { height: 400px; }

.enquiry { max-width: 600px; margin: 0 auto; padding: 48px 20px 64px; }
.enquiry h2 { margin-bottom: 24px; font-size: 25px; font-weight: 400; text-align: center; }
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 6px; font-size: 15px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.field input, .field textarea {
  display: block; width: 100%;
  min-height: 48px; padding: 10px 12px;
  border: 1px solid #8d93a8; border-radius: 3px;
  background: var(--white); color: var(--navy);
  font: 400 16px/1.4 Kanit, sans-serif; /* 16px stops iOS zooming on focus */
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: var(--navy); }
.field--invalid input, .field--invalid textarea { border-color: #b3261e; }
.field__error { display: none; margin-top: 6px; color: #b3261e; font-size: 15px; text-align: center; }
.field--invalid .field__error { display: block; }
.honeypot { display: none !important; }
.turnstile { display: flex; justify-content: center; margin-bottom: 16px; }
.turnstile:empty { display: none; }
/* The form needs JavaScript for its bot check, so without it only the phone and email show. */
html:not(.js) #enquiry-form { display: none; }
.enquiry noscript p { text-align: center; }
.enquiry__actions { text-align: center; }
.enquiry__actions .btn { min-width: 177px; }
.form-status { margin-top: 20px; padding: 0 12px; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-success, .form-status.is-error { padding: 14px 12px; border-radius: 3px; }
.form-status.is-success { background: #e4f6ea; color: #14532d; }
.form-status.is-error { background: #fdecea; color: #7a1a13; }

/* 404 */
.not-found { padding: 96px 20px; text-align: center; }
.not-found h1 { margin-bottom: 16px; font-size: 32px; font-weight: 800; font-style: italic; }
.not-found .btn { margin-top: 24px; }

/* ==========================================================================
   Tablet and up: two-column layouts
   ========================================================================== */
@media (min-width: 800px) {
  body { font-size: 18px; }

  /* Home services: the sticky drill and pump travel down as you scroll,
     and each branch fades in as it comes into view. */
  .intro { padding: 100px 5% 200px; }
  .services {
    display: grid; grid-template-columns: 1fr 1fr;
    padding: 0 5% 64px;
    background: var(--navy-mid) url(/assets/img/services-section-background.jpg) center top / cover no-repeat;
  }
  .bore { padding: 0; background: none; }
  .bore + .bore { margin-top: 0; }
  .bore__badge { width: 300px; margin: -150px auto 0; translate: var(--badge-shift, 0) 0; position: relative; z-index: 2; }
  .bore:nth-child(1) { --badge-shift: 11%; }
  .bore:nth-child(2) { --badge-shift: -11%; }
  .bore__top { width: 208px; margin-top: 50px; }
  .bore__top--pump { width: 119px; }
  .bore__run { display: grid; }
  .bore__run > * { grid-area: 1 / 1; }
  .bore__shaft {
    display: block; justify-self: center; align-self: start;
    position: sticky; top: 100px;
  }
  .bore__list { align-items: stretch; padding-top: 255px; }
  .branch {
    position: relative; display: block;
    width: 50%; height: 137px;
    border-top: 1px solid var(--white);
    text-align: left;
  }
  .branch:nth-child(odd) { align-self: flex-start; }
  .branch:nth-child(even) { align-self: flex-end; text-align: right; }
  .branch::before {
    position: absolute; top: -4px; left: 0;
    width: 7px; height: 7px; border-radius: 50%;
  }
  .branch:nth-child(even)::before { left: auto; right: 0; }
  .branch a {
    display: inline-flex; justify-content: flex-start;
    max-width: 100%; min-height: 40px; margin-top: 6px; padding: 2px 8px;
    font-size: clamp(13px, 1.25vw, 18px);
    text-align: inherit;
  }
  .branch:nth-child(even) a { justify-content: flex-end; }
  .bore__bit, .bore__bit-line { display: none; }
  .bore__cta { margin-top: 56px; }

  .reference { padding: 120px 16px; }
  .reference__panel { padding: 72px 32px 48px; }
  .reference__photos { grid-template-columns: 1fr 1fr; gap: 20px; }
  .trusted__badge { width: 300px; }
  .trusted__logos { gap: 40px 13%; }

  .contact-band { grid-template-columns: 1fr 1fr; min-height: 450px; }
  .contact-band__text { padding: 48px 110px 48px 24px; }
  .contact-band__badge { width: 200px; top: 50%; left: 50%; }
  .contact-band__map, .contact-band .map { height: 100%; min-height: 450px; }
  .contact-band__map { display: flex; flex-direction: column; }
  .contact-band .map { flex: 1; }

  .site-footer {
    grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 20px 6%;
    justify-items: stretch;
  }
  .site-footer__emblem { justify-self: start; }
  .site-footer__social { justify-self: end; }

  .page-intro { padding: 100px 10% 80px; }
  .svc__inner {
    grid-template-columns: 2fr 1fr; align-items: center; gap: 40px;
    max-width: 1100px; margin: 0 auto;
    padding: 96px 40px 80px;
  }
  .svc--media-first .svc__inner { grid-template-columns: 1fr 2fr; }
  .svc--media-first .svc__media { order: -1; }
  .svc--light { padding: 0 8%; }
  .svc__emblem { width: 85px; top: -54px; }

  .contact-cards { grid-template-columns: repeat(3, 1fr); padding: 80px 15% 70px; }
  .contact-map { padding: 0 5% 72px; }
  .contact-map .map { height: 600px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ==========================================================================
   History timeline: two-sided from 800px
   ========================================================================== */
@media (min-width: 800px) {
  .timeline {
    padding: 150px 0 120px;
    background-image: url(/assets/img/history-timeline-background.jpg);
  }
  .timeline__top { width: 250px; }
  .timeline__run { display: grid; }
  .timeline__run > * { grid-area: 1 / 1; }
  .timeline__shaft {
    display: block; justify-self: center; align-self: start;
    position: sticky; top: 100px;
  }
  .era {
    width: 50%; min-height: 680px;
    padding: 160px 0 0;
  }
  .era__inner { padding: 0 8%; }
  .era--right { margin-left: 50%; }
  .era__rule { margin: 4px 0 16px; }
  .era--right .era__rule::before { left: auto; right: 0; }
  .era__photo, .slider { max-width: 432px; }
  .era--center { width: 100%; max-width: 760px; margin: 0 auto; min-height: 0; padding-top: 96px; }
  .era--center .slider { max-width: 560px; }
  .era--center .era__rule { display: none; }
  .era__bit { display: none; }
}

/* ==========================================================================
   Desktop: full navigation, header overlays the hero and shrinks on scroll
   ========================================================================== */
@media (min-width: 1000px) {
  :root { --header-h: 65px; }
  .site-header {
    position: fixed; left: 0; right: 0; top: 0;
    height: 118px; min-height: 0; padding: 0 6.5%;
    background: none;
    box-shadow: none;
    pointer-events: none; /* the tall box must not block clicks once it looks shorter */
  }
  /* Only transform and opacity change here, which never forces the page to re-lay out. */
  .site-header::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 118px;
    background: var(--white); opacity: .81;
    transform-origin: top;
    will-change: transform, opacity;
    transition: transform .3s ease, opacity .3s ease;
  }
  .site-header.is-stuck::before { transform: scaleY(.551); opacity: 1; }
  .site-logo, .site-nav {
    pointer-events: auto;
    will-change: transform;
    transition: transform .3s ease;
  }
  .site-logo { transform-origin: left center; }
  .site-logo img { width: 280px; }
  .site-header.is-stuck .site-logo { transform: translateY(-26.5px) scale(.714); }
  .site-header.is-stuck .site-nav { transform: translateY(-26.5px); }
  html:not(.js) .site-header { flex-wrap: nowrap; position: fixed; }
  html:not(.js) .site-nav { width: auto; }
  .nav-toggle { display: none; }
  .site-nav { position: static; display: block; background: none; box-shadow: none; }
  .site-nav ul { display: flex; gap: clamp(16px, 2.6vw, 44px); }
  .site-nav a { min-height: 44px; padding: 0; border: 0; }
  .banner { padding-top: 7%; }
  .banner--tall { padding-top: 0; }
  .main--flush-top { padding-top: 0; }
  .plain-page { padding-top: 118px; }
}

@media (max-width: 799px) {
  .field-row { display: block; }
  .bore__top--pump { width: 120px; }
}