/* Shared "Let's Talk + Footer" component — edit here, updates on every page. Requires :root tokens --bone,--bone2,--ink,--ink2,--mid,--dark,--hair,--hair-d already defined by the page. */
@keyframes mqleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes paint{from{background-position:0% 50%}to{background-position:300% 50%}}

.page-top{position:relative;z-index:1;background:#FFFFFF;}
.talk-fixed{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--dark);pointer-events:none;}
.talk-spacer{height:165vh;position:relative;z-index:0;pointer-events:none;background:transparent;} /* JS sizes this precisely so scrolling ends when the footer settles */
.talk__group{position:absolute;top:0;left:0;right:0;width:100vw;display:flex;flex-direction:column;align-items:center;pointer-events:auto;will-change:transform;}
.talk__group .footer{width:100vw;margin-top:-26vh;}
.talk__gap{height:0;flex:none;}

.talk__bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:100vh;display:flex;align-items:center;overflow:hidden;pointer-events:none;z-index:0;}
.talk__bg-track{display:flex;width:max-content;animation:mqleft 40s linear infinite;}
.talk__bg-track span{font-weight:200;font-size:clamp(120px,22vw,340px);line-height:1;letter-spacing:-0.03em;color:rgba(245,244,240,0.05);white-space:nowrap;padding-right:0.3em;}
/* The footer is pulled up 26vh into this block, so a full-viewport z-index:2 layer
   that eats pointer events would sit right on top of the footer's link columns.
   Let clicks through the empty area; the Let's Talk anchor re-enables them below. */
.talk__inner{position:relative;z-index:2;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;pointer-events:none;}
.talk__inner a{pointer-events:auto;cursor:pointer;display:inline-block;color:var(--bone);}
.talk__inner h2{position:relative;display:inline-block;font-weight:200;letter-spacing:-0.03em;font-size:clamp(64px,13vw,200px);line-height:0.95;color:var(--bone);margin:0;cursor:pointer;
  background-image:linear-gradient(90deg,#C9A24B,#E7D9B0,#B4907A,#C9A24B);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--bone);transition:-webkit-text-fill-color .5s ease;}
.talk__inner a:hover h2{-webkit-text-fill-color:transparent;animation:paint 3s linear infinite;}
.talk__inner h2::after{content:'';position:absolute;left:0;right:0;bottom:0.06em;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#C9A24B,#E7D9B0,#B4907A,#C9A24B);background-size:300% 100%;
  transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(0.22,1,0.36,1);}
.talk__inner a:hover h2::after{transform:scaleX(1);transform-origin:left center;animation:paint 3s linear infinite;}

/* z-index 3 keeps the footer above the z-index 2 Let's Talk layer it tucks under,
   so its links both paint and hit-test correctly. */
.footer{position:relative;z-index:3;background:var(--dark);color:rgba(245,244,240,0.7);padding:clamp(56px,9vh,96px) var(--pad,64px) 0;}
.footer__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(56px,9vh,96px);border-bottom:1px solid var(--hair-d);}
.footer__col .h{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mid);margin-bottom:22px;}
.footer__col a{display:block;font-weight:300;font-size:16px;color:var(--bone);margin-bottom:12px;}
/* Footer links echo the Let's Talk treatment: warm gold, with an underline that
   sweeps in. Deliberately transform/colour only — the gradient text-fill used on
   the Let's Talk heading is far too expensive to run on every footer link while
   the whole group is being transformed on scroll. */
.footer__col a .fl{position:relative;display:inline-block;transition:color .35s ease;}
.footer__col a .fl::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,#C9A24B,#E7D9B0,#B4907A);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s cubic-bezier(0.22,1,0.36,1);}
.footer__col a:hover .fl,.footer__col a:focus-visible .fl{color:#E7D9B0;}
.footer__col a:hover .fl::after,.footer__col a:focus-visible .fl::after{transform:scaleX(1);transform-origin:left center;}
.footer__col a:focus-visible{outline:none;}
.footer__col span.t{display:block;font-weight:300;font-size:16px;line-height:1.6;color:rgba(245,244,240,0.7);white-space:nowrap;}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;}.footer__col span.t{white-space:normal;}}
.footer__bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:28px 0 40px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.16em;font-size:11px;color:var(--mid);}

@media(max-width:768px){ .talk__inner h2{font-size:clamp(48px,15vw,120px);} }