/* closing, design A: the sign-off sheet (js/sections/contact-a.js).
   ONE box: the card. Nothing inside it is boxed again: rows, labels and hairlines tell what belongs together,
   and the fields of the enquiry are lines to write on, like a form on paper.
   Text comes in four styles only: the title; a lead (his name, the heading of the form); body (--t-body, 400,
   or 500 in white for a value); small (--t-small). Labels are one style, mono capitals in mint.
   --warn marks a missing answer: it colours lines and markers, never text. Nothing is pale.
   Everything is scoped under .end-a. */
.end.end-a{--warn:#ff8f7a;--edge:rgba(182,222,200,.55);--hair:rgba(182,222,200,.24);--t-body:1.0625rem;--t-small:.95rem;--gut:clamp(24px,3.6vw,60px);text-align:left;padding-bottom:clamp(40px,7vh,80px)}
.end-a p{margin:0;max-width:none}
.end-a [hidden]{display:none!important}
.end-a .close{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:clamp(22px,4vw,60px);border-radius:clamp(24px,3vw,38px);border-color:rgba(16,201,139,.55);
  background:linear-gradient(150deg,rgba(16,201,139,.16),rgba(10,21,16,.82) 44%);box-shadow:0 0 0 1px rgba(16,201,139,.12),0 50px 130px -70px rgba(16,201,139,.7)}
/* one style for every label of the sheet: the rows of the signature and the fields of the form */
.end-a .fact dt,.end-a .fld__label{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--mint)}

