/* Closing call to action: a light card that overlaps the dark footer, with the team photo framed by the logo's square motifs */
/* overflow-x clip: the right frame line runs past the card and, on wide screens, past the window; clip keeps it from
   adding a sideways scroll (Oct 15, Lindsey) without making the section a scroll container */
.close{overflow-x:clip;--cl-bg:#F7F7F5;--cl-foot:#121614;--cl-ink:#121614;--cl-green:#B0E1B6;
  position:relative;z-index:2;padding:var(--same-gap) var(--gutter) 0;background:linear-gradient(180deg,var(--cl-bg) 0,var(--cl-bg) calc(100% - clamp(48px,5vw,64px)),var(--cl-foot) calc(100% - clamp(48px,5vw,64px)))}
.close-card{position:relative;max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(24px,4vw,64px);
  border:1px solid #E2E3E0;border-radius:var(--r-xl);padding:clamp(40px,5vw,72px) 0 clamp(40px,5vw,72px) clamp(24px,6vw,96px);
  background:var(--page-bg,#F7F7F5)}
/* the green glow is its own layer so it can drift a little on scroll (assets/parallax.js, desktop only); same look as the
   card background it replaces: radial 58% x 72% at 60% 74% of the card, here in a box 24% taller */
.close-glow{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.close-glow::before{content:"";position:absolute;inset:-12% 0;transform:translate3d(0,var(--gy,0px),0);
  background:radial-gradient(58% 58.06% at 60% 69.35%,rgba(159,215,177,.72),rgba(159,215,177,.28) 48%,transparent 78%)}
.close-copy{position:relative;z-index:2;max-width:30em}
.close-copy h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.035em;font-weight:500;color:var(--cl-ink);text-wrap:balance}
.close-copy p{font-size:var(--lead);line-height:1.6;color:#2E3330;margin-top:24px;max-width:26em;text-wrap:balance}
.close-copy .btn{margin-top:32px;background:var(--cl-ink);color:#F7F7F5!important}
.close-copy .btn:hover{background:#2A302C;box-shadow:none}
.close-art{position:relative;margin-right:clamp(-56px,-3.5vw,-24px)}
.close-art .close-photo{position:relative;z-index:1;display:block;width:100%;aspect-ratio:681/500;object-fit:cover;object-position:50% 48%;border-radius:var(--r-lg)}
/* the photo sits in a clipping frame and slides inside it on scroll (parallax.js); it is never scaled, so it stays as sharp.
   The square photo overflows the 681 x 500 frame by 26.6% of its height; -12.77% matches the old 48% crop */
.close-art .close-ph{position:relative;z-index:1;width:100%;aspect-ratio:681/500;border-radius:var(--r-lg);overflow:hidden}
.close-art .close-ph>.close-photo{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1;border-radius:0;transform:translate3d(0,var(--ty,-12.77%),0)}
/* Brian's frame artwork, positioned as in the design relative to the 681 x 500 photo:
   the bottom-left frame (506 x 277) sits behind the photo, the right frame (402 x 412) sits over it */
.close-art .close-lines{position:absolute;height:auto;overflow:visible;object-fit:fill;border-radius:0;pointer-events:none}
.close-art .close-lines.back{z-index:0;left:-12.48%;top:calc(59.45% - 50px);width:74.3%;aspect-ratio:506/277} /* 50 px higher (Oct 16, Brian) */
.close-art .close-lines.front{z-index:0;left:56.42%;top:5%;width:59.03%;aspect-ratio:402/412}
/* team note (Oct 16): the near-white lines were lost on the light card, so both frames are a mid green; both sit behind the
   photo (the client does not want lines over people's photos) */
.close-art .close-lines .ln{stroke:#B0E1B6;stroke-opacity:.6}

.foot{background:#121614;color:#F7F7F5;padding:clamp(40px,5vw,56px) var(--gutter) 32px;position:relative;z-index:2}
.foot-wrap{max-width:var(--container);margin:0 auto}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} /* Oct 21, Lindsey: the Use cases column is back */
.foot-brand .logo{width:146px;height:32px}
.foot-brand p{font-size:var(--small);line-height:1.6;color:#C9CCC9;margin-top:24px;max-width:24em}
.foot h3{font-size:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:#9AA09B;font-weight:400;margin-bottom:24px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.foot a{color:#F7F7F5;text-decoration:none;font-size:var(--body);opacity:.9;transition:opacity .2s}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--label);color:#C9CCC9}
.foot-bottom a{font-size:var(--label)}

@media(max-width:900px){
  .close-card{grid-template-columns:1fr;padding:40px 24px 0}
  .close-art{margin:0 0 -1px}.close-art .close-photo{border-radius:var(--r-md) var(--r-md) 0 0}
  .close-art .close-lines{display:none}
  /* the heading, text and button use the card's full width (Oct 16, team note) */
  .close-copy,.close-copy p{max-width:none}
  .close-copy h2,.close-copy p{text-wrap:wrap}
  .close-art .close-ph{border-radius:var(--r-md) var(--r-md) 0 0}
}
/* phones: the button spans the card too (Oct 16, team note) */
@media(max-width:560px){
  .close-copy .btn{display:flex;justify-content:center;width:100%}
  .close-art .close-ph{border-radius:var(--r-md) var(--r-md) 0 0}
  .foot-top{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1/-1} /* brand on top, then three even columns */
}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:28px}.foot h3{margin-bottom:12px}.foot ul{gap:8px}.foot-brand p{margin-top:16px}
  .foot-bottom{flex-direction:column;gap:8px;margin-top:40px}.foot-bottom a{white-space:nowrap}}

/* Oct 21 (Val): one square frame behind the closing photo instead of the two line frames: a rounded mint line set up and to the left
   of the photo, with a mint square on its top edge and one on its left edge. Fades in with the card. Hidden on stacked phones. */
.close-art .close-lines{display:none}
.close-frame{position:absolute;z-index:0;left:-9%;top:-10%;right:18%;bottom:-9%;border:1.5px solid color-mix(in srgb,#B0E1B6 70%,transparent);
  border-radius:22px;pointer-events:none}
.close-frame i{position:absolute;width:14px;height:14px;background:#B0E1B6}
.close-frame i:nth-child(1){top:-8px;left:84%}
.close-frame i:nth-child(2){left:-8px;top:91%}
@media(max-width:900px){.close-frame{display:none}}