/* ================================================================
   sections/footer.css
   Source: research/fragments/home/footer.html      (home variant)
           research/fragments/about/footer.html     (inner variant)
           CSS values from research/_stylesheet.css (home classes) and the
           inline <style> in research/raw/desktop/about.html (inner classes).

   HEIGHT MATH (desktop, all pages):
     .footer__top    400px
     .footer__hr       1px
     .footer__mid    200px
     .footer__bottom 200px
                    -------
                      801px   == reference-heights.json ✔

   RESPONSIVE — the two modes are NOT cosmetic, they are different rule sets
   in the reference:
     .footer              collapses only at <=809.98px   -> 801/801/801/924
     .footer.footer--home collapses at <=1439.98px too   -> 801/924/924/925

   Reference class map:
     .framer-1ave8vy  -> .footer            (home) | .framer-1lkphv4 (inner)
     .framer-108u8p9  -> .footer__top       | .framer-m9w260
     .framer-1ngb8r2  -> .footer__gradient
     .framer-1i6h5dd-container -> .footer__bg
     .framer-1p1od8s  -> .footer__top-inner
     .framer-1agpjz3  -> .footer__subheader
     .framer-duhj3o   -> .footer__cell--badge
     .framer-17w8czu  -> .footer__badge-wrap
     .framer-18gr3z0  -> .footer__cell--rule
     .framer-7oi7vd   -> .footer__info
     .framer-1f7uv6w  -> .footer__headline
     .framer-v3j5gx   -> .footer__cell--email
     .framer-117zh8o  -> .footer__cell-body
     .framer-1y3xa4y  -> .footer__cell--phone
     .framer-86m45v   -> .footer__social
     .framer-nrn9v0   -> .footer__social-list
     .framer-1jqtm1t  -> .footer__hr        | .framer-1jnwbv6
     .framer-2s6via   -> .footer__mid       | .framer-1sbtuzh
     .framer-11csw8x  -> .footer__mid-inner
     .framer-a6h86b   -> .footer__rules
     .framer-dwh6sv   -> .footer__mid-info
     .framer-1nzrmz   -> .footer__menu
     .framer-94aqi1   -> .footer__menu-list
     .framer-10mb6cd  -> .footer__service
     .framer-k8nj17   -> .footer__service-list
     .framer-1vvkiw7  -> .footer__form-part
     .framer-yvmlr9   -> .footer__form
     .framer-dz2vkn   -> .footer__fields
     .framer-1j8q187  -> .footer__field
     .framer-p7vxcb   -> .field
     .framer-zivgt2   -> .btn-submit
     .framer-4u0348   -> .footer__bottom    | .framer-eeaqxv
     .framer-1yxq53w  -> .footer__bottom-inner
     .framer-19vpdle  -> .footer__logo-part
     .framer-1ho9k57  -> .footer__cell--logo
     .framer-1d6gciy  -> .footer__logo-wrap
     .framer-1vqgrox  -> .footer__logo
     .framer-1r7o6cj  -> .footer__items
     .framer-5pf4cy   -> .footer__cell--rights
     .framer-mtahu7   -> .footer__cell--built
     .framer-1ghwmxz  -> .footer__cell--created
     .framer-d3u9h3   -> .credit-link
     .framer-7l2o47   -> .badge
   ================================================================ */

.footer {
  background-color: var(--c-cream);
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* ---------------- shared vertical rules ---------------- */
.footer .vline {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.footer .vline--solid {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone-cool-50);   /* #cfcecc80 */
}
.footer .vline--dashed {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);        /* #d2cecad9 */
}
.footer .vline--dashed-peach {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach);           /* #e68c55 */
}
.footer .vline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}

