/* ============================================================================
   COFFEE FESTIVAL EUROPE — Contact page
   ----------------------------------------------------------------------------
   Everything here is namespaced k*, on purpose. Three class collisions during
   this build (.city, .footer__top, .band) all came from a new component taking
   a name that already meant something else in main.css, so nothing on this
   page borrows a generic word.
   ========================================================================= */

/* ---------- 1. THE ROUTER ------------------------------------------------ */
.kdesk__wrap{margin-top:clamp(22px,3vw,38px)}

.kroles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,1.8vw,22px)}
.krole{position:relative;overflow:hidden;padding:.72rem 1.15rem;border-radius:999px;
  border:1px solid rgba(244,238,228,.14);background:rgba(244,238,228,.03);
  color:var(--bone);cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.11em;line-height:1;
  transition:color .4s var(--e-out-cubic),border-color .4s var(--e-out-cubic),
             background .4s var(--e-out-cubic),transform .5s var(--e-out-expo)}
.krole span{position:relative;z-index:1}
/* the ember wash slides up from the bottom edge, like the brew in the buttons */
.krole::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(226,85,30,.9),rgba(179,62,22,.95));
  transform:translateY(101%);transition:transform .6s var(--e-out-expo)}
.krole:hover{color:var(--ivory);border-color:rgba(226,85,30,.4);transform:translateY(-2px)}
.krole.is-on{color:#fff;border-color:transparent}
.krole.is-on::before{transform:translateY(0)}
.krole:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.kpanel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,54px);
  padding:clamp(22px,3vw,44px);border-radius:clamp(18px,2vw,28px);
  border:1px solid rgba(244,238,228,.1);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(226,85,30,.12),rgba(226,85,30,0) 58%),
    rgba(244,238,228,.035)}
.kpanel[hidden]{display:none}
.kpanel.is-in{animation:kpanelIn .68s var(--e-out-expo) both}
@keyframes kpanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.kpanel__k{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember)}
.kpanel__h{margin-top:.7em;font-family:var(--f-display);font-weight:750;font-stretch:106%;
  font-size:clamp(1.3rem,2vw,1.95rem);line-height:1.12;letter-spacing:-.015em;color:var(--ivory)}
.kpanel__b{margin-top:.85em;font-size:clamp(.9rem,1vw,1rem);line-height:1.66;
  color:var(--bone);opacity:.84;max-width:46ch}

.kpanel__addr{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(16px,2vw,24px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(244,238,228,.1)}
.kpanel__lab{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.kpanel__addr a{font-family:var(--f-mono);font-size:clamp(.86rem,1.05vw,1.02rem);
  letter-spacing:.02em;color:var(--ivory);
  text-decoration:underline;text-decoration-color:rgba(226,85,30,.5);
  text-underline-offset:.28em;transition:text-decoration-color .35s,color .35s}
.kpanel__addr a:hover{color:var(--ember-lo);text-decoration-color:var(--ember)}

.kpanel__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:clamp(14px,1.8vw,22px)}

/* ---------- 2. COPY BUTTON ---------------------------------------------- */
.kcopy{display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem .95rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,238,228,.16);background:rgba(244,238,228,.03);
  color:var(--bone);
  font-family:var(--f-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.11em;line-height:1;
  transition:color .35s,border-color .35s,background .35s,transform .5s var(--e-out-expo)}
.kcopy svg{width:14px;height:14px;display:block}
.kcopy:hover{color:var(--ivory);border-color:rgba(226,85,30,.4);transform:translateY(-2px)}
.kcopy:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.kcopy.is-copied{color:var(--ember-lo);border-color:rgba(226,85,30,.55);
  background:rgba(226,85,30,.12)}
.kcopy.is-copied .kcopy__i{transform:scale(1.15) rotate(-8deg)}
.kcopy__i{transition:transform .5s var(--e-out-expo)}

/* ---------- 3. THE THREE COLUMNS ---------------------------------------- */
.kpanel__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);align-content:start}
.kcol__h{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:.7em;border-bottom:1px solid rgba(244,238,228,.1)}
.kcol__list,.kcol__steps{margin:1em 0 0;padding:0;display:grid;gap:.72em;list-style:none;
  counter-reset:kstep}
.kcol__list li,.kcol__steps li{position:relative;padding-left:1.6rem;
  font-size:clamp(.84rem,.94vw,.94rem);line-height:1.58;color:var(--bone);opacity:.84}
/* a small ember tick for the checklist */
.kcol__list li::before{content:'';position:absolute;left:0;top:.42em;
  width:.62rem;height:.34rem;border-left:1.6px solid var(--ember);
  border-bottom:1.6px solid var(--ember);transform:rotate(-45deg)}
/* numbered, in the mono face, for the sequence */
.kcol__steps li{counter-increment:kstep}
.kcol__steps li::before{content:counter(kstep,decimal-leading-zero);
  position:absolute;left:0;top:.12em;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ember)}

.kcol--reply{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:.9rem}
.kcol--reply .kcol__h{flex:none;border:0;padding:0}
.kcol__big{font-family:var(--f-display);font-weight:750;font-stretch:104%;
  font-size:clamp(1rem,1.4vw,1.32rem);letter-spacing:-.01em;color:var(--ivory)}
/* three dots that breathe, so the promise does not read as static furniture */
.kcol__pulse{display:inline-flex;gap:5px;align-items:center}
.kcol__pulse i{width:5px;height:5px;border-radius:50%;background:var(--ember);
  opacity:.3;animation:kpulse 1.9s ease-in-out infinite}
