/* ==========================================================================
   ADIGART. Guerrilla couture.
   Ground: bitume. Ink: craie. Accent: etain sauge, the only non neutral note.
   ========================================================================== */

:root{
  --bitume:#0B0C0A;
  --fumee:#151613;
  --ivoire:#EDEAE0;
  --craie:#F7F5EE;
  --gris:#8A897E;
  --etain:#A9A69A;
  --olive:#4C4A38;
  /* the one saturated note on the whole site, spent on the last call to action */
  --signal:#E8391D;

  --d-display:"Tanker", Impact, "Haettenschweiler", sans-serif;
  --d-body:"Cabinet Grotesk", Georgia, serif;
  --d-mono:"Martian Mono", ui-monospace, "SFMono-Regular", monospace;

  --pad:clamp(20px, 3.8vw, 72px);
  --gap:clamp(72px, 10vh, 140px);
  --ease:cubic-bezier(.83,0,.17,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lock,body.lock{overflow:hidden}

body{
  margin:0;
  background:var(--bitume);
  color:var(--craie);
  font-family:var(--d-body);
  /* one notch out from the previous default, so more of the page reads at once */
  font-size:clamp(14.5px,.95vw,16.2px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%;display:block}

.wrap{
  max-width:1620px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--craie);color:var(--bitume);
  padding:12px 22px;border-radius:999px;
  font-family:var(--d-mono);font-size:.7rem;text-decoration:none;
  transition:top .3s var(--ease-soft);
}
.skip:focus-visible{top:16px}

:focus-visible{outline:2px solid var(--etain);outline-offset:4px;border-radius:2px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--d-mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris);
  margin:0 0 clamp(20px,3vw,36px);
}

.work__h{
  font-family:var(--d-display);
  font-size:clamp(3rem,9.9vw,9rem);
  line-height:.85;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 clamp(40px,6vh,88px);
}

/* ---------- line reveal. CSS owns visibility, JS only adds the class ------ */
.ln{display:block;overflow:hidden;padding-bottom:.02em}
.ln__i{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform .95s var(--ease);
  will-change:transform;
}
.split p .ln__i,p.split .ln__i,.mani__cols .ln__i{padding-bottom:.14em}
.ln.is-shown .ln__i,.is-shown > .ln__i{transform:translate3d(0,0,0)}

/* ---------- buttons. Asymmetric capsule, liquid glass ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;
  font-family:var(--d-mono);
  font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--craie);
  padding:14px 30px;
  background:transparent;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.btn > span{position:relative;z-index:3;display:block;transition:color .45s var(--ease-soft)}
/* the glass shell */
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(247,245,238,.16),rgba(247,245,238,.05));
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(247,245,238,.26);
  border-radius:999px;
  transition:border-color .45s var(--ease-soft);
}
/* the fill: the pill simply becomes solid chalk. No wipe, no shutter, it
   just arrives, which is the only version of this that reads as expensive. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--craie);
  border-radius:999px;
  opacity:0;
  transition:opacity .42s var(--ease-soft);
}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn:hover > span,.btn:focus-visible > span{color:var(--bitume)}
.btn:hover::before,.btn:focus-visible::before{border-color:rgba(247,245,238,.55)}
/* the inner top highlight rides above the glass but under the fill */
.btn .sheen{
  position:absolute;left:12%;right:12%;top:1px;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(247,245,238,.7),transparent);
  transition:opacity .4s var(--ease-soft);pointer-events:none;
}
.btn:hover .sheen{opacity:0}
.btn--big{padding:19px 42px;font-size:.7rem}
@media (prefers-reduced-transparency:reduce){
  .btn::before{background:var(--fumee);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--olive)}
}
@media (prefers-reduced-motion:reduce){
  .btn::after{transition:opacity .01ms}
}

/* secondary: rule that draws itself */
.ul{
  position:relative;
  font-family:var(--d-mono);
  font-size:.66rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;
  padding-bottom:6px;
  transition:color .45s var(--ease-soft);
}
.ul::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--etain);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.ul:hover,.ul:focus-visible{color:var(--craie)}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1)}

