/* ==========================================================================
   Richard's Land Management
   Palette from the company logo: navy #122244, blue #3865A8, sage #BCDFD8
   Layout: warm paper, hairline frame, corner ticks, one sans throughout
   ========================================================================== */

:root {
  --ink:        #0E1725;
  --navy:       #111C2E;
  --blue:       #3865A8;
  --blue-lift:  #2F5793;
  --sage:       #BCDFD8;
  --sage-pale:  #E9F1EE;
  --bone:       #F4F1EA;
  --bone-2:     #EAE5DA;
  --paper:      #FFFFFF;
  --body:       #55606F;
  --muted:      #7A828E;

  --line:       rgba(17, 28, 46, 0.15);
  --hair:       rgba(17, 28, 46, 0.10);
  --hair-dark:  rgba(255, 255, 255, 0.12);
  --soft:       0 1px 2px rgba(14, 23, 37, .035), 0 10px 30px -20px rgba(14, 23, 37, .22);
  --soft-lift:  0 1px 2px rgba(14, 23, 37, .04), 0 22px 48px -26px rgba(14, 23, 37, .3);

  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --max: 1280px;
  --sec: clamp(3.25rem, 5.8vw, 6rem);
  --r:   16px;
  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
figure, blockquote, dl, dd { margin: 0; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--navy); color: var(--sage); }

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

.skip {
  position: absolute; left: 50%; top: 0; z-index: 999;
  transform: translate(-50%, -140%);
  background: var(--navy); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 8px 8px;
  font-size: .85rem; font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); }

/* ------------------------------------------------------- framed layout -- */

/* A hairline column runs the height of the page. Sections sit inside it,
   divided by rules, with a small tick where the lines cross. */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { position: relative; padding-block: var(--sec); }
