/* TAKE 5 · one window, one room, one screen */
#take5{--len:420svh}

/* the dark room: the poster behind the screen in static mode, and the ground under the canvas */
#take5 .stage{
  --t5-ink:#0b1034; --t5-line:rgb(243 244 250 / .16); --t5-soft:#b3b8da;
  background:
    radial-gradient(42% 30% at 84% 10%, rgb(255 180 92 / .38), transparent 70%),
    radial-gradient(60% 34% at 50% 100%, rgb(255 180 92 / .10), transparent 70%),
    radial-gradient(80% 60% at 46% 52%, rgb(44 82 209 / .30), transparent 72%),
    linear-gradient(180deg,#0b0a16 0%,#07060d 60%,#050409 100%);
  color:var(--color-paper);
}

/* ------------------------------------------------------------ the screen = the page */
#take5 .t5-screen{
  position:relative;z-index:1;display:flex;flex-direction:column;
  background:
    radial-gradient(90% 46% at 88% -8%, rgb(125 19 255 / .34), transparent 70%),
    radial-gradient(70% 40% at 6% -4%, rgb(21 191 253 / .20), transparent 70%),
    linear-gradient(180deg,#0f1650 0%,#0b1034 46%,#090c2a 100%);
  color:var(--color-paper);overflow:hidden;
}
#take5 .t5-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:auto;scrollbar-width:thin}
#take5 .t5-body{
  width:min(100% - 40px, 1120px);margin-inline:auto;
  padding-block:56px 28px;
  display:grid;gap:26px;align-content:start;
}

#take5 .t5-title{
  margin:0;font-size:clamp(2.75rem,2rem + 3.4vw,5.25rem);line-height:.98;
  font-weight:740;font-stretch:78%;letter-spacing:-.01em;color:#fff;
}
#take5 .t5-intro{margin:.55em 0 0;font-size:var(--type-body);line-height:1.5;color:var(--t5-soft);max-width:34ch}

/* the two direct ways */
#take5 .t5-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#take5 .t5-way{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 14px;border-radius:var(--radius-pill);
  border:1px solid var(--t5-line);color:var(--color-paper);text-decoration:none;
  font-size:.9375rem;font-weight:600;white-space:nowrap;
  transition:background-color .2s,border-color .2s;
}
#take5 .t5-way svg{width:19px;height:19px;flex:none}
#take5 .t5-way:hover{background:rgb(243 244 250 / .06);border-color:rgb(243 244 250 / .34)}
#take5 .t5-num{display:none;color:var(--t5-soft);font-weight:500}

/* the form: the site's own lead form (features/lead/LeadForm: validation, honeypot, privacy line,
   error, failure and success states, the /api/lead pipeline), dressed for the screen. Its module
   classes are hashed, so it is reached by structure; every rule here outranks them by the id. */
#take5 [data-lead-form]{margin:0;color:var(--color-paper)}
#take5 form[data-lead-form]{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
#take5 form[data-lead-form] > *{grid-column:1 / -1;min-width:0}
#take5 form[data-lead-form] > div:has(> input[name=name]),
#take5 form[data-lead-form] > div:has(> input[name=phone]){grid-column:auto}
#take5 form[data-lead-form] > div:has(> input):not([aria-hidden]){display:grid;gap:6px;align-content:start}
/* the honeypot stays out of sight and out of reach, as everywhere */
#take5 form[data-lead-form] > div[aria-hidden]{display:none}
#take5 label,#take5 legend{font-size:.875rem;font-weight:600;color:var(--t5-soft);letter-spacing:.01em;line-height:1.4}
#take5 form[data-lead-form] > div > label{margin:0}
#take5 input[type=text],#take5 input[type=tel],#take5 input[type=email]{
  width:100%;min-width:0;height:48px;padding:0 14px;border-radius:var(--radius-control);
  border:1px solid var(--t5-line);background:rgb(243 244 250 / .05);color:#fff;
  font:inherit;font-size:1.0625rem;transition:border-color .2s,background-color .2s;
}
#take5 input[dir=ltr]{text-align:right}
#take5 input:hover{border-color:rgb(243 244 250 / .3)}
#take5 input:focus{outline:none}
#take5 input[type=text]:focus,#take5 input[type=tel]:focus,#take5 input[type=email]:focus{
  border:1px solid var(--color-cyan);background:rgb(243 244 250 / .08);box-shadow:0 0 0 3px rgb(0 194 255 / .22);outline:none}
