/* ==========================================================================
   BGC Property Maintenance
   Taken from the brand mark: a chrome big cat on black. Near-black owns the
   brand regions, chrome-silver carries secondary text, and a single warm
   accent is reserved strictly for action. Archivo carries display, Barlow
   carries text. Square corners, hairline rules, authored icons on a single
   1.75px stroke. No cards, no shadows standing in for structure.
   ========================================================================== */

:root {
  /* Ground + ink */
  --paper:      #F2F3F4;
  --paper-2:    #E5E7E9;
  --ink:        #121417;
  --ink-soft:   #4E545B;

  /* Black + chrome — owns nav, hero, how, areas, footer */
  --pine-950:   #08090A;
  --pine-900:   #121417;
  --pine-800:   #1C1F23;
  --pine-600:   #4E545B;
  --pine-line:  #33383E;
  --on-pine:    #F2F4F6;
  --on-pine-2:  #A2A9B0;

  /* Action */
  --hi-vis:     #FF6A1A;
  --hi-vis-dk:  #E25510;
  --on-hi-vis:  #1A0A02;

  --danger:     #B3261E;

  --rule:       #CBCFD3;
  --rule-pine:  #2B3036;

  --wrap:       1180px;
  --gut:        clamp(1.25rem, 4vw, 3rem);
  --nav-h:      4.25rem;   /* sticky header height, for scroll offsets */

  --display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --text:    "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Any bare `display` declaration outranks the UA sheet's [hidden] rule, which
   silently leaves hidden elements on screen. Everything toggled by the
   `hidden` attribute — the mobile nav panel, the conditional drop-off field —
   depends on this winning. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0; top: -100%;
  z-index: 200; padding: .85rem 1.25rem;
  background: var(--hi-vis); color: var(--on-hi-vis);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 0; }

:where(a, button, input, select, textarea, summary, .chip):focus-visible {
  outline: 3px solid var(--hi-vis);
  outline-offset: 2px;
}

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

/* ---------- placeholder slots ---------- */
.slot {
  display: inline;
  padding: 0.05em 0.4em;
  background: rgba(255, 106, 26, 0.16);
  border-bottom: 2px dotted var(--hi-vis);
  color: inherit;
  font-weight: 600;
  font-size: 0.94em;
  white-space: nowrap;
}
.hero .slot,
.areas .slot,
.how .slot,
.foot .slot { background: rgba(255, 106, 26, 0.22); }

/* ---------- icons ---------- */
.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico--lg { width: 30px; height: 30px; stroke-width: 1.6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.15rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn--lg { padding: .95rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--hi-vis); color: var(--on-hi-vis); }
.btn--primary:hover { background: var(--hi-vis-dk); }
.btn--primary:active { transform: translateY(1px); }

.btn--outline {
  border-color: var(--on-pine-2);
  color: var(--on-pine);
  background: transparent;
}
.btn--outline:hover { border-color: var(--on-pine); background: rgba(255,255,255,.07); }

.btn--ghost { color: var(--on-pine); background: transparent; padding-inline: .5rem; }
.btn--ghost:hover { color: #fff; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pine-950);
  color: var(--on-pine);
  border-bottom: 1px solid var(--rule-pine);
}
.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .75rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--on-pine);
  margin-right: auto;
}
/* The cat, lifted off its black field and rebuilt with a real alpha channel
   so the chrome banding survives at any size. */
.brand__cat {
  width: 53px;
  height: auto;
  flex: none;
}
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.035em;
}
.brand__sub {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-pine-2);
}

.nav__links { display: none; gap: 1.75rem; }
.nav__links a {
  text-decoration: none;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--on-pine-2);
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__links a:hover { color: var(--on-pine); border-bottom-color: var(--hi-vis); }