.section--tight { padding-block: clamp(2.25rem, 3.6vw, 3.25rem); }
.section--flush { padding-block: 0; }
.section--paper { background: var(--paper); }
.section--sage  { background: var(--sage-pale); }
.section--ink {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  border-bottom-color: var(--hair-dark);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

/* --------------------------------------------------------- type helpers -- */

.label {
  display: inline-block;
  margin: 0 0 1.05rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.label::before { content: "[ "; }
.label::after  { content: " ]"; }
.section--ink .label { color: rgba(255,255,255,.55); }

.h-xl { font-size: clamp(2.15rem, 4.6vw, 3.55rem); letter-spacing: -.03em; }
.h-lg { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.026em; }

.lead {
  font-size: clamp(1rem, 1.25vw, 1.115rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 60ch;
}
.section--ink .lead { color: rgba(255,255,255,.68); }
.muted { color: var(--muted); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  --bg: var(--navy); --fg: #fff; --bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.55rem;
  border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--accent { --bg: var(--blue); --bd: var(--blue); }
.btn--accent:hover { --bg: var(--blue-lift); --bd: var(--blue-lift); }
.btn--light { --bg: var(--paper); --fg: var(--navy); --bd: var(--line); }
.btn--light:hover { --bd: var(--navy); }
.btn--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--line); }
.btn--ghost:hover { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.3); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

.txt-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600;
  color: var(--blue);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.txt-link:hover { border-bottom-color: currentColor; }
.txt-link svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------- header -- */

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(244, 241, 234, .88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.hdr__inner {
  /* three tracks with equal outer columns, so the nav is centred on the page
     rather than on whatever is left over beside the wordmark */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1.25rem;
  height: 76px;
}

.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name {
  font-size: .92rem; font-weight: 700; letter-spacing: -.012em;
  color: var(--navy); line-height: 1.15;
}

.nav { display: flex; align-items: center; justify-content: center; gap: 1.85rem; }
.nav__link {
  font-size: .885rem; font-weight: 500;
  color: var(--body);
  transition: color .25s var(--ease);
}
.nav__link:hover { color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 600; }

.hdr__actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; }
.btn--hdr { padding: .66rem 1.1rem; font-size: .83rem; }
.btn--hdr svg { width: 14px; height: 14px; }

.burger {
  display: none; position: relative;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; cursor: pointer;
}
.burger span {
  position: absolute; left: 50%; width: 16px; height: 1.6px;
  background: var(--navy); border-radius: 2px;
  transition: transform .35s var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%,  4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

.drawer {
  position: fixed; inset: 68px 0 0; z-index: 89;
  background: var(--bone);
  padding: 1.25rem var(--gut) 2.25rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  padding: .85rem 0;
  font-size: 1.4rem; font-weight: 600; color: var(--navy);
  letter-spacing: -.02em;
}
.drawer__foot { padding-top: 1.75rem; display: grid; gap: .6rem; }
.drawer__meta { margin-top: 1.25rem; font-size: .88rem; color: var(--muted); }
.drawer__meta a { color: var(--navy); font-weight: 600; }

/* ---------------------------------------------------------------- hero -- */

.hero { padding-block: clamp(2.75rem, 5.5vw, 5.5rem) 0; }

/* headline left, supporting copy and buttons right. Bottom aligned so the
   buttons finish on the headline's last line and the copy starts clearly
   below its first line rather than floating level with it. */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: end;
}
.hero h1 { max-width: 15.5ch; margin-bottom: -.12em; }  /* trim the descender gap */
.hero__aside { padding-bottom: .1em; }
.hero .label { margin-bottom: .7rem; }  /* tighter than a section kicker, it is sitting on the lead */
.hero .lead { margin-top: 0; max-width: 34ch; font-size: 1rem; }
.hero .btn-row { margin-top: 1.4rem; }
.hero__shot {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  border-radius: var(--r);
  overflow: hidden;
}
.hero__shot { position: relative; }
.hero__shot img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* a slow push from 1.06 back to 1 over 14 seconds, started on the video's
   first frame so the camera move and the footage begin together. On a phone
   there is no video, so this runs on the poster alone and is the only motion
   in the hero. One wrapper carries it rather than the poster and the video
   separately, which would let the two drift apart mid fade. */
.hero__zoom {
  transform: scale(1.06);
  transform-origin: center;
  backface-visibility: hidden;
}
/* the layer hint is only worth paying for while something is actually moving */
.hero__zoom.is-pushing {
  will-change: transform;
  animation: hero-push 14s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero__zoom.is-settled { will-change: auto; }
@keyframes hero-push { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__zoom { transform: none; }
  .hero__zoom.is-pushing { animation: none; }
}

/* the poster paints immediately and the video fades over it once it is running,
   so there is never a blank frame or a jump */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* interior page hero: centred, light, photo underneath */
.phero { text-align: center; padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(1.9rem, 3.2vw, 2.6rem); }
.phero h1 { margin-inline: auto; max-width: 19ch; }
.phero .lead { margin: 1.05rem auto 0; max-width: 56ch; }
.phero__shot {
  margin-top: clamp(2rem, 3.6vw, 3.25rem);
  border-radius: var(--r);
  overflow: hidden;
}
.phero__shot img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

.crumbs {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: 1rem;
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.crumbs a:hover { color: var(--navy); }

/* --------------------------------------------------------------- split -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: start;
}
.split--even  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the column with the tall portrait runs far longer than the text beside it,
   so centre the two rather than leaving a hole under the shorter one */
.split--balance { align-items: center; }
/* centring leaves the text sitting a touch high against the tall photograph,
   so the margin nudges it down (a centred grid item shifts by half its margin) */
.split--balance > :last-child { margin-top: clamp(2rem, 6vw, 6rem); }
.split--balance .figure--portrait img { aspect-ratio: 4 / 4.2; object-position: 50% 42%; }
.split--photo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }

.head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.head-row p { font-size: .95rem; max-width: 46ch; }
.head-row--nav { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

.figure {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--bone-2); box-shadow: var(--soft);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--portrait img { aspect-ratio: 4 / 5; }
.figure--land img { aspect-ratio: 4 / 3; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure figcaption {
  position: absolute; left: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  font-size: .76rem; font-weight: 600; color: var(--navy);
}

/* --------------------------------------------------------------- cards -- */

.grid { display: grid; gap: clamp(.8rem, 1.4vw, 1.2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--soft);
}
.section--paper .card { background: var(--bone); box-shadow: none; }
.card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.card p { font-size: .91rem; line-height: 1.6; color: var(--muted); }

/* FAQ answers ship open in the markup, so a crawler and anyone without JS
   gets the whole thing. main.js closes them below 640px, where eight open
   answers were adding three screens to the page. */
.faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary h3 { margin-bottom: 0; }
.faq__chev { width: 18px; height: 18px; flex: none; color: var(--blue); display: none; transition: transform .3s var(--ease); }
.faq > p { margin-top: .5rem; }
.faq[open] > summary { margin-bottom: 0; }

/* service card: photo, feature ticks, copy */
.svc {
  display: block;
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--soft);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.svc:hover { box-shadow: var(--soft-lift); transform: translateY(-3px); }

.svc__shot { position: relative; }
.svc__shot img { width: 100%; aspect-ratio: 4 / 2.9; object-fit: cover; object-position: 50% 38%; }
.svc__ticks {
  position: absolute; left: .7rem; bottom: .7rem;
  display: grid; gap: .3rem; justify-items: start;
}
.svc__tick {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .68rem .3rem .32rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  font-size: .73rem; font-weight: 600; color: var(--navy);
}
.svc__tick i {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center; flex: none;
}
.svc__tick svg { width: 9px; height: 9px; }

.svc__body { padding: clamp(1.05rem, 1.6vw, 1.3rem); }
.svc__body h3 {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 1.06rem; margin-bottom: .35rem;
}
.svc__body h3 svg { width: 15px; height: 15px; color: var(--blue); flex: none; transition: transform .3s var(--ease); }
.svc:hover .svc__body h3 svg { transform: translateX(3px); }
.svc__body p { font-size: .89rem; line-height: 1.55; color: var(--muted); }

/* ----------------------------------------------------------- checklist -- */

.checks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.checks li {
  display: grid; grid-template-columns: 17px 1fr; gap: .6rem;
  align-items: start;
  font-size: .93rem; line-height: 1.5;
}
.checks li svg { width: 17px; height: 17px; margin-top: .16em; color: var(--blue); flex: none; }
.section--ink .checks li svg { color: var(--sage); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }

/* ------------------------------------------------------------- feature -- */

.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
}
.feature--flip .figure { order: 2; }

/* ------------------------------------------------------------ carousel -- */

.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: clamp(.6rem, 1.1vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.carousel__track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 clamp(240px, 36%, 400px);
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bone-2);
}
.slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.carousel__nav { display: flex; gap: .5rem; }
.cbtn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--navy);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), opacity .25s var(--ease);
}
.cbtn svg { width: 16px; height: 16px; }
.cbtn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ------------------------------------------------------------- enquire -- */

