/* THE FOOTER.
   Was a hand-drawn cinema-camera-rig SVG illustration on a light ground;
   replaced entirely per the client's own redesign reference — three real
   content columns over a dark ground. Static: nothing here is
   scroll-driven, unlike the rig it replaces (see deck.js — lensUpdate and
   the rig's timecode interval were removed with it, not just hidden).

   Colour: the whole deck was re-themed to this footer's teal (see
   deck.css's :root) instead of the other way round, so --foot-teal now
   just aliases the site-wide var(--accent) rather than holding its own
   value — one accent, not a footer-only exception.

   Background: assets/contact/footer-bg.jpg (the client's own reference
   photo — a lit camera rig with its own baked-in "EASTON" outline, so the
   separate CSS-drawn watermark and the small cropped lens panel this used
   to layer on top are gone, not duplicated). A left-to-right dark scrim is
   painted over it so the copy column stays legible against whatever the
   photo is doing there, fading out toward the right where the rig itself
   carries the frame. */

.foot {
  --foot-teal: var(--accent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: rgb(255 255 255 / .88);
  background:
    linear-gradient(100deg, #04100F 0%, rgb(4 16 15 / .9) 32%, rgb(4 16 15 / .58) 56%, rgb(4 16 15 / .22) 78%, transparent 100%),
    url("../contact/footer-bg.jpg") center right / cover no-repeat;
  padding-top: clamp(40px, 6.5svh, 76px);
}
@media (max-width: 900px) {
  /* Cover crops harder on a narrow viewport; bias the focal point left so
     the copy column isn't sitting on the brightest part of the photo. */
  .foot { background-position: 68% center; }
}

/* ============ THE THREE COLUMNS ============ */

.foot__grid {
  position: relative; z-index: 1;
  max-width: min(94vw, 1460px); margin-inline: auto;
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .foot__grid { grid-template-columns: 1.3fr 1fr; }
}

/* ---------- intro ---------- */
.foot__mark {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: clamp(1.5rem, 3vmin, 1.9rem);
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--print);
}
.foot__mark sup { font-size: .4em; vertical-align: super; }
.foot__rule {
  display: block; width: 40px; height: 2px; margin: 16px 0 24px;
  background: var(--foot-teal); border-radius: 2px;
}
.foot__head {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 108;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem); line-height: 1.06;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--print);
}
.foot__head span { color: var(--foot-teal); }
.foot__head i { font-style: normal; color: var(--accent); }
.foot__say {
  margin-top: clamp(10px, 1.6vw, 16px); max-width: 34ch;
  font-size: clamp(13px, 1.4vw, 14.5px); line-height: 1.5;
  color: rgb(255 255 255 / .6);
}

.foot__cta-row {
  margin-top: clamp(20px, 2.8vw, 28px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 28px);
}
.foot__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 26px;
  background: linear-gradient(100deg, var(--foot-teal) 0%, #1FA98C 100%);
  color: #04231F;
  font-family: var(--mono); font-weight: 600; font-size: clamp(10px, 1.2vw, 11.5px);
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 40px; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.foot__cta i {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: #04231F; color: var(--foot-teal);
}
.foot__cta i svg { width: 48%; height: 48%; }
@media (hover: hover) and (pointer: fine) {
  .foot__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgb(47 217 184 / .5); }
}
.foot__cta:active { transform: translateY(0); box-shadow: 0 8px 18px -10px rgb(47 217 184 / .5); }

/* ---------- get in touch ---------- */
.foot__eyebrow {
  font-family: var(--mono); font-weight: 500; font-size: clamp(9px, 1.1vw, 10.5px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--foot-teal);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.foot__rows { display: grid; }
.foot__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding-block: clamp(12px, 1.8vw, 18px);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.foot__row:first-child { padding-top: 0; }
.foot__row:last-child { border-bottom: none; padding-bottom: 0; }
.foot__row i {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgb(47 217 184 / .12); color: var(--foot-teal);
  margin-top: 2px;
}
.foot__row i svg { width: 50%; height: 50%; }
.foot__row dt {
  font-family: var(--mono); font-weight: 600; font-size: clamp(9px, 1vw, 10px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--print);
  margin-bottom: 4px;
}
.foot__row dd {
  margin: 0; font-size: clamp(12.5px, 1.35vw, 14px); line-height: 1.5;
  color: rgb(255 255 255 / .68);
}
.foot__row dd a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .3); }
.foot__row dd a:hover { color: var(--foot-teal); border-bottom-color: var(--foot-teal); }

/* ============ BASE STRIP ============ */

.foot__base {
  position: relative; z-index: 1;
  max-width: min(94vw, 1460px); margin: clamp(36px, 6vw, 64px) auto 0;
  padding-block: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgb(255 255 255 / .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--mono); font-size: clamp(9px, 1vw, 10.5px);
  letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .5);
}
.foot__social { display: flex; align-items: center; gap: 14px; }
.foot__social span { margin-right: 2px; }
.foot__social a {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .18); color: rgb(255 255 255 / .7);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
/* Same treatment as .row__arrow in deck.css: the 30px ring stays the drawn
   size, ::after pads the tap area to 44px. These sit in a row at the very
   bottom of the page, so an undersized target here is the last thing a
   phone user touches. */
.foot__social a::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.foot__social a svg { width: 52%; height: 52%; }
.foot__social a:hover { border-color: var(--foot-teal); color: var(--foot-teal); }
.foot__legal { display: flex; align-items: center; gap: 10px; }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--foot-teal); }

/* ============ NARROW ============ */

@media (max-width: 979px) {
  .foot__grid { text-align: left; }
}
@media (max-width: 640px) {
  .foot__cta-row { flex-direction: column; align-items: flex-start; }
  .foot__base { justify-content: center; text-align: center; }
}