.nav__actions { display: none; align-items: center; gap: .75rem; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rule-pine);
  border-radius: 2px;
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 5px; width: 20px; }
.nav__toggle-bars i {
  display: block; height: 2px; background: var(--on-pine);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav__toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: grid;
  gap: .35rem;
  padding: .5rem var(--gut) 1.35rem;
  background: var(--pine-950);
  border-top: 1px solid var(--rule-pine);
}
.nav__mobile a {
  text-decoration: none;
  padding: .7rem 0;
  font-weight: 600;
  border-bottom: 1px solid var(--rule-pine);
}
.nav__mobile .btn { margin-top: .75rem; border-bottom: 0; }
.nav__mobile-tel { border-bottom: 0 !important; color: var(--on-pine-2); }

@media (min-width: 900px) {
  .nav__links, .nav__actions { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--pine-900);
  color: var(--on-pine);
  padding: clamp(2.5rem, 5.5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.hero__inner > *:not(.hero__cat) { position: relative; z-index: 2; }

/* The cat is anchored to the content column, not the viewport edge — pinned to
   the window it drifts off on its own on a wide monitor and loses any
   relationship to the headline. Vertically centred on the block it sits behind,
   and allowed to bleed past the container so it still reads as caught
   mid-leap rather than placed. */
.hero__cat {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(-8rem, -5vw, -2.5rem);
  width: clamp(26rem, 42vw, 44rem);
  height: auto;
  opacity: .16;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1100px) {
  .hero__title, .hero__foot { max-width: 22ch; }
  .hero__lede { max-width: 44ch; }
  .hero__foot { max-width: 42ch; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__cat { animation: pounce 1.15s var(--ease) both; }
}
@keyframes pounce {
  from { opacity: 0; transform: translateY(-50%) translateX(9%) scale(1.06); }
  to   { opacity: .16; transform: translateY(-50%) translateX(0) scale(1); }
}

.hero__title {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  letter-spacing: -0.04em;
  margin-bottom: 1.25rem;
  max-width: 18ch;
}
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--hi-vis); }

/* Typewriter. The phrase cycles through what the crew actually does, so the
   thesis is demonstrated in the first viewport rather than asserted. The
   static first phrase is in the markup, so with no JS the line still reads
   as a finished sentence. */
.type { white-space: nowrap; }
.type__caret {
  display: inline-block;
  width: .055em;
  height: .78em;
  margin-left: .07em;
  vertical-align: -.04em;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .type__caret { animation: caret 1.05s steps(1, end) infinite; }
}
/* Nothing is being typed in this mode, so a parked caret is just a stray mark. */
@media (prefers-reduced-motion: reduce) {
  .type__caret { display: none; }
}
@keyframes caret { 50% { opacity: 0; } }

.hero__lede {
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--on-pine-2);
  margin-bottom: 1.75rem;
}

.hero__pick { margin-bottom: 1.75rem; }
.hero__pick-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-pine-2);
  margin-bottom: .75rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .55rem 1rem;
  background: transparent;
  color: var(--on-pine);
  border: 1px solid var(--pine-line);
  border-radius: 2px;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { border-color: var(--on-pine-2); background: rgba(255,255,255,.05); }
.chip[aria-pressed="true"] {
  background: var(--hi-vis);
  border-color: var(--hi-vis);
  color: var(--on-hi-vis);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }

.hero__foot {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-pine);
  max-width: 46ch;
  color: var(--on-pine-2);
  font-size: 1.0625rem;
}

/* Authored entrance: the display lines clip upward once, staggered. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .line {
    clip-path: inset(0 0 105% 0);
    transform: translateY(0.34em);
    animation: rise .95s var(--ease) forwards;
  }
  .hero__title .line:nth-child(1) { animation-delay: .04s; }
  .hero__title .line:nth-child(2) { animation-delay: .13s; }
  .hero__title .line:nth-child(3) { animation-delay: .22s; }

  .hero__lede, .hero__pick, .hero__actions, .hero__foot {
    opacity: 0;
    animation: settle .7s var(--ease) forwards;
  }
  .hero__lede    { animation-delay: .34s; }
  .hero__pick    { animation-delay: .42s; }
  .hero__actions { animation-delay: .5s; }
  .hero__foot    { animation-delay: .58s; }
}
@keyframes rise {
  to { clip-path: inset(-0.2em 0 -0.2em 0); transform: translateY(0); }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   REFERRAL
   ========================================================================== */