/* ---------- preloader ---------- */
.pre{
  position:fixed;inset:0;z-index:150;
  background:radial-gradient(circle at 50% 50%,rgba(11,12,10,.28),rgba(11,12,10,.86) 78%);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease-soft);
}
.pre.is-out{opacity:0}
.pre.is-out{pointer-events:none}
.pre__star{width:64px;opacity:.25;animation:breathe 2.4s var(--ease-soft) infinite alternate}
.pre__num{
  position:absolute;left:var(--pad);bottom:var(--pad);
  font-family:var(--d-mono);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;color:var(--gris);
  font-variant-numeric:tabular-nums;
}
@keyframes breathe{from{opacity:.18;transform:scale(.96)}to{opacity:.6;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.pre__star{animation:none;opacity:.5}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:18px var(--pad);
  background:transparent;
  transition:background .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft), padding .5s var(--ease-soft);
}
.nav.is-stuck{
  background:rgba(11,12,10,.5);
  backdrop-filter:blur(15px) saturate(1.2);
  -webkit-backdrop-filter:blur(15px) saturate(1.2);
  padding-block:12px;
}
/* over an ivory section the bar inverts rather than smearing grey across it */
.nav.is-light.is-stuck{background:rgba(237,234,224,.62)}
.nav.is-light .nav__links a{color:var(--olive)}
.nav.is-light .nav__links a:hover{color:var(--bitume)}
.nav.is-light .nav__logo img{filter:invert(1)}
.nav.is-light .btn{color:var(--bitume)}
.nav.is-light .btn::before{
  background:linear-gradient(180deg,rgba(11,12,10,.13),rgba(11,12,10,.05));
  border-color:rgba(11,12,10,.3);
}
.nav.is-light .btn .sheen{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
/* on ivory the pill floods with ink instead of chalk */
.nav.is-light .btn::after{background:var(--bitume)}
.nav.is-light .btn:hover > span{color:var(--craie)}
.nav.is-light .btn:hover::before{border-color:rgba(11,12,10,.5)}
.nav__logo{display:block;line-height:0;flex:0 0 auto}
.nav__logo img{width:30px;height:30px;transition:transform .8s var(--ease-soft)}
.nav__logo:hover img{transform:rotate(90deg)}
.nav__links{display:flex;gap:clamp(18px,2.4vw,38px)}
.nav__links a{
  font-family:var(--d-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;
  transition:color .4s var(--ease-soft);
}
.nav__links a:hover{color:var(--craie)}
@media (max-width:720px){.nav__links{display:none}.nav__cta{padding:11px 20px;font-size:.58rem}}

/* ---------- 3D canvas. Above the page, but only present where it belongs. -- */
#cap{
  position:fixed;inset:0;z-index:6;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;
  transition:opacity .9s var(--ease-soft);
}
#cap.is-live{opacity:1}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:4;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:118px 0 0;
}
.hero__inner{padding-inline:var(--pad);text-align:center}
.hero__title{
  font-family:var(--d-display);
  font-size:clamp(3.8rem,18vw,18rem);
  line-height:.82;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  /* the cap passes BEHIND the name. The agency reads first, the object second,
     and the wordmark is never cut in half by a hat. */
  position:relative;z-index:7;
}
/* The gap under the wordmark is the cap's stage, so it is sized from the cap,
   not left over. Just enough for it to float clear of both lines. */
.hero__say{position:relative;z-index:7;margin-top:clamp(214px,29vh,320px)}
/* one line, always. The sentence is the promise; breaking it in half halves it. */
.hero__tag{
  font-size:clamp(.92rem,1.66vw,1.4rem);
  color:var(--craie);
  margin:0 auto;max-width:none;
  white-space:nowrap;
}
.hero__meta{
  font-family:var(--d-mono);
  font-size:clamp(.54rem,.72vw,.66rem);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);
  margin:18px auto 0;
}