.kcol__pulse i:nth-child(2){animation-delay:.22s}
.kcol__pulse i:nth-child(3){animation-delay:.44s}
@keyframes kpulse{0%,100%{opacity:.24;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- 4. ADDRESS CARDS -------------------------------------------- */
.kaddr{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.kcard{gap:.6rem}
.kcard__foot{position:relative;z-index:1;margin-top:auto;padding-top:.9rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  border-top:1px solid rgba(244,238,228,.1)}
.kcard__mail{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.04em;
  color:var(--ember-lo);word-break:break-all;transition:color .35s}
.kcard__mail:hover{color:var(--ivory)}

/* ---------- 5. THE PROMISE ---------------------------------------------- */
.kpl__grid{display:grid;gap:clamp(14px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.kpl__item{position:relative;overflow:hidden;padding:clamp(20px,2.4vw,32px);
  border-radius:clamp(14px,1.4vw,22px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03);
  transition:border-color .5s var(--e-out-cubic),transform .6s var(--e-out-expo)}
.kpl__item::after{content:'';position:absolute;inset:auto -30% -70% auto;width:70%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(226,85,30,.2),transparent 68%);
  opacity:0;transition:opacity .6s var(--e-out-cubic);pointer-events:none}
.kpl__item:hover{border-color:rgba(226,85,30,.34);transform:translateY(-4px)}
.kpl__item:hover::after{opacity:.85}
.kpl__n{position:relative;z-index:1;font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--ember-lo),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kpl__t{position:relative;z-index:1;margin-top:.7em;font-weight:650;color:var(--ivory);
  font-size:clamp(.98rem,1.1vw,1.1rem)}
.kpl__b{position:relative;z-index:1;margin-top:.5em;
  font-size:clamp(.84rem,.94vw,.94rem);line-height:1.6;color:var(--bone);opacity:.78}

/* ---------- 6. POST & OFFICE -------------------------------------------- */
.kof__grid{display:grid;gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.kof__card{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px);
  border-radius:clamp(16px,1.6vw,24px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03)}
.kof__t{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ember)}
.kof__b{margin-top:.9em;font-size:clamp(.86rem,.96vw,.96rem);line-height:1.66;
  color:var(--bone);opacity:.82}
.kof__dl{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.55em 1.4em;margin:clamp(18px,2.2vw,28px) 0 0;
  padding-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(244,238,228,.1)}
.kof__dl dt{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.kof__dl dd{margin:0;font-size:clamp(.86rem,.94vw,.94rem);line-height:1.62;
  color:var(--bone);opacity:.9}
.kof__dl dd a{color:var(--ember-lo);text-decoration:underline;text-underline-offset:.22em;
  transition:color .3s}
.kof__dl dd a:hover{color:var(--ivory)}
.kof__link{margin-top:auto;padding-top:clamp(18px,2vw,26px);
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);transition:color .35s}
.kof__link svg{width:13px;height:13px;transition:transform .55s var(--e-out-expo)}
.kof__link:hover{color:var(--ivory)}
.kof__link:hover svg{transform:translate(3px,-3px)}

.kclock{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .9rem;
  margin-top:clamp(18px,2.2vw,28px);padding:clamp(14px,1.6vw,20px);
  border-radius:14px;border:1px solid rgba(226,85,30,.24);
  background:rgba(226,85,30,.07)}
.kclock__lab,.kclock__tz{font-family:var(--f-mono);font-size:var(--t-small);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kclock__v{font-family:var(--f-mono);font-size:clamp(1.3rem,2.2vw,1.85rem);
  letter-spacing:.06em;line-height:1;color:var(--ivory);
  font-variant-numeric:tabular-nums}

/* ---------- 7. TAIL ------------------------------------------------------ */
.kdp{margin-top:clamp(20px,2.6vw,32px);display:flex;flex-wrap:wrap;gap:.6rem;
  font-size:clamp(.82rem,.9vw,.9rem);color:var(--bone);opacity:.72}
.kdp a{color:var(--ember-lo);text-decoration:underline;text-underline-offset:.22em;
  transition:color .3s}
.kdp a:hover{color:var(--ivory)}

.kapply__box{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:clamp(20px,3vw,44px);
  padding:clamp(24px,3.2vw,48px);border-radius:clamp(18px,2vw,28px);
  border:1px solid rgba(226,85,30,.26);
  background:
    radial-gradient(110% 160% at 0% 0%,rgba(226,85,30,.16),rgba(226,85,30,0) 60%),
    rgba(244,238,228,.035)}
.kapply__h{font-family:var(--f-display);font-weight:750;font-stretch:106%;
  font-size:clamp(1.3rem,2.2vw,2.1rem);line-height:1.1;letter-spacing:-.02em;color:var(--ivory)}
.kapply__b{margin-top:.7em;max-width:56ch;font-size:clamp(.88rem,.98vw,.98rem);
  line-height:1.64;color:var(--bone);opacity:.82}

/* ---------- 8. NARROW ---------------------------------------------------- */
@media (max-width:960px){
  .kpanel{grid-template-columns:1fr}
  .kpanel__cols{grid-template-columns:1fr}
  .kcol--reply{grid-column:auto}
  .kof__dl{grid-template-columns:1fr;gap:.2em}
  .kof__dl dd{margin-bottom:.7em}
}
@media (max-width:640px){
  .kroles{gap:6px}
  .krole{padding:.62rem .9rem}
  .kapply__box{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .kpanel.is-in{animation:none}
  .kcol__pulse i{animation:none;opacity:.6}
}