#take5 input[aria-invalid="true"]{border-color:#ff8a9a}
#take5 [data-lead-form] p[id$="-error"]{margin:0;color:#ff9aa8;font-size:.8125rem;font-weight:600}
#take5 [data-lead-form] p[id$="-error"]::before{color:#0b1034}

#take5 form[data-lead-form] fieldset{margin:4px 0 0;padding:0;border:0;min-width:0}
#take5 form[data-lead-form] legend{padding:0;margin:0 0 8px}
#take5 form[data-lead-form] fieldset > div{display:flex;flex-wrap:wrap;gap:8px}
#take5 form[data-lead-form] fieldset label:has(> input[type=radio]){
  position:relative;display:inline-flex;align-items:center;gap:0;min-height:0;height:36px;padding:0 14px;
  border-radius:var(--radius-pill);border:1px solid var(--t5-line);background:transparent;
  font-size:.9375rem;font-weight:500;color:var(--color-paper);letter-spacing:0;
  transition:background-color .2s,color .2s,border-color .2s;
}
#take5 form[data-lead-form] fieldset input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:inherit;opacity:0;cursor:pointer}
#take5 form[data-lead-form] fieldset label:has(> input:hover){border-color:rgb(243 244 250 / .36);background:transparent}
#take5 form[data-lead-form] fieldset label:has(> input:checked){background:var(--color-paper);color:var(--color-ink);border-color:var(--color-paper)}
#take5 form[data-lead-form] fieldset label:has(> input:focus-visible){outline:2px solid var(--color-cyan);outline-offset:2px}

#take5 form[data-lead-form] button[type=submit]{
  margin-top:6px;height:52px;min-height:0;padding:0 28px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--color-paper);color:var(--color-ink);font:inherit;font-size:1.0625rem;font-weight:700;
  transition:background-color .2s,transform .2s var(--ease-out);
}
#take5 form[data-lead-form] button[type=submit]::before{display:none}
#take5 form[data-lead-form] button[type=submit]:hover{background:#fff}
#take5 form[data-lead-form] button[type=submit]:active{transform:scale(.985)}
#take5 form[data-lead-form] button[type=submit]:focus-visible{outline:2px solid var(--color-cyan);outline-offset:3px}
#take5 form[data-lead-form] > p:last-child{margin:0;font-size:.8125rem;line-height:1.5;color:var(--t5-soft)}
#take5 form[data-lead-form] > p:last-child a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* the server could not deliver: the note and WhatsApp with the typed details */
#take5 form[data-lead-form] > div[tabindex="-1"]{padding:14px;border:1px solid #ff8a9a;border-radius:var(--radius-control);background:rgb(255 138 154 / .08);color:var(--color-paper);gap:10px}
#take5 [data-lead-form] a[target="_blank"]{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--radius-pill);
  border:1px solid var(--t5-line);background:transparent;color:var(--color-paper);font-size:.9375rem;font-weight:600;text-decoration:none}
#take5 [data-lead-form] a[target="_blank"]:hover{background:rgb(243 244 250 / .06);border-color:rgb(243 244 250 / .34)}
#take5 [data-lead-form] a[target="_blank"] svg{width:19px;height:19px;flex:none}

#take5 [hidden]{display:none !important}
/* sent: the thank-you replaces the form, focus on its title */
#take5 [data-lead-state="success"]{margin:0;padding:8px 0 12px;gap:0}
#take5 [data-lead-state="success"] > span[aria-hidden]{width:40px;height:40px;margin:0 0 14px;background:radial-gradient(circle,var(--color-cyan) 0 20%,rgb(243 244 250 / .12) 23%)}
#take5 [data-lead-state="success"] h3{margin:0;font-size:var(--type-name);line-height:1.1;font-weight:720;font-stretch:80%;color:#fff;outline:none}
#take5 [data-lead-state="success"] > p{margin:.6em 0 0;font-size:var(--type-body);line-height:1.55;color:var(--t5-soft);max-width:38ch}
#take5 [data-lead-state="success"] > div{margin-top:18px}

/* without JavaScript the form cannot send (the lead goes through script to /api/lead): it steps
   aside and says so; the direct ways above it stay */
#take5 [data-t5-nojs]{display:none}
html:not([data-js]) #take5 [data-t5-nojs]{display:block;margin:0;font-size:var(--type-body);line-height:1.55;color:var(--t5-soft)}
html:not([data-js]) #take5 [data-lead-form]{display:none}