.enquire {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.enquire__details { display: grid; gap: 1.4rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.enquire__details .k {
  font-size: .69rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .25rem;
}
.enquire__details .v { font-size: 1.04rem; color: var(--navy); font-weight: 500; line-height: 1.4; }
.enquire__details .v small { display: block; margin-top: .22rem; font-size: .85rem; font-weight: 400; color: var(--body); }
.enquire__details a:hover { color: var(--blue); }

/* ---------------------------------------------------------------- form -- */

/* The form sits on the bone section ground. It was loose fields floating
   straight on it, which is why it read as unfinished next to the service
   cards. Same white card, same radius, same shadow as those, so it belongs to
   the same set. */
.form-card {
  color: var(--body);
  background: var(--paper);
  border-radius: var(--r);
  padding: clamp(1.45rem, 2.4vw, 2.1rem);
  box-shadow: var(--soft);
}
.form-card h3 {
  font-size: 1.15rem; margin-bottom: .25rem;
  color: var(--navy); letter-spacing: -.015em;
}
.form-card p { color: var(--body); }

/* the intro line doubles as the card's header rule */
.form-card > p {
  font-size: .89rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--hair);
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--navy); }
.field label span { color: var(--muted); font-weight: 400; }

/* Filled rather than outlined. A hairline box on white is the default every
   form has, and on a white card it disappears. A tinted field reads as
   somewhere to type before you have read the label, and the border is spent
   on focus instead, where it does some work.
   background-color, not the shorthand, or the select loses its chevron. */