.marq{
  position:relative;z-index:7;
  margin-top:auto;
  border-top:1px solid var(--olive);
  padding-block:clamp(14px,2.4vh,26px);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marq__row{display:flex;gap:clamp(30px,4vw,64px);width:max-content;will-change:transform}
.marq__row span{
  font-family:var(--d-display);
  font-size:clamp(1.7rem,4.1vw,3.6rem);
  line-height:1;text-transform:uppercase;letter-spacing:-.01em;
  color:transparent;
  -webkit-text-stroke:1px var(--olive);
  white-space:nowrap;
}
.scrollcue{
  position:absolute;left:var(--pad);bottom:clamp(90px,14vh,140px);z-index:7;
  font-family:var(--d-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gris);
  writing-mode:vertical-rl;
}
@media (max-width:720px){.scrollcue{display:none}.hero__say{margin-top:clamp(216px,29vh,300px)}}
@media (max-width:560px){
  .hero__tag{white-space:normal;max-width:24ch;text-wrap:balance;font-size:1rem}
}

/* ---------- showreel ---------- */
.reel{
  position:relative;z-index:4;
  height:100svh;
  overflow:hidden;
  background:var(--bitume);
}
.reel__v{width:100%;height:100%;object-fit:cover;will-change:transform}
.reel__grain{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,10,.5),transparent 28%,transparent 68%,rgba(11,12,10,.72));
  pointer-events:none;
}
.reel__label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;
  font-family:var(--d-mono);font-size:clamp(.6rem,1vw,.78rem);font-weight:600;
  letter-spacing:.44em;text-transform:uppercase;color:var(--craie);
  text-shadow:0 2px 30px rgba(11,12,10,.9);
}

/* ---------- manifesto ---------- */
.mani{
  position:relative;z-index:4;
  background:var(--ivoire);
  color:var(--bitume);
  padding-block:clamp(96px,16vh,190px);
}
.mani .eyebrow{color:var(--olive)}
.mani__big{
  font-family:var(--d-body);
  font-weight:500;
  font-size:clamp(1.3rem,3vw,2.45rem);
  line-height:1.24;
  margin:0 0 clamp(48px,7vh,90px);
  max-width:23ch;
  text-wrap:balance;
}
.mani__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,72px);
  max-width:1050px;
}
.mani__cols p{margin:0;color:#3B3C36;font-size:1.02rem;max-width:46ch}

/* ---------- films ---------- */
.work{position:relative;z-index:4;padding-block:clamp(96px,16vh,190px) 0}

/* a film block should read as roughly one and a half times the height of its
   own 16:9 frame. Anything taller and the page becomes a slideshow. */
.film{margin-bottom:clamp(56px,7vh,104px)}
.film__media{position:relative;overflow:hidden;background:var(--fumee)}
.film__media video{width:100%;height:auto;display:block}

.film--feature .film__media{
  width:min(100%,1180px);margin-inline:auto;aspect-ratio:16/9;
}
.film--feature .film__media video{height:100%;object-fit:cover}

/* a vertical film inside the campaigns run must never tower over its
   neighbours. It keeps its full 9:16 frame, uncropped, but its height is
   capped at roughly one and a half times the 16:9 films around it, so the
   width simply follows. A phone shaped window, not a monolith. */
.film--tall .film__media{
  aspect-ratio:9/16;
  height:clamp(300px,50vh,560px);
  width:auto;
  margin-inline:auto;
}
.film--tall .film__media video{width:100%;height:100%;object-fit:cover}
.film--tall{align-items:center}
.film--feature .film__txt{margin-top:clamp(20px,2.6vh,36px)}

.film--right,.film--left{
  display:grid;
  gap:clamp(24px,3vw,54px);
  align-items:end;
  padding-inline:var(--pad);
  max-width:1620px;margin-inline:auto;
}
.film--right{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.film--right .film__txt{order:1}
.film--right .film__media{order:2}
.film--left{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}

.film__name{
  font-family:var(--d-display);
  font-size:clamp(1.9rem,4.7vw,4.15rem);
  line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
  margin:0;
}
.film__sub{
  font-family:var(--d-body);
  font-size:clamp(1rem,1.7vw,1.5rem);
  font-style:italic;color:var(--etain);
  margin:.35em 0 0;
}
.film__meta{
  font-family:var(--d-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gris);
  margin:1.5em 0 0;
  padding-top:1.1em;border-top:1px solid var(--olive);
}
.film__line{margin:1.1em 0 0;color:var(--gris);max-width:44ch;font-size:.98rem}

@media (max-width:860px){
  .film--right,.film--left{grid-template-columns:1fr}
  .film--right .film__txt,.film--left .film__txt{order:2}
  .film--right .film__media,.film--left .film__media{order:1}
}

/* ---------- social ---------- */
.social{position:relative;z-index:4;padding-block:clamp(96px,16vh,190px)}
.social__intro{color:var(--gris);max-width:42ch;margin:-40px 0 clamp(44px,6vh,80px);font-size:1.02rem}
.social__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
  padding-inline:var(--pad);
  max-width:1620px;margin-inline:auto;
}
.tile{margin:0;position:relative;overflow:hidden;background:var(--fumee);aspect-ratio:9/16}
.tile video{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-soft),filter .6s var(--ease-soft);filter:saturate(.75)}
.tile:hover video{transform:scale(1.045);filter:saturate(1)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:3px;
  padding:16px 16px 15px;
  background:linear-gradient(0deg,rgba(11,12,10,.88),transparent);
  transform:translateY(4px);opacity:.9;
  transition:transform .6s var(--ease-soft),opacity .6s var(--ease-soft);
}
.tile:hover figcaption{transform:translateY(0);opacity:1}
.tile__n{font-family:var(--d-display);font-size:1.02rem;text-transform:uppercase;letter-spacing:-.01em}
.tile__m{font-family:var(--d-mono);font-size:.53rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--etain)}