#take5 a:focus-visible{outline:2px solid var(--color-cyan);outline-offset:2px;border-radius:6px}

/* ------------------------------------------- the footer: the screen's own bottom bar */
#take5 .t5-bar{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  padding:9px 20px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgb(4 6 22 / .72);border-top:1px solid rgb(243 244 250 / .08);
  font-size:11.5px;line-height:1.4;color:rgb(243 244 250 / .64);
}
#take5 .t5-bar a{display:inline-flex;align-items:center;min-height:24px;color:inherit;text-decoration:none;padding:3px 0}
#take5 .t5-bar a:hover{color:#fff}
#take5 .t5-barNav,#take5 .t5-barLegal{display:flex;flex-wrap:wrap;gap:4px 12px}
#take5 .t5-barEnd{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
#take5 .t5-social{display:inline-flex;justify-content:center;min-width:24px}
#take5 .t5-social svg{width:17px;height:17px}
#take5 .t5-copy{font-size:inherit;color:rgb(243 244 250 / .5)}

/* phone-width screen: nav on one line, legal + social + © on the next */
@media (max-width:767px){
  #take5 .t5-body{gap:22px}
  #take5 .t5-bar{gap:4px 12px}
  #take5 .t5-barNav{width:100%;justify-content:space-between}
  #take5 .t5-barLegal{gap:4px 10px}
}
/* short phones: tighten, the rest scrolls inside the screen */
@media (max-width:767px) and (max-height:740px){
  #take5 .t5-body{padding-top:50px;gap:16px}
  #take5 .t5-title{font-size:2.5rem}
  #take5 .t5-direct{margin-top:14px}
  #take5 form[data-lead-form]{row-gap:10px}
  #take5 input[type=text],#take5 input[type=tel],#take5 input[type=email]{height:44px}
  #take5 form[data-lead-form] button[type=submit]{height:48px}
}
@media (max-width:359px){
  #take5 form[data-lead-form]{grid-template-columns:1fr}
  #take5 .t5-way{flex-basis:100%}
}

/* desktop-width screen: the heading and the direct ways beside the form */
@media (min-width:768px){
  #take5 .t5-body{
    grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);
    align-content:center;min-height:100%;padding-block:clamp(72px,9vh,110px) 40px;
  }
  #take5 .t5-scroll{display:flex}
  #take5 .t5-scroll > .t5-body{margin-block:auto}
  #take5 .t5-direct{flex-direction:column;align-items:flex-start;margin-top:34px;max-width:320px}
  #take5 .t5-way{flex:none;width:100%;justify-content:flex-start;padding:0 18px}
  #take5 .t5-num{display:inline;margin-inline-start:auto}
  #take5 .t5-formWrap{align-self:center}
  #take5 .t5-bar{padding-inline:clamp(20px,3vw,40px);gap:6px 28px}
}

/* ---------------------------------------------------------------------- live mode */
/* before take.js mounts (or if it fails) the screen simply fills the stage */
html.jr-live #take5 .stage{background:#050409}
html.jr-live #take5 .t5-screen{position:absolute;inset:0}
/* at rest the screen is the viewport: on a phone its title starts under the header's controls and the readout */
@media (max-width:767px){html.jr-live #take5 .t5-body{padding-top:calc(var(--hud-h) + 12px)}}
/* mounted: take.js lays the screen over the device and writes transform / opacity */
html.jr-live #take5 .stage.t5-js .t5-screen{
  inset:auto;left:0;top:0;width:100%;height:100%;transform-origin:0 0;
  backface-visibility:hidden;
}
html.jr-live #take5 .stage.t5-js .t5-screen[data-moving]{pointer-events:none;will-change:transform,opacity}

/* --------------------------------------------------------------------- static mode */
html:not(.jr-live) #take5 .stage{display:grid;place-items:center;padding:clamp(12px,4vw,56px) clamp(10px,3vw,48px)}
html:not(.jr-live) #take5 .t5-screen{
  width:min(100%,1240px);min-height:min(88svh,860px);border-radius:26px;
  border:1px solid rgb(243 244 250 / .08);
  box-shadow:0 0 0 7px #07080f,0 0 0 8px rgb(243 244 250 / .06),0 30px 120px -20px rgb(44 82 209 / .55),0 0 220px rgb(21 191 253 / .12);
}
html:not(.jr-live) #take5 .t5-body{padding-top:48px}
@media (max-width:767px){
  html:not(.jr-live) #take5 .t5-screen{border-radius:22px;min-height:0}
}