.field input, .field textarea, .field select {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background-color: var(--bone);
  color: var(--navy);
  font-family: inherit;
  font-size: .94rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 15px;
  padding-right: 2.5rem;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #9AA2AC; }

.field input:hover, .field textarea:hover, .field select:hover { background-color: var(--bone-2); }

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background-color: var(--paper);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(56, 101, 168, .14);
}
/* :user-invalid, not :invalid, so a field is never red before it is touched */
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #C2452F;
  box-shadow: 0 0 0 3px rgba(194, 69, 47, .1);
}

.form-foot {
  margin-top: 1.45rem; padding-top: 1.35rem;
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.form-card .form-note { margin: 0; font-size: .84rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-card .form-msg {
  display: none; margin-top: 1.1rem;
  padding: .9rem 1.05rem; border-radius: 11px;
  font-size: .88rem; line-height: 1.55;
  background: var(--sage-pale); color: var(--navy);
  border: 1px solid rgba(56, 101, 168, .12);
}
.form-card .form-msg.is-on { display: block; }

/* -------------------------------------------------------------- footer -- */

.ftr { background: var(--ink); color: rgba(255,255,255,.6); }
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, .78fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-block: clamp(2rem, 3.2vw, 2.6rem);
}
.ftr__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.ftr__brand img { width: 40px; height: 40px; object-fit: contain; }
.ftr__brand b { font-size: .92rem; font-weight: 700; color: #fff; letter-spacing: -.012em; }
.ftr__blurb { font-size: .89rem; line-height: 1.6; max-width: 36ch; color: rgba(255,255,255,.55); }
.ftr__office p { font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.5); }

.ftr h4 {
  font-size: .73rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: .95rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr a { font-size: .89rem; color: rgba(255,255,255,.68); transition: color .25s var(--ease); }
.ftr a:hover { color: #fff; }

.ftr__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--hair-dark);
  font-size: .8rem; color: rgba(255,255,255,.4);
}
.ftr__bar p { margin: 0; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ------------------------------------------------------------ whatsapp -- */

.wa {
  position: fixed; right: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 80;
  display: flex; align-items: center;
  height: 54px;
  border-radius: 999px;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.5), 0 2px 8px rgba(14,23,37,.14);
  transform: translateY(80px); opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
  overflow: hidden;
}
.wa.is-in { transform: none; opacity: 1; }
.wa__ic { width: 54px; height: 54px; display: grid; place-items: center; flex: none; }
.wa__ic svg { width: 27px; height: 27px; fill: currentColor; }
.wa__txt {
  max-width: 0; opacity: 0; white-space: nowrap;
  font-size: .87rem; font-weight: 600;
  transition: max-width .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
}
.wa:hover .wa__txt, .wa:focus-visible .wa__txt { max-width: 200px; opacity: 1; padding-right: 1.1rem; }

/* ---------------------------------------------------------- animations -- */

[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------- breakpoints -- */

@media (max-width: 1080px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .nav { display: none; }
  .burger { display: block; }
  .hdr__inner { height: 68px; }
  .split, .split--even, .split--photo, .feature, .head-row, .enquire {
    grid-template-columns: minmax(0, 1fr);
  }
  .hdr__inner { display: flex; justify-content: space-between; }
  .split--balance > :last-child { margin-top: 0; }
  .hero__split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.4rem; }
  .hero h1 { max-width: 100%; margin-bottom: 0; }
  .hero .lead { max-width: 46ch; }
  .hero__shot img { aspect-ratio: 16 / 9; }
  .feature--flip .figure { order: 0; }
  .phero__shot img { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .checks--2 { grid-template-columns: minmax(0, 1fr); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .slide { flex-basis: 78%; }
  .btn-row .btn { flex: 1 1 100%; }
  .btn--hdr span { display: none; }
  .btn--hdr { padding: .66rem .8rem; }
}

/* ------------------------------------------------------- mobile polish -- */

@media (max-width: 640px) {
  /* iOS zooms the whole page when a focused field is under 16px */
  .field input, .field textarea, .field select { font-size: 16px; padding: .85rem .9rem; }
  .field label { font-size: .88rem; }
  .form-foot { flex-direction: column; align-items: stretch; gap: .8rem; }
  .form-foot .btn { width: 100%; }
  .form-card .form-note { text-align: center; }

  /* every link and control gets a 44px target, per the WCAG minimum */
  .btn { min-height: 48px; }
  .btn--hdr { min-width: 44px; min-height: 44px; padding-inline: .85rem; }
  .burger { width: 46px; height: 46px; }
  .cbtn { width: 46px; height: 46px; }
  .brand { min-height: 44px; }

  .ftr ul { gap: 0; }
  .ftr ul a { display: block; padding-block: .72rem; }
  .ftr__bar { padding-block: 1.1rem; gap: .35rem; }

  /* The page ran to nine and a bit screens on a phone, and most of that was
     things that only make sense side by side on a desktop stacking into one
     tall column. The fixes below are all about vertical budget. */

  /* Four stacked link groups made the footer a screen and a half on its own.
     The two short lists sit side by side instead; the brand and the contact
     block still span, because neither halves cleanly. No markup change, the
     first and last children are the two that need the full width. */
  .ftr__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
    padding-block: 2rem;
  }
  /* only the brand block needs the full width. The two link lists pair up,
     and so do the contact details and the registered office. */
  .ftr__top > :first-child { grid-column: 1 / -1; }

  /* 40px rows, comfortably past the 24px WCAG 2.2 minimum, across thirteen
     links */
  .ftr ul a { padding-block: .62rem; }

  /* on a phone the answers fold away behind their question */
  .faq > summary { cursor: pointer; min-height: 44px; }
  .faq__chev { display: block; }
  .faq[open] .faq__chev { transform: rotate(180deg); }

  /* the contact details sit above the form on a phone, so every bit of
     height here is height before anyone reaches the fields */
  .enquire__details { gap: 1rem; margin-top: 1.25rem; }
  .form-grid { gap: .8rem .9rem; }

  /* A 4:2.9 crop is 249px tall at this width, and there are six of them.
     16:9 keeps the photograph readable and gives back a third of a screen. */
  .svc__shot img,
  .figure--land img { aspect-ratio: 16 / 9; }

  /* The tractor shot is nearly square, which is fine in a two column split
     and very tall in a single one. */
  .split--balance .figure--portrait img { aspect-ratio: 4 / 3; }

  /* 52px above and below every section is desktop rhythm. 44 reads the same
     on a phone and saves most of a screen across the page. */
  :root { --sec: 2.75rem; }

  .enquire__details { gap: .35rem; }
  .enquire__details > div { padding-block: .5rem; }
  .enquire__details .v a { display: inline-block; padding-block: .62rem; }

  .drawer__link { padding-block: 1.05rem; }

  /* micro labels stay legible rather than shrinking with the layout */
  .label { font-size: .72rem; letter-spacing: .13em; }
  .crumbs { font-size: .78rem; }
  .crumbs a { display: inline-block; padding-block: .6rem; }
  .cinfo__k, .enquire__details .k { font-size: .75rem; }
  .form-card .form-note { font-size: .86rem; }
  .svc__tick { font-size: .76rem; }

  /* keep the floating button clear of the home indicator */
  .wa { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
  /* stop iOS tinting every tap */
  a, button { -webkit-tap-highlight-color: rgba(17, 28, 46, .08); }
  /* the last section needs room so the floating button never covers a control */
  main > section:last-of-type { padding-bottom: calc(var(--sec) + 1.25rem); }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding-block: 2rem 0; }
  .hero__shot img { aspect-ratio: 21 / 9; }
}

@media print {
  .hdr, .wa, .drawer { display: none !important; }
  body { background: #fff; }
}