/* the signature */
/* the signature is as tall as the form beside it: its rows share the room that is left */
.end-a .sign{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(20px,3.4vh,36px);min-width:0;padding-right:var(--gut)}
.end-a .sign__who{display:flex;align-items:center;gap:18px}
.end-a .sign__face{position:relative;flex:none;width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid var(--em);background:#07110d;box-shadow:0 0 26px rgba(16,201,139,.35)}
/* the same photograph as the opening, framed on the face by cropping only: no tint, no fade.
   The three numbers belong to this photograph: a new one needs its own. */
.end-a .sign__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform-origin:48% 47%;transform:scale(4.6)}
.end-a .sign__who b{display:block;font-size:1.4rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#fff}
.end-a .sign__who p>span{display:block;margin-top:.25em;font-size:var(--t-body)}
.end-a .sign__base{white-space:nowrap} /* the flag never leaves its city */
.end-a .sign__who .flag{margin-left:.25em}
.end-a h2{max-width:none;margin:0;font-size:clamp(2.4rem,5.4vw,4.8rem)}

/* labelled rows, ruled like the lines of a CV */
.end-a .facts{display:grid;margin:0}
@media (min-width:1241px){.end-a .facts{grid-auto-rows:1fr}} /* beside the form, the rows share its height */
.end-a .fact{display:grid;grid-template-columns:6.4rem minmax(0,1fr);column-gap:clamp(14px,2vw,28px);align-items:center;min-height:72px;padding:12px 0;border-top:1px solid var(--hair)}
.end-a .fact:last-child{border-bottom:1px solid var(--hair)}
.end-a .fact dd{margin:0;min-width:0;font-size:var(--t-body);font-weight:500;color:#fff}
.end-a .fact dd b{font-weight:500}
/* the club: its crest, its name with the dates beside it, and under them the squad on the full width */
.end-a .fact__club{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"crest org now" "crest role role";align-items:center;gap:2px 14px}
.end-a .fact__crest{grid-area:crest;display:grid;place-items:center;width:44px;height:50px;font-size:1.7rem;color:var(--em)}
.end-a .fact__txt{display:contents}
.end-a .fact__txt>b{grid-area:org}
.end-a .fact__txt>span{grid-area:role;font-weight:400;color:var(--tx)}
.end-a .fact__txt>span>span{white-space:nowrap}
.end-a .fact .now{grid-area:now;margin:0}

/* an address: it opens the mail program, or is copied */
.end-a .routes{list-style:none;margin:0;padding:0;display:grid}
.end-a .route{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px}
.end-a .route a{display:inline-flex;align-items:center;min-height:40px;min-width:0}
.end-a .route b{font-weight:500;overflow-wrap:anywhere;color:#fff;text-decoration:underline transparent;text-decoration-thickness:1.5px;text-underline-offset:.3em;transition:text-decoration-color .3s}
.end-a .route a:hover b{text-decoration-color:var(--em)}
.end-a .copy{display:inline-flex;align-items:center;gap:.45em;flex:none;min-height:40px;padding:0 .2em;font-size:var(--t-small);font-weight:500;color:var(--mint);transition:color .25s}
.end-a .copy:hover{color:#fff}
.end-a .copy.ok,.end-a .btn.ok{color:var(--pos)}
.end-a .copy .ic{font-size:1.05rem}

/* the channels, each with its own mark */
.end-a .nets{display:flex;flex-wrap:wrap;gap:2px clamp(18px,2.6vw,34px)}
.end-a .net{display:inline-flex;align-items:center;gap:.6em;min-height:44px;color:#fff}
.end-a .net span{text-decoration:underline transparent;text-decoration-thickness:1.5px;text-underline-offset:.3em;transition:text-decoration-color .3s}
.end-a .net:hover span{text-decoration-color:var(--em)}
.end-a .net__mark{display:block;flex:none;width:24px;height:24px;transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.end-a .net:hover .net__mark{transform:scale(1.18) rotate(-6deg)}

/* the brand: its mark and its name as they stand at the top of the page, and the way there */
.end-a .idp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:48px}
.end-a .idp>.ic{font-size:1.9rem;color:var(--em);transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.end-a .idp:hover>.ic{transform:rotate(-8deg) scale(1.1)}
.end-a .idp__txt b{display:flex;align-items:center;gap:.6em;letter-spacing:.04em;color:#fff}
.end-a .idp__txt b .ic{font-size:1rem;color:var(--em);transition:transform .4s var(--ease)}
.end-a .idp:hover .idp__txt b .ic{transform:translateX(4px)}
.end-a .idp__txt b i{font-style:normal;color:var(--em)}
.end-a .idp__txt>span{display:block;font-weight:400;color:var(--tx)}

/* the enquiry: beyond a hairline, a guided form. Three numbered steps on a rail say what to do and in what
   order; the number of a step turns into a tick when its answers are in. The fields are lines to write on,
   each with its sign and an example of what goes there: the example is mint, what the visitor writes is white. */
.end-a .enq{position:relative;display:grid;min-width:0;padding-left:var(--gut);border-left:1px solid var(--hair)}
.end-a .enq h3{margin:0;font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:300;letter-spacing:-.025em;line-height:1.15;outline:none}
.end-a .enq h3 em{font-style:normal;color:var(--em)}
.end-a .enq__form{--step-gap:clamp(20px,3vh,30px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--step-gap)}
.end-a .enq__head{display:grid;gap:10px}
.end-a .enq__head p{font-size:var(--t-body)}
.end-a .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--step-gap)}
.end-a .step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:clamp(12px,1.4vw,18px)}
/* the rail: a hairline from under each number to just above the next */
.end-a .step:not(:last-child)::before{content:"";position:absolute;left:15.5px;top:40px;bottom:calc(8px - var(--step-gap));width:1px;background:var(--hair)}
.end-a .step__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--em);font-family:var(--mono);font-size:.85rem;color:#fff;transition:background .3s}
.end-a .step__n>*{grid-area:1/1}
.end-a .step__n b{font-weight:500}
.end-a .step__n .ic{font-size:1rem;color:var(--ink);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.end-a .step.done .step__n{background:var(--em)}
.end-a .step.done .step__n b{visibility:hidden}
.end-a .step.done .step__n .ic{transform:none}
.end-a .step__body{display:grid;align-content:start;gap:clamp(12px,1.8vh,18px);min-width:0}
.end-a .step:last-child .step__body{grid-template-rows:auto minmax(0,1fr);align-content:stretch}
.end-a .step__t{display:flex;flex-wrap:wrap;align-items:center;gap:0 .7em;min-height:32px;font-size:var(--t-body)}
.end-a .step__t b{font-weight:500;color:#fff}
.end-a .enq__two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px)}
.end-a .fld{display:grid;align-content:start;gap:2px;min-width:0}
.end-a .fld>.fld__label{display:flex;flex-wrap:wrap;gap:0 .9em} /* "optional" drops under a long label, flush left */
.end-a .fld__label>i{font-style:normal;color:#fff}
.end-a .fld__in{display:flex;align-items:center;gap:.7em;border-bottom:1.5px solid var(--edge);cursor:text;transition:border-color .25s,box-shadow .25s}
.end-a .fld__in>.ic{font-size:1.15rem;color:var(--mint);transition:color .25s}
.end-a .fld__in input,.end-a .fld__in textarea,.end-a .enq__text{display:block;flex:1;width:100%;min-width:0;margin:0;font:inherit;font-size:var(--t-body);font-weight:500;color:#fff;background:none;border:0;border-radius:0;outline:none;padding:.5em 0 .55em}
.end-a .fld ::placeholder{font-weight:400;color:var(--mint);opacity:1}
.end-a .fld__in:hover{border-bottom-color:var(--mint)}
.end-a .fld__in:focus-within{border-bottom-color:var(--em);box-shadow:0 1.5px 0 0 var(--em)}
.end-a .fld__in:focus-within>.ic{color:var(--em)}
/* the message is written on ruled lines, one under each line of text; they move with the text */
.end-a .fld__in--area{align-items:flex-start;border-bottom:0}
.end-a .fld__in--area:focus-within{box-shadow:none}
.end-a .fld__in--area>.ic{margin-top:.5em}
.end-a .fld__in textarea,.end-a .enq__text{padding:0;line-height:2.1;resize:vertical;min-height:6.3em;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2.1em - 1.5px),var(--rule,var(--edge)) calc(2.1em - 1.5px),var(--rule,var(--edge)) 2.1em) local}
.end-a .fld__in textarea:focus-visible,.end-a .enq__text:focus-visible{--rule:var(--em)}
/* the form is as tall as the signature: the message takes the room that is left */
.end-a .fld--grow{grid-template-rows:minmax(0,1fr) auto}
.end-a .fld--grow .fld__in,.end-a .fld--grow textarea{height:100%}
/* a browser that fills a field in must not paint it: the line stays a line */
.end-a .fld input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 99999s}
.end-a .fld.bad .fld__in{border-bottom-color:var(--warn);box-shadow:0 1.5px 0 0 var(--warn)}
.end-a .fld.bad .fld__in>.ic{color:var(--warn)}
.end-a .fld__err,.end-a .enq__status{display:flex;align-items:flex-start;gap:.6em;margin-top:4px;font-size:var(--t-small);font-weight:500;color:#fff}
.end-a .fld__err:empty{display:none}
.end-a .fld__err::before,.end-a .enq__status::before{content:"";flex:none;width:.62em;height:.62em;margin-top:.45em;border-radius:50%;background:var(--warn)}
.end-a .fld__count{justify-self:end;margin-top:2px;font-size:var(--t-small)}
.end-a .fld__count b{font-weight:500;color:#fff}
/* the choices are real radio buttons: a ring that fills with a tick, and the words beside it */
.end-a .picks{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,30px)}
.end-a .pick{position:relative;display:inline-flex;align-items:center;gap:.65em;min-height:44px;font-size:var(--t-body);cursor:pointer}
.end-a .pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.end-a .pick i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--edge);color:var(--ink);transition:background .25s,border-color .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.end-a .pick i .ic{font-size:.8rem;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.end-a .pick:hover i{border-color:var(--mint)}
.end-a .pick input:checked~i{background:var(--em);border-color:var(--em);transform:scale(1.08)}
.end-a .pick input:checked~i .ic{transform:none}
.end-a .pick input:checked~span{font-weight:500;color:#fff}
.end-a .pick input:focus-visible~i{outline:2px solid var(--mint);outline-offset:3px}
.end-a .fld.bad .pick i{border-color:var(--warn)}
/* the trap for bots: in the page, out of sight and out of reach */
.end-a .enq__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the notice, the button across the column, and under it what happens when it is pressed */
.end-a .enq__send{display:grid;gap:14px}
.end-a .enq__send>p{font-size:var(--t-small);line-height:1.5}
.end-a .enq__send .btn{justify-content:space-between;min-height:56px;padding-left:1.5em;font-size:var(--t-body)}
.end-a .enq__send .btn .ic{transition:transform .4s var(--ease)}
.end-a .enq__send .btn:hover .ic{transform:translateX(3px)}
.end-a .enq__next{display:grid;gap:6px;margin-top:4px}
.end-a .enq__next ol{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;gap:2px}
.end-a .enq__next li{counter-increment:n;display:grid;grid-template-columns:1.6em minmax(0,1fr);font-size:var(--t-small);line-height:1.5}
.end-a .enq__next li::before{content:counter(n);font-family:var(--mono);font-weight:500;color:var(--em)}

/* what happened, and what to do if nothing opened */
.end-a .enq__done{display:grid;gap:16px;justify-items:start;align-content:start}
.end-a .enq__ok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--pos);color:#071d12;font-size:1.7rem;box-shadow:0 0 32px rgba(79,209,139,.5);animation:end-pop .7s cubic-bezier(.3,1.6,.5,1) .1s backwards}
@keyframes end-pop{from{transform:scale(.4) rotate(-20deg)}}
.end-a .enq__done p{font-size:var(--t-body)}
.end-a .enq__done b{font-weight:500;color:#fff}
.end-a .enq__else{display:grid;gap:12px;justify-items:start;width:100%;margin-top:6px;padding-top:18px;border-top:1px solid var(--hair)}
.end-a .enq__else .routes{width:100%;padding:4px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.end-a .enq__else .btn{font-size:var(--t-small)}
.end-a .back{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-size:var(--t-body);font-weight:500;color:var(--mint);transition:color .25s}
.end-a .back:hover{color:#fff}
.end-a .flip{display:inline-grid;transform:rotate(180deg)}

/* the last line of the page */
.end-a .close__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;font-size:var(--t-body)}
.end-a .close__end .up{display:inline-grid;transform:rotate(180deg)}

/* one column: the form follows the last row of the signature, whose rule divides them */
@media (max-width:1240px){
  .end-a .close{grid-template-columns:minmax(0,1fr)}
  .end-a .sign{padding-right:0}
  .end-a .enq{padding:clamp(28px,5vh,44px) 0 0;border-left:0}
}
/* a phone: each label above what it names, the fields one under the other */
@media (max-width:560px){
  .end-a .sign__face{width:64px;height:64px}
  .end-a .fact{grid-template-columns:minmax(0,1fr);row-gap:4px;align-items:start;min-height:0;padding:14px 0}
  .end-a .fact__club{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"crest org" "crest role" "crest now"}
  .end-a .fact__crest{align-self:start}
  .end-a .fact__txt>span>span{white-space:normal}
  .end-a .fact .now{justify-self:start;margin-top:6px}
  /* an address keeps to one line: its copy button is the icon alone (its name stays for screen readers) */
  .end-a .route .copy{width:40px;justify-content:center;padding:0}
  .end-a .route .copy span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .end-a .enq__two{grid-template-columns:minmax(0,1fr)}
  .end-a .picks{display:grid}
}