/* D2 Build Sheet. Your brief assembles itself on the left as you answer.
   Charcoal, hairlines, corner brackets, a tick ruler. Schibsted Grotesk +
   JetBrains Mono, Onest body. */
:root{--bg:#141318;--ink:#F4F2F7;--dim:rgba(244,242,247,.66);--faint:rgba(244,242,247,.46);--hair:rgba(255,255,255,.12);--hair2:rgba(255,255,255,.24);--a:#8B5CF6;--b:#FF6FA8;--pink:#FF8FB8;--font:'Onest',system-ui,sans-serif;--display:'Schibsted Grotesk','Onest',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--gutter:clamp(1.25rem,4vw,4rem)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem var(--gutter);border-bottom:1px solid var(--hair)}
.wordmark{font-family:var(--display);font-weight:700;font-size:.95rem}
.plaque{display:flex;border:1px solid var(--hair2);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.plaque span{padding:.5rem .8rem}
.plaque span+span{border-left:1px solid var(--hair2)}
.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.grid{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,5vw,4rem) var(--gutter) 4rem;align-items:start}
.sheet{position:sticky;top:1.5rem}
.sheet__head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--hair2)}
.sheet__head b{color:var(--ink);font-weight:500}
.sheet__toggle{display:none;background:none;border:1px solid var(--hair2);color:var(--ink);font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding:.4rem .6rem}
.sheet__now{display:none}
.sheet__list li{position:relative;display:grid;grid-template-columns:2.4em 1fr minmax(0,46%);gap:.6rem;align-items:baseline;padding:.62rem .6rem;border-bottom:1px solid var(--hair);font-size:.9rem}
.sheet__list .n{font-family:var(--mono);font-size:.76rem;color:var(--faint)}
.sheet__list .l{color:var(--dim)}
.sheet__list .v{color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sheet__list li.is-done .l{color:var(--faint)}
.sheet__list li.is-now .l{color:var(--ink);font-weight:600}
.sheet__list li.is-now .n{color:var(--pink)}
.sheet__list li.is-now::before,.sheet__list li.is-now::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--ink)}
.sheet__list li.is-now::before{left:0;top:3px;border-right:0;border-bottom:0}
.sheet__list li.is-now::after{right:0;bottom:3px;border-left:0;border-top:0}
.ruler{display:grid;grid-template-columns:repeat(13,1fr);height:18px;margin-top:1rem;border-bottom:1px solid var(--hair2)}
.ruler i{display:block;height:45%;align-self:end;border-left:1px solid var(--hair2)}
.ruler i.on{height:100%;border-left-color:var(--pink)}
.hero{margin-bottom:clamp(1.8rem,4vw,3rem)}
.h1{font-family:var(--display);font-size:clamp(2.3rem,5.4vw,4.8rem);font-weight:700;letter-spacing:-.035em;line-height:1;max-width:12em;text-wrap:balance}
.lede{margin-top:1.2rem;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;color:var(--dim);max-width:36em}
.card{position:relative;padding:clamp(1.5rem,3.5vw,3rem);border:1px solid var(--hair);max-width:720px}
.card+.card{margin-top:2rem}
.card .c{position:absolute;width:14px;height:14px;border:1px solid var(--ink)}
.c1{top:-1px;left:-1px;border-right:0;border-bottom:0}
.c2{top:-1px;right:-1px;border-left:0;border-bottom:0}
.c3{bottom:-1px;left:-1px;border-right:0;border-top:0}
.c4{bottom:-1px;right:-1px;border-left:0;border-top:0}
.progress{height:2px;background:var(--hair);margin-bottom:2rem}
.progress__fill{background:linear-gradient(90deg,var(--a),var(--b))}
.q{display:block;font-family:var(--display);font-size:clamp(1.55rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.3rem;text-wrap:balance}
.qualify-step.active{animation:in .3s ease both}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--hair2);border-radius:0;color:var(--ink);font-size:1.05rem;padding:.9rem 1rem}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background:rgba(255,255,255,.03) var(--chev) no-repeat right 1rem center;cursor:pointer}
.field select option{background:#1a191f;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--pink)}
.field-error{font-family:var(--mono);font-size:.8rem;color:var(--pink)}
.consent{font-size:.88rem;color:var(--dim)}
.consent input{accent-color:var(--a)}
.nav{margin-top:1.6rem}
.back{background:none;border:0;padding:.5rem 0;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.back:hover{color:var(--ink)}
.continue{flex:0 0 auto;background:none;border:1px solid var(--ink);border-radius:999px;color:var(--ink);padding:.85rem 1.7rem;font-weight:600;font-size:.95rem}
.continue:hover{background:var(--ink);color:var(--bg)}
.continue:disabled{opacity:.6}
.fine{margin-top:1.6rem;font-size:.84rem;color:var(--faint)}
.booking .h2{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:.7rem}
.booking .fine{margin:0 0 1.8rem}
.cal-month{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.cal-nav button{border-color:var(--hair2);color:var(--ink);border-radius:0}
.cal-tz,.cal-wd{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);opacity:1}
.cal-grid{gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.cal-wd,.cal-day,.cal-blank{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cal-day{aspect-ratio:1.15;color:var(--ink);font-weight:500}
.cal-day.is-open:hover{background:rgba(255,255,255,.05)}
.cal-day.is-selected{background:rgba(255,255,255,.08);outline:1px solid var(--ink);outline-offset:-1px}
.cal-day.is-today{color:var(--pink)}
.cal-slot{border-color:var(--hair2);font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.cal-slot:hover{border-color:var(--ink)}
.cal-slot.is-picked{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cal-when{color:var(--dim)}
.cal-when b{color:var(--ink)}
.cal-book{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:.9rem 1.6rem;font-weight:600}
.cal-note{font-size:.92rem;color:var(--dim)}
.foot{color:var(--faint);border-top-color:var(--hair)}
.foot__brand{color:var(--ink)}
@media (max-width:900px){.grid{grid-template-columns:1fr;gap:1.5rem}.sheet{position:static;border:1px solid var(--hair);padding:.9rem 1rem}.sheet__toggle{display:inline-block}.sheet__now{display:block;margin:.7rem 0 0;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.9rem}.sheet__list,.ruler{display:none}.sheet.open .sheet__list{display:block;margin-top:.6rem}.sheet.open .ruler{display:grid}.plaque span:nth-child(3){display:none}}