.referral {
  background: var(--paper);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.referral__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
}
.referral__head {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  max-width: 18ch;
}
.referral__body { max-width: 66ch; }
.referral__body p { color: var(--ink-soft); }

@media (min-width: 860px) {
  .referral__inner { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */
.sec-title {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  max-width: 20ch;
  margin-bottom: 1.15rem;
}
.sec-title--light { color: var(--on-pine); }
.sec-lede {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* Photo-led service cards, following the reference the client pinned:
   image with a category tag riding on it, then name, description, action. */
.svc--cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .svc--cards { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--pine-900);
  border: 1px solid var(--rule-pine);
  border-radius: 12px;
  padding: 1.35rem 1.35rem 1.1rem;
  color: var(--on-pine);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

/* The card a hero chip just sent the visitor to flashes three times — the
   card's own fill warms toward the accent and back. `--card-flash` is the
   accent at ~20% over the card ground, which keeps every text colour on the
   card above 4.5:1 at the peak. Reduced-motion users get the same information
   as a steady warm fill for the same window, with no pulsing. */
:root { --card-flash: #422516; }

.card--flash { background: var(--card-flash); }

@media (prefers-reduced-motion: no-preference) {
  .card--flash {
    background: var(--pine-900);
    animation: cardFlash 420ms var(--ease) 3;
  }
}
@keyframes cardFlash {
  0%, 100% { background-color: var(--pine-900); }
  40%      { background-color: var(--card-flash); }
}

/* Text-only: the category badge sits at the head of the card in place of the
   photo the layout was originally built around. */
.card__tag {
  align-self: start;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--pine-800);
  border: 1px solid var(--pine-line);
  color: var(--on-pine-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card__body { padding: 1.1rem .25rem .25rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.card__body p { color: var(--on-pine-2); font-size: .9375rem; max-width: 52ch; }

.card__cta {
  align-self: start;
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  color: var(--hi-vis);
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
}
.card__cta .ico--sm { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.card__cta:hover .ico--sm { transform: translateX(3px); }

.svc { list-style: none; margin: 0; padding: 0; display: grid; }
.svc__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.svc__item:last-child { border-bottom: 1px solid var(--rule); }

.svc__mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--pine-900);
  color: var(--hi-vis);
  border-radius: 2px;
}
.svc__text h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-bottom: .55rem;
}
.svc__text p { max-width: 68ch; color: var(--ink-soft); }

@media (min-width: 780px) {
  .svc__item { grid-template-columns: 56px 22ch 1fr; gap: 2rem; align-items: baseline; }
  .svc__mark { align-self: start; }
  .svc__text { display: contents; }
  .svc__text h3 { margin-bottom: 0; }
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how {
  background: var(--pine-900);
  color: var(--on-pine);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.how .sec-title { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.how__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-pine);
}
.how__step {
  padding: clamp(1.75rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule-pine);
}
.how__step h3 {
  font-size: 1.3125rem;
  color: var(--hi-vis);
  margin-bottom: .5rem;
}
.how__step p { color: var(--on-pine-2); max-width: 62ch; }

@media (min-width: 820px) {
  .how__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .how__step { padding-inline-end: 0; }
}

/* ==========================================================================
   AREAS
   ========================================================================== */
.areas {
  background: var(--pine-950);
  color: var(--on-pine);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.areas__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.areas__lede { color: var(--on-pine-2); max-width: 52ch; }

.areas__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  align-content: start;
  border-top: 1px solid var(--rule-pine);
}
.areas__list li {
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--rule-pine);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -0.025em;
}

@media (min-width: 860px) {
  .areas__inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.faq__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.faq__head p { color: var(--ink-soft); max-width: 40ch; }

.faq__list { border-top: 1px solid var(--rule); }

.qa { border-bottom: 1px solid var(--rule); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  transition: color .18s var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--pine-600); }
.qa > summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  border-right: 2px solid var(--hi-vis);
  border-bottom: 2px solid var(--hi-vis);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .24s var(--ease);
}
.qa[open] > summary::after { transform: rotate(-135deg); }

.qa__body { padding: 0 2.5rem 1.5rem 0; }
.qa__body p { color: var(--ink-soft); max-width: 66ch; }

@media (min-width: 900px) {
  .faq__inner { grid-template-columns: 0.8fr 1.2fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

/* ==========================================================================
   QUOTE FORM
   ========================================================================== */
.quote {
  background: var(--paper-2);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  border-top: 1px solid var(--rule);
}
.quote__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.quote__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.15rem; }
.quote__aside > p { color: var(--ink-soft); max-width: 42ch; }
/* Beats `.quote__aside > p` above, which would otherwise grey this out. */
.quote__aside .quote__or { margin-top: 1.5rem; font-weight: 600; color: var(--ink); }
.quote__or a { color: var(--pine-600); text-underline-offset: 3px; }

/* What happens after the form is sent. This column used to run out of content
   a third of the way down a very tall form, leaving a dead pocket; the steps
   fill it with something the visitor actually wants to know at exactly the
   moment they're deciding whether to hit send. */
.next {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}
.next li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .85rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.next li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--hi-vis);
  color: var(--on-hi-vis);
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
}
.next h3 {
  font-size: 1rem;
  letter-spacing: -0.015em;
  align-self: center;
}
.next p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }

/* Hold the column in view while the long form scrolls past it. */
@media (min-width: 960px) {
  .quote__aside {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
  }
}

.form { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field--wide { grid-column: 1 / -1; }

.field { display: grid; gap: .4rem; min-width: 0; }
.field label {
  font-weight: 600;
  font-size: .9375rem;
}
.opt { font-weight: 400; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #5C636B; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #A6ACB3; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pine-600);
  box-shadow: 0 0 0 3px rgba(28, 107, 84, .18);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }

.hint { font-size: .875rem; color: var(--ink-soft); margin: 0; }
.err { font-size: .875rem; color: var(--danger); font-weight: 600; margin: 0; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-weight: 400;
  font-size: .9375rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.check input {
  width: 20px; height: 20px;
  margin-top: .2rem;
  accent-color: var(--pine-600);
  padding: 0;
}

.form__status {
  margin: .85rem 0 0;
  font-weight: 600;
  min-height: 1.5em;
}
.form__status[data-tone="ok"]  { color: var(--pine-600); }
.form__status[data-tone="bad"] { color: var(--danger); }

.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }

@media (min-width: 960px) {
  .quote__inner { grid-template-columns: 0.75fr 1.25fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  position: relative;
  overflow: hidden;
  background: var(--pine-950);
  color: var(--on-pine);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}
/* The same leap, landing out of frame at the bottom of the page. */
.foot__cat {
  position: absolute;
  z-index: 0;
  right: -6rem;
  bottom: -3rem;
  width: clamp(22rem, 34vw, 34rem);
  height: auto;
  opacity: .07;
  pointer-events: none;
}
.foot__inner, .foot__base { position: relative; z-index: 1; }
.foot__inner {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.foot__line { color: var(--on-pine-2); max-width: 34ch; margin-top: 1rem; }

.foot__col h2 {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-pine-2);
  margin-bottom: 1rem;
  font-family: var(--text);
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-pine);
  color: var(--on-pine-2);
  font-size: .875rem;
}
.foot__base p { margin: 0; }

@media (min-width: 780px) {
  .foot__inner { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
}

/* ==========================================================================
   MOBILE CALL BAR
   ========================================================================== */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1rem;
  background: var(--hi-vis);
  color: var(--on-hi-vis);
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
  border-top: 1px solid rgba(0,0,0,.18);
}
.callbar .slot { background: rgba(0,0,0,.14); border-bottom-color: rgba(0,0,0,.4); }

@media (min-width: 900px) { .callbar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 60px; } }