/* ---------- how ---------- */
.how{position:relative;z-index:4;padding-block:clamp(80px,12vh,150px)}
.how__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--olive)}
.how__list li{
  display:grid;grid-template-columns:clamp(52px,7vw,110px) 1fr;
  gap:0 clamp(16px,3vw,44px);
  align-items:baseline;
  padding-block:clamp(22px,3.4vh,40px);
  border-bottom:1px solid var(--olive);
  transition:background .55s var(--ease-soft),padding-inline .55s var(--ease-soft);
}
.how__list li:hover{background:var(--fumee);padding-inline:clamp(10px,1.6vw,26px)}
.how__n{
  font-family:var(--d-mono);font-size:.68rem;font-weight:600;
  color:var(--etain);font-variant-numeric:tabular-nums;letter-spacing:.1em;
}
.how__list h3{
  font-family:var(--d-display);
  font-size:clamp(1.35rem,3.25vw,2.7rem);
  line-height:.95;text-transform:uppercase;letter-spacing:-.015em;
  margin:0 0 .35em;
}
.how__list p{margin:0;color:var(--gris);max-width:52ch;font-size:1rem}

/* ---------- cities ---------- */
.cities{
  position:relative;z-index:4;
  background:var(--ivoire);color:var(--bitume);
  padding:clamp(70px,11vh,140px) var(--pad) 0;
  text-align:center;overflow:hidden;
}
.cities__row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,50px);flex-wrap:nowrap;
}
.cities__c{
  font-family:var(--d-display);
  font-size:clamp(2.2rem,9vw,8.1rem);
  line-height:.86;text-transform:uppercase;letter-spacing:-.03em;
}
.cities__star{
  width:clamp(34px,5.5vw,84px);flex:0 0 auto;
  filter:invert(1);opacity:.82;
  animation:spin 62s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cities__star{animation:none}}