/* ---------------- 1. top block ---------------- */
.footer__top {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 400px;
  min-height: 400px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.footer__gradient {
  z-index: 3;
  flex: none;
  height: 339px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background: linear-gradient(#f2f0ee 0%, #f2f0ee00 100%);
}

.footer__bg {
  z-index: 1;
  flex: none;
  height: 814px;
  position: absolute;
  bottom: -63px;
  left: -1019px;
  right: -1018px;
}
.footer__bg-scale {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  transform: scale(1.2);
}

/* the Framer marquee: one strip of repeated images, translated on X */
.marquee {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  will-change: transform;
  animation: marquee-x var(--marquee-duration, 40s) linear infinite;
}
.marquee__item {
  height: 100%;
  width: auto;
  display: block;
  flex: 0 0 auto;
  user-select: none;
  pointer-events: none;
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -20%)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

/* ---------------------------------------------------------------
   SHARED AMBIENT PRIMITIVE: film-grain drift
   ---------------------------------------------------------------
   Lives here for the same reason `.marquee` does — footer.css is the one
   stylesheet every page loads, and three different page stylesheets need
   this loop (home .hm-projects + .hm-annual, contacts .numbers__grain-img).
   See SHARED-NOTES.md, "the footer background is a marquee".

   REVERSE-ENGINEERED from the live reference (Playwright, 2026-08-18,
   1440x900, sampled every rAF for 20s on / and /contacts):

     - the layer is a 400%x400% box at inset -200% over an overflow-clipped
       parent, background-repeat, opacity .05, asset
       rR6HYXBrMmX4cRpXfXUOvpvpB0.png;
     - it does NOT jitter randomly: it walks a fixed path of 90 hard steps
       in exactly 8000ms (88.89ms per step -> the ~11 steps/sec that reads
       as film grain), and the sequence repeats byte-for-byte every cycle;
     - the path is 9 linear segments of 10 steps between 10 waypoints, plus
       one single-step outlier at step 40 where the walk teleports;
     - every waypoint is a clean percentage of the layer's OWN box, which is
       why one keyframe set serves instances of different sizes (5760x3600
       on home, 5760x800 on contacts).

   The generated stops below were checked back against the captured live
   cycle on BOTH instances: 0 of 90 slots mismatched, worst error 0.0000px.

   Usage:  animation: grain-drift 8s step-end infinite;
   `step-end` is what makes each stop hold — the motion must never tween.
   The layer is always absolutely positioned inside an overflow-clipped box,
   so it cannot affect a measured section height. */
@keyframes grain-drift {
  0% { transform: translate(-15%, 10%); }
  1.1111% { transform: translate(-12%, 9%); }
  2.2222% { transform: translate(-9%, 8%); }
  3.3333% { transform: translate(-6%, 7%); }
  4.4444% { transform: translate(-3%, 6%); }
  5.5556% { transform: translate(0%, 5%); }
  6.6667% { transform: translate(3%, 4%); }
  7.7778% { transform: translate(6%, 3%); }
  8.8889% { transform: translate(9%, 2%); }
  10% { transform: translate(12%, 1%); }
  11.1111% { transform: translate(15%, 0%); }
  12.2222% { transform: translate(13.5%, 1.5%); }
  13.3333% { transform: translate(12%, 3%); }
  14.4444% { transform: translate(10.5%, 4.5%); }
  15.5556% { transform: translate(9%, 6%); }
  16.6667% { transform: translate(7.5%, 7.5%); }
  17.7778% { transform: translate(6%, 9%); }
  18.8889% { transform: translate(4.5%, 10.5%); }
  20% { transform: translate(3%, 12%); }
  21.1111% { transform: translate(1.5%, 13.5%); }
  22.2222% { transform: translate(0%, 15%); }
  23.3333% { transform: translate(0.3%, 17%); }
  24.4444% { transform: translate(0.6%, 19%); }
  25.5556% { transform: translate(0.9%, 21%); }
  26.6667% { transform: translate(1.2%, 23%); }
  27.7778% { transform: translate(1.5%, 25%); }
  28.8889% { transform: translate(1.8%, 27%); }
  30% { transform: translate(2.1%, 29%); }
  31.1111% { transform: translate(2.4%, 31%); }
  32.2222% { transform: translate(2.7%, 33%); }
  33.3333% { transform: translate(3%, 35%); }
  34.4444% { transform: translate(1.7%, 32.5%); }
  35.5556% { transform: translate(0.4%, 30%); }
  36.6667% { transform: translate(-0.9%, 27.5%); }
  37.7778% { transform: translate(-2.2%, 25%); }
  38.8889% { transform: translate(-3.5%, 22.5%); }
  40% { transform: translate(-4.8%, 20%); }
  41.1111% { transform: translate(-6.1%, 17.5%); }
  42.2222% { transform: translate(-7.4%, 15%); }
  43.3333% { transform: translate(-8.7%, 12.5%); }
  44.4444% { transform: translate(-10%, 10%); }
  45.5556% { transform: translate(-0.5%, -1%); }
  46.6667% { transform: translate(-1%, -2%); }
  47.7778% { transform: translate(-1.5%, -3%); }
  48.8889% { transform: translate(-2%, -4%); }
  50% { transform: translate(-2.5%, -5%); }
  51.1111% { transform: translate(-3%, -6%); }
  52.2222% { transform: translate(-3.5%, -7%); }
  53.3333% { transform: translate(-4%, -8%); }
  54.4444% { transform: translate(-4.5%, -9%); }
  55.5556% { transform: translate(-5%, -10%); }
  56.6667% { transform: translate(-6%, -8.5%); }
  57.7778% { transform: translate(-7%, -7%); }
  58.8889% { transform: translate(-8%, -5.5%); }
  60% { transform: translate(-9%, -4%); }
  61.1111% { transform: translate(-10%, -2.5%); }
  62.2222% { transform: translate(-11%, -1%); }
  63.3333% { transform: translate(-12%, 0.5%); }
  64.4444% { transform: translate(-13%, 2%); }
  65.5556% { transform: translate(-14%, 3.5%); }
  66.6667% { transform: translate(-15%, 5%); }
  67.7778% { transform: translate(-12.8%, 2%); }
  68.8889% { transform: translate(-10.6%, -1%); }
  70% { transform: translate(-8.4%, -4%); }
  71.1111% { transform: translate(-6.2%, -7%); }
  72.2222% { transform: translate(-4%, -10%); }
  73.3333% { transform: translate(-1.8%, -13%); }
  74.4444% { transform: translate(0.4%, -16%); }
  75.5556% { transform: translate(2.6%, -19%); }
  76.6667% { transform: translate(4.8%, -22%); }
  77.7778% { transform: translate(7%, -25%); }
  78.8889% { transform: translate(5.8%, -20%); }
  80% { transform: translate(4.6%, -15%); }
  81.1111% { transform: translate(3.4%, -10%); }
  82.2222% { transform: translate(2.2%, -5%); }
  83.3333% { transform: translate(1%, 0%); }
  84.4444% { transform: translate(-0.2%, 5%); }
  85.5556% { transform: translate(-1.4%, 10%); }
  86.6667% { transform: translate(-2.6%, 15%); }
  87.7778% { transform: translate(-3.8%, 20%); }
  88.8889% { transform: translate(-5%, 25%); }
  90% { transform: translate(-6%, 23.5%); }
  91.1111% { transform: translate(-7%, 22%); }
  92.2222% { transform: translate(-8%, 20.5%); }
  93.3333% { transform: translate(-9%, 19%); }
  94.4444% { transform: translate(-10%, 17.5%); }
  95.5556% { transform: translate(-11%, 16%); }
  96.6667% { transform: translate(-12%, 14.5%); }
  97.7778% { transform: translate(-13%, 13%); }
  98.8889% { transform: translate(-14%, 11.5%); }
  to   { transform: translate(-15%, 10%); }
}
/* NB: the reduced-motion opt-out for each grain layer lives NEXT TO the rule
   that starts it, in pages/home.css and pages/contacts.css. It cannot live
   here: both page stylesheets load after this one and would win the cascade
   at equal specificity, leaving the loop running for users who asked for no
   motion. (`.marquee` above is safe because its animation is declared here.) */

.footer__top-inner {
  z-index: 3;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.footer__subheader {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* generic "vertical rule + content" cell */
.footer__cell {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

/* a cell that is only a rule, centred, with 8px gap */
.footer__cell--rule {
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
}

.footer__badge-wrap,
.footer__cell-body {
  height: 25%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

/* --- the numbered section badge --- */
.badge {
  display: flex;
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.badge__num {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 31px;
  height: 31px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-orange);
  color: var(--c-white);
  white-space: pre;
}
.badge__label {
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  height: 31px;
  padding: 0 12px 0 10px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-stone-40);
  white-space: pre;
}

.footer__info {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.footer__headline {
  z-index: 10;
  flex: none;
  width: 54%;
  max-width: 500px;
  height: auto;
  position: absolute;
  bottom: -8px;
  left: -3px;
  text-wrap: balance;
}

.footer__social {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.footer__social-list {
  height: 25%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 32px;
  width: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

/* plain text link used for email / phone / socials */
.link-plain {
  display: flex;
  flex-flow: column;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  cursor: pointer;
  text-decoration: none;
  white-space: pre;
  transition: color .2s linear;
}
.link-plain:hover { color: var(--c-orange); }
/* Word-splitting (data-split-text="words") makes every word its own flex
   item, so the 3-word "book a call" stacked into a 36px-wide column while
   1-word links were unaffected. Split links lay their words out as text. */
.link-plain[data-split-text] { display: block; }

/* ---------------- 2. hairline ---------------- */
.footer__hr {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone);
  z-index: 4;
  flex: none;
  width: 100%;
  height: 1px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.footer__hr::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--c-stone);
  pointer-events: none;
}

/* ---------------- 3. menu + form ---------------- */
.footer__mid {
  background-color: var(--c-cream);
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 200px;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.footer__mid-inner,
.footer__bottom-inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
}
.footer__mid-inner { overflow: visible; }
.footer__bottom-inner { overflow: var(--overflow-clip-fallback, clip); }

.footer__rules {
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.footer__mid-info {
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* Animation-QA pass (2026-08-18): `.arrow-link__icon` (menu-line.css) sits
   at `left:-23px` on hover-reveal — entirely outside its own link's box —
   so it only ever paints if EVERY ancestor up to here allows overflow.
   `.footer__menu`/`.footer__service` and their `-list` children below all
   start at the exact same x as the first link inside them (each is a
   `flex:1 0 0; width:1px` column), so the previous `clip` on both levels
   silently ate the whole reveal: getComputedStyle showed opacity:1 on
   hover with nothing rendering until both were widened. Neither box has
   sibling content relying on being clipped (the `.vline` divider below is
   a plain in-flow 1px rule, not negatively offset), so this is paint-only
   — it cannot move any measured width/height. */
.footer__menu,
.footer__service {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
/* the peach rule in the menu column is 400px tall in the reference */
.footer__menu > .vline { height: 400px; }

.footer__menu-list {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: visible;
}
.footer__service-list {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start flex-end;
  align-items: flex-start;
  gap: 4px;
  width: 1px;
  padding: 10px 0 0;
  position: relative;
  overflow: visible; /* see .footer__menu-list comment above */
}

/* small variant of the shared arrow link (menu-line.css owns the base) */
.arrow-link--sm .arrow-link__icon { top: 47%; left: -17px; width: 10px; height: 10px; }

/* …and its own hover geometry. The reference's «Desktop small» variant grows
   19px, not 23 (1px inset + 10px icon + 8px gap), so the arrow travels 18px.
   Measured live 2026-08-18 on the footer "privacy policy" / "terms of
   service" / "404" stack: label x +19.0, icon x +18.0. Everything else —
   spring, fade, direction — comes from the base rule in menu-line.css. */
@media (hover: hover) and (pointer: fine) {
  .arrow-link--sm:hover,
  .arrow-link--sm:focus-visible { padding-left: 19px; }
  .arrow-link--sm:hover .arrow-link__icon,
  .arrow-link--sm:focus-visible .arrow-link__icon { transform: translate(18px, -50%); }
}

.footer__form-part {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-end space-between;
  align-items: flex-end;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.footer__form {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 41px;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.footer__fields {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-end center;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.footer__field {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
}
.footer__field-label {
  white-space: pre;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
}

/* Framer's text input, values verbatim from --framer-input-* */
.field {
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 12px 0;
  overflow: hidden;
}
.field::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: var(--c-stone);
  /* Measured on the live reference (2026-08-19): the input underline's
     focus color change is a HARD CUT — computed transition-duration 0s.
     The .2s fade here was a guess; removed for parity. */
}
.field:focus-within::after { border-color: var(--c-orange); }
.field__input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0;
  height: auto;
  background: none;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Geist Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.02em;
  line-height: 1.2em;
  color: var(--c-black);
}
.field__input:focus-visible { outline: none; }
/* The reference ships both fields pre-filled-looking, with "YOUR NAME" /
   "EMAIL@ADDRESS.COM" sitting under the NAME / EMAIL captions in the same
   near-black 15px mono as a typed value — not a faint placeholder grey. The
   clone rendered the captions with empty fields beneath them. */
.field__input::placeholder { color: var(--c-black); opacity: 1; text-transform: uppercase; }

.footer__submit-slot {
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
}

.btn-submit {
  cursor: pointer;
  height: 57px;
  width: 100%;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-graphite);
}
.btn-submit__edge {
  z-index: 1;
  flex: none;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  background-color: var(--c-orange);
}

.btn-submit__all {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.btn-submit__text {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  color: var(--c-white);
}
.btn-submit__text .t-mono { color: var(--c-white); user-select: none; white-space: pre; }
.btn-submit__icon {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: -23px;
}
.btn-submit__icon svg { width: 100%; height: 100%; }
/* ---- hover (mouse only) -------------------------------------------------
   The reference's submit button (.framer-v2SEu, fill .framer-1tqnlet) runs
   the identical sweep to the .framer-fSAj6 CTA pill — same spring, same
   arrow reveal — only its geometry differs: the hover label row is 23px
   wider, not 22, because the reference leaves a 1px inset to the left of
   the icon (1 + 12 icon + 10 gap). Measured live 2026-08-18 on the footer
   "let's talk" button: label row 90 -> 113px, label +11.5px, icon +12.5px.
   Its label is white in BOTH states, so there is no colour swap here.
   See help.css for the mechanism and base.css § 5b for the timing.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn-submit__edge {
    width: calc(100% + 1px);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit:hover .btn-submit__edge,
  .btn-submit:focus-visible .btn-submit__edge {
    transform: scaleX(1);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .btn-submit__text {
    z-index: 1;
    transition: padding-left var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit:hover .btn-submit__text,
  .btn-submit:focus-visible .btn-submit__text {
    padding-left: 23px;
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .btn-submit__icon {
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit:hover .btn-submit__icon,
  .btn-submit:focus-visible .btn-submit__icon {
    transform: translateX(24px);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }
}

/* ---------------- 4. bottom block ---------------- */
.footer__bottom {
  background-color: var(--c-cream);
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 200px;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.footer__logo-part {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.footer__cell--logo,
.footer__cell--built {
  place-content: flex-end flex-start;
  align-items: flex-end;
}

.footer__logo-wrap {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 1px;
  padding: 0 0 34px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.footer__logo {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  text-decoration: none;
}
.footer__logo-mark { display: block; width: 12px; height: 12px; position: relative; }
.footer__logo-mark svg { width: 100%; height: 100%; }

.footer__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  width: auto;
  height: 24px;
  position: relative;
  white-space: pre;
}
.footer__wordmark p {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 78px;
  text-transform: uppercase;
  color: var(--c-black);
}

.footer__items {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.footer__cell--rights {
  place-content: flex-end flex-start;
  align-items: flex-end;
  overflow: visible;
}
.footer__cell--created {
  place-content: flex-end space-between;
  align-items: flex-end;
}

.footer__text-box {
  max-width: 230px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 10px;
  width: 1px;
  padding: 0 0 36px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
/* This cell contains a single text label, so share the 36px baseline used by
   the neighboring footer credits instead of the reference badge offset. */
.footer__cell--created .footer__text-box { padding: 0 0 36px; }
.footer__text-box p { white-space: pre; flex: none; width: auto; height: auto; position: relative; }

.footer__inline {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.credit-link {
  cursor: pointer;
  height: min-content;
  display: flex;
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  text-decoration: none;
}
.credit-link__mark { width: 10px; height: 15px; position: relative; }
.credit-link__mark svg { width: 100%; height: 100%; }
.credit-link__text { white-space: pre; flex: none; width: auto; height: auto; position: relative; }
.credit-link__avatar {
  aspect-ratio: 1;
  height: var(--framer-aspect-ratio-supported, 24px);
  width: 24px;
  z-index: 1;
  flex: none;
  position: absolute;
  top: 50%;
  left: -30px;
  overflow: visible;
  background: var(--c-stone);
}
.credit-link--avatar .credit-link__text { order: 3; }
.credit-link--avatar .credit-link__avatar { order: 1; }
.credit-link__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credit-link:hover .credit-link__text { color: var(--c-orange); }

/* The footer's legal links are near-black in the reference (sampled at the
   live rect: darkest pixel 0). They inherit `.t-mono-xs`, which base.css gives
   `color: var(--c-grey)` — right for the grey captions ("ALL RIGHTS
   RESERVED", the field labels) but wrong here, so the whole PRIVACY POLICY /
   TERMS OF SERVICE / 404 stack rendered #9e9e9e. Scoped override rather than
   a change to the shared preset. */
.footer__service-list .arrow-link__text { color: var(--c-black); }

/* ================================================================
   PHONE  (<= 809.98px) — applies to every page
   ================================================================ */
@media (max-width: 809.98px) {
  .footer__top {
    height: min-content;
    min-height: 200px;
    padding: 0 26px;
  }
  .footer__top-inner,
  .footer__bottom-inner { height: min-content; max-width: unset; }
  .footer__info,
  .footer__items { flex: 1 0 0; height: min-content; }
  .footer__headline { width: 75%; bottom: -4px; }
  .footer__cell--email > .vline,
  .footer__social > .vline:first-child {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    height: 300px;
  }
  .footer__cell-body,
  .footer__social-list { height: min-content; padding: 40px 0 0; }
  .footer__social > .vline:last-child { height: 300px; }
  .footer__cell--email,
  .footer__social,
  .footer__logo-part { height: min-content; }

  .footer__mid { flex-direction: column; height: min-content; padding: 0 26px; }
  .footer__mid-inner,
  .footer__mid-info { flex-direction: column; flex: none; width: 100%; height: min-content; }
  .footer__menu {
    align-content: flex-start;
    align-items: flex-start;
    gap: unset;
    flex: none;
    justify-content: space-between;
    width: 100%;
    height: min-content;
  }
  .footer__menu > .vline,
  .footer__service > .vline,
  .footer__form-part > .vline:first-child,
  .footer__cell--logo > .vline,
  .footer__cell--built > .vline {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    align-self: stretch;
    height: auto;
  }
  .footer__service > .vline,
  .footer__form-part > .vline:first-child,
  .footer__cell--logo > .vline {
    --border-color: var(--c-peach);
    --border-style: dashed;
  }
  .footer__cell--built > .vline {
    --border-color: var(--c-stone-85);
    --border-style: dashed;
  }
  .footer__menu-list { padding: 50px 0 0; }
  .footer__service {
    gap: unset;
    flex: none;
    justify-content: space-between;
    width: 100%;
    height: min-content;
  }
  .footer__service-list { padding: 40px 0 0; }
  .footer__form-part { flex: none; width: 100%; height: min-content; }
  .footer__form { gap: 24px; padding: 42px 0 0; }
  .footer__fields { flex-direction: column; gap: 16px; }
  .footer__field { flex: none; width: 100%; }

  .footer__bottom {
    height: min-content;
    min-height: unset;
    align-content: flex-end;
    align-items: flex-end;
    padding: 0 26px;
  }
  .footer__cell--logo { height: 86px; }
  .footer__logo-wrap { padding: 1px 0 34px; }
  .footer__cell--built { justify-content: flex-end; height: min-content; }
  .footer__inline { padding: 30px 0 0; }
}

/* ================================================================
   TABLET + LAPTOP (810px .. 1439.98px) — HOME PAGE ONLY.
   Inner pages keep the desktop layout in this range (801px tall).
   ================================================================ */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .footer--home .footer__top {
    height: min-content;
    min-height: 200px;
    padding: 0 26px;
  }
  .footer--home .footer__top-inner,
  .footer--home .footer__bottom-inner { height: min-content; max-width: unset; }
  .footer--home .footer__info,
  .footer--home .footer__items { flex: 1 0 0; height: min-content; }
  .footer--home .footer__headline { width: 75%; bottom: -4px; }
  .footer--home .footer__cell--email > .vline,
  .footer--home .footer__social > .vline:first-child {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    height: 300px;
  }
  .footer--home .footer__cell-body,
  .footer--home .footer__social-list { height: min-content; padding: 40px 0 0; }
  .footer--home .footer__social > .vline:last-child { height: 300px; }
  .footer--home .footer__cell--email,
  .footer--home .footer__social { height: min-content; }
  .footer--home .footer__logo-part { align-self: stretch; height: auto; }

  .footer--home .footer__mid { flex-direction: column; height: min-content; padding: 0 26px; }
  .footer--home .footer__mid-inner,
  .footer--home .footer__mid-info { flex-direction: column; flex: none; width: 100%; height: min-content; }
  .footer--home .footer__menu {
    align-content: flex-start;
    align-items: flex-start;
    gap: unset;
    flex: none;
    justify-content: space-between;
    width: 100%;
    height: min-content;
  }
  .footer--home .footer__menu > .vline,
  .footer--home .footer__service > .vline,
  .footer--home .footer__form-part > .vline:first-child,
  .footer--home .footer__cell--logo > .vline,
  .footer--home .footer__cell--built > .vline {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    align-self: stretch;
    height: auto;
  }
  .footer--home .footer__service > .vline,
  .footer--home .footer__form-part > .vline:first-child,
  .footer--home .footer__cell--logo > .vline {
    --border-color: var(--c-peach);
    --border-style: dashed;
  }
  .footer--home .footer__cell--built > .vline {
    --border-color: var(--c-stone-85);
    --border-style: dashed;
  }
  .footer--home .footer__menu-list { padding: 50px 0 0; }
  .footer--home .footer__service {
    gap: unset;
    flex: none;
    justify-content: space-between;
    width: 100%;
    height: min-content;
  }
  .footer--home .footer__service-list { padding: 40px 0 0; }
  .footer--home .footer__form-part { flex: none; width: 100%; height: min-content; }
  .footer--home .footer__form { gap: 24px; padding: 42px 0 0; }
  .footer--home .footer__fields { flex-direction: column; gap: 16px; }
  .footer--home .footer__field { flex: none; width: 100%; }

  .footer--home .footer__bottom {
    height: min-content;
    min-height: unset;
    align-content: flex-end;
    align-items: flex-end;
    padding: 0 26px;
  }
  .footer--home .footer__logo-wrap { padding: 1px 0 34px; }
  .footer--home .footer__cell--built { justify-content: flex-end; height: min-content; }
  .footer--home .footer__inline { padding: 30px 0 0; }

  /* Inner-page footer variant (no --home): the reference keeps the 801px
     desktop-style footer at this tier, but its form column changes: fields
     stack vertically (column, 16px gap, full-width), form gap tightens to
     24px, and the form column drops from flex:2 to flex:1 — the flex:2 the
     clone was keeping is what squeezed the menu columns ~250px left at
     tablet. From the inner footer's own rules in raw/<bp>/solutions.html
     (.framer-1v2a16v/.framer-j5jnxj/.framer-16cwx17/.framer-1amnudw). */
  .footer:not(.footer--home) .footer__fields { flex-direction: column; gap: 16px; }
  .footer:not(.footer--home) .footer__field { flex: none; width: 100%; }
  .footer:not(.footer--home) .footer__form { gap: 24px; }
  .footer:not(.footer--home) .footer__form-part { flex: 1 0 0; }
}

/* Match the reference footer logo's 85.28 x 24px footprint at every tier.
   Contain the wider Autnex artwork so its native proportions stay intact. */
.footer__logo {
  width: 85.28px;
  height: 24px;
}

.footer__logo-img {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* ---- text-reveal timing (measured live 2026-08-19) ------------------------
   Two departures from the site-wide text-reveal defaults, both measured on
   the live reference @1440x900:

   1. The big footer headline letter-reveals FASTER than every other heading:
      35 letters sweep in ~650ms = ~19ms/letter (headings elsewhere run the
      default 30ms). Two independent probe runs read 18ms and 19ms.
   2. The footer's small texts fade in word-by-word: menu labels & credits at
      ~130-140ms/word, the service links / "All rights reserved" at ~160ms,
      email/phone/social as single whole units. Tier classes below only
      retune the custom properties consumed by css/text-reveal.css; the
      armed/revealed/reduced-motion mechanics are inherited unchanged.
      (Same tiers exist in css/pages/home.css / css/sections/help.css.)
   The "Name"/"Email" field labels and the submit button deliberately have no
   reveal — they were confirmed static on the reference. */
.footer__headline[data-split-text] { --sr-stagger: .019s; }
[data-split-text].w13 { --sr-stagger: .13s; --sr-dur: .1s; }
[data-split-text].w16 { --sr-stagger: .16s; --sr-dur: .1s; }