.cities__sub{
  font-family:var(--d-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--olive);
  max-width:56ch;margin:clamp(26px,4vh,50px) auto clamp(50px,8vh,90px);
  line-height:2;
}
.cities__camo{
  height:110px;margin-inline:calc(var(--pad) * -1);
  background:url("../img/camo-tile.jpg") center/420px repeat-x;
  opacity:.09;mix-blend-mode:multiply;
}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:4;overflow:hidden;
  padding:clamp(170px,26vh,300px) var(--pad) clamp(40px,6vh,70px);
  text-align:center;
}
.foot__ghost{
  position:absolute;left:50%;top:52%;
  width:min(115vw,1080px);
  transform:translate(-50%,-50%);
  opacity:.045;pointer-events:none;
}
.foot__in{position:relative;z-index:1}
.foot__h{
  font-family:var(--d-display);
  font-size:clamp(3.2rem,14.4vw,13.5rem);
  line-height:.84;letter-spacing:-.03em;text-transform:uppercase;
  margin:0 0 clamp(34px,5vh,64px);
}
.foot__h em{font-style:normal;transition:color .45s var(--ease-soft)}
.foot__h:hover em,.foot__h:focus-within em{color:var(--signal)}
.foot__links{display:flex;gap:clamp(22px,4vw,54px);justify-content:center;margin-top:clamp(34px,5vh,60px)}
.foot__fine{
  font-family:var(--d-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  margin:clamp(40px,6vh,72px) 0 0;
}
.foot__fine--dim{color:var(--olive);margin-top:8px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:180;display:grid;place-items:end center}
.modal[hidden]{display:none}
.modal__scrim{
  position:absolute;inset:0;
  background:rgba(11,12,10,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .6s var(--ease-soft);
}
.modal.is-open .modal__scrim{opacity:1}
.modal__card{
  position:relative;
  width:min(100%,720px);
  max-height:92svh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--olive) transparent;
  background:var(--fumee);
  border:1px solid var(--olive);border-bottom:0;
  border-radius:26px 26px 0 0;
  padding:clamp(30px,5vw,58px) clamp(22px,4vw,58px) clamp(30px,5vh,54px);
  transform:translateY(102%);
  transition:transform .78s var(--ease);
}
.modal.is-open .modal__card{transform:translateY(0)}
.modal__card::-webkit-scrollbar{width:6px}
.modal__card::-webkit-scrollbar-track{background:transparent}
.modal__card::-webkit-scrollbar-thumb{background:var(--olive);border-radius:99px}
@media (prefers-reduced-motion:reduce){
  .modal__card{transition:none;transform:none}
  .modal__scrim{transition:none;opacity:1}
}
.modal__x{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:999px;
  background:transparent;border:1px solid var(--olive);
  display:grid;place-items:center;cursor:pointer;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),transform .5s var(--ease-soft);
}
.modal__x:hover{background:var(--olive);transform:rotate(90deg)}
.modal__x svg{width:16px;height:16px;fill:none;stroke:var(--craie);stroke-width:1.5}
.modal__h{
  font-family:var(--d-display);
  font-size:clamp(1.9rem,5vw,3.3rem);
  line-height:.92;text-transform:uppercase;letter-spacing:-.02em;
  margin:0 0 clamp(26px,4vh,44px);
}

/* form */
.form{display:flex;flex-direction:column;gap:22px}
.f{position:relative}
.f input,.f textarea{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid var(--olive);
  color:var(--craie);
  font-family:var(--d-body);font-size:1.02rem;
  padding:22px 0 9px;
  border-radius:0;
  transition:border-color .45s var(--ease-soft);
}
.f textarea{resize:vertical;min-height:76px}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--etain)}
.f label{
  position:absolute;left:0;top:20px;
  font-family:var(--d-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  pointer-events:none;
  transition:transform .45s var(--ease-soft),color .45s var(--ease-soft),font-size .45s var(--ease-soft);
  transform-origin:left top;
}
.f input:focus + label,
.f input:not(:placeholder-shown) + label,
.f textarea:focus + label,
.f textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px) scale(.82);
  color:var(--etain);
}
.f--area label{top:20px}

.chips{border:0;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.chips legend{
  font-family:var(--d-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  padding:0;margin-bottom:13px;float:left;width:100%;
}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;
  font-family:var(--d-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
  padding:11px 19px;
  border:1px solid var(--olive);
  border-radius:999px;
  transition:color .4s var(--ease-soft),border-color .4s var(--ease-soft),background .4s var(--ease-soft);
}
.chip:hover span{color:var(--craie);border-color:var(--etain)}
.chip input:checked + span{
  color:var(--bitume);background:var(--etain);border-color:var(--etain);
}
.chip input:focus-visible + span{outline:2px solid var(--etain);outline-offset:3px}

.form__send{align-self:flex-start;margin-top:8px}
.form__note{
  font-family:var(--d-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--olive);margin:0;
}
.form__err{
  font-family:var(--d-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--etain);margin:0;
}
.form__ok{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(40px,8vh,80px) 0;text-align:center}
.form__ok img{width:52px;opacity:.55}
.form__ok p{margin:0;font-size:1.1rem;color:var(--craie);max-width:26ch}

@media (min-width:760px){
  .modal{place-items:center}
  .modal__card{border-radius:26px;border-bottom:1px solid var(--olive);transform:translateY(26px) scale(.985);opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease-soft)}
  .modal.is-open .modal__card{transform:translateY(0) scale(1);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ln__i{transform:none !important}
}