/* ============================================================
   Bianca Kau · commission page
   Extends styles/main.css. Form + intake-specific styles only.
   ============================================================ */

/* the [hidden] attribute must always win: .way and .thanks set
   display:flex, which (equal specificity, author after UA) would
   otherwise override hidden and leak the WhatsApp card + thanks panel
   onto the page on load. JS toggles el.hidden to reveal them. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------- hero */
.chero {
  display: grid; grid-template-columns: 1fr 1.02fr; align-items: stretch;
  min-height: clamp(440px, 66vh, 720px);
}
@media (max-width: 900px) { .chero { grid-template-columns: 1fr; min-height: 0; } }
.chero__intro { align-self: center; max-width: 42rem; padding: clamp(2.4rem, 6vw, 4.6rem) clamp(1.4rem, 4vw, 3.2rem); }
.chero__title {
  font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; margin-top: 1.1rem;
}
.chero__title em { font-style: italic; font-weight: 500; color: var(--clay); }
.chero__lede { font-size: clamp(1.1rem, 1vw + 1rem, 1.34rem); line-height: 1.56; color: var(--ink-soft); max-width: 44ch; margin-top: 1.5rem; text-wrap: pretty; }
.chero__sig { margin-top: 1.6rem; font-style: italic; color: var(--ink-faint); font-size: 1rem; }
.chero__media { position: relative; margin: 0; overflow: hidden; background: var(--linen); min-height: 320px; }
.chero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .chero__media { height: 52vh; min-height: 340px; } }

/* ---------------------------------------------------------- ways to begin */
.begin {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.4rem) var(--pad) clamp(1.5rem, 3vw, 2.4rem);
}
.begin__head { max-width: 40ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.begin__head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.04; letter-spacing: -0.01em; margin-top: .5rem; text-wrap: balance; }

.begin__ways { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 560px) { .begin__ways { grid-template-columns: 1fr; max-width: 34rem; } }

.way {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 12px;
  background: var(--linen); border: 1px solid var(--oat);
  box-shadow: 0 18px 38px -30px rgba(60,40,16,.55);
}
.way--wa { background: var(--clay); border-color: var(--clay-deep); color: var(--cream); }
.way__tag {
  font-variant: small-caps; letter-spacing: .12em; font-size: .82rem; color: var(--ink-faint);
  border: 1px solid var(--oat); border-radius: 999px; padding: .12em .8em;
}
.way--wa .way__tag { color: color-mix(in oklab, var(--cream) 86%, var(--ochre)); border-color: color-mix(in oklab, var(--cream) 35%, transparent); }
.way__h { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.1; letter-spacing: -0.01em; }
.way__p { color: var(--ink-soft); font-size: 1rem; }
.way--wa .way__p { color: color-mix(in oklab, var(--cream) 88%, transparent); }
.way__cta { margin-top: auto; }
.way--wa .way__cta { background: var(--cream); color: var(--clay-deep); box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 10px 22px -12px rgba(0,0,0,.4); }
.way--wa .way__cta:hover { background: #fff; color: var(--clay-deep); }
.way__icon { flex: none; }
.way__cta .way__icon { margin-right: .1em; }

/* ---------------------------------------------------------- how it works */
.how { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.6rem, 6vw, 4.6rem) var(--pad); }
.how__head { max-width: 40ch; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.how__head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.8vw, 2.7rem); line-height: 1.05; letter-spacing: -0.01em; margin-top: .5rem; text-wrap: balance; }
.how__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (max-width: 820px) { .how__steps { grid-template-columns: 1fr; max-width: 34rem; } }
.how__steps li { padding-top: 1.3rem; border-top: 1.5px solid var(--rule); }
.how__no { font-family: var(--display); font-style: italic; font-size: 1.8rem; color: var(--clay); line-height: 1; display: block; margin-bottom: .5rem; }
.how__steps li:nth-child(2) .how__no { color: var(--sage); }
.how__steps li:nth-child(3) .how__no { color: var(--ochre); }
.how__steps h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin-bottom: .35rem; letter-spacing: -0.01em; }
.how__steps p { color: var(--ink-soft); max-width: 42ch; }

/* ---------------------------------------------------------- form */
.form-wrap {
  max-width: 880px; margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 4rem) var(--pad) clamp(3.4rem, 8vw, 6rem);
}
.form-intro { max-width: 48ch; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.form-intro__title { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.02; letter-spacing: -0.01em; margin-top: .5rem; text-wrap: balance; }
.form-intro__note { margin-top: 1rem; color: var(--ink-soft); }

.cform {
  background: color-mix(in oklab, var(--linen) 70%, var(--cream));
  border: 1px solid var(--oat); border-radius: 16px;
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: 0 30px 60px -42px rgba(60,40,16,.55);
}
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cform__set { border: 0; padding: 0; margin: 0 0 clamp(1.8rem, 3.6vw, 2.6rem); }
.cform__set:last-of-type { margin-bottom: 0; }
.cform__legend {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink); letter-spacing: -0.01em;
  padding: 0 0 1rem; display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
}
.cform__legend-opt { font-family: var(--text); font-style: normal; font-size: .8rem; font-variant: small-caps; letter-spacing: .12em; color: var(--ink-faint); }

.cform__row { display: grid; gap: 1.1rem; }
.cform__row + .cform__row { margin-top: 1.1rem; }
.cform__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .cform__row--2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .42rem; }
.field label { font-size: .98rem; color: var(--ink); font-weight: 500; letter-spacing: .01em; }
.field .req { color: var(--clay); }
.field__opt, .field .field__opt { font-weight: 400; font-variant: small-caps; letter-spacing: .1em; font-size: .8rem; color: var(--ink-faint); margin-left: .35em; }
.field__hint { font-size: .86rem; color: var(--ink-faint); line-height: 1.45; }

.field input, .field select, .field textarea {
  font-family: var(--text); font-size: 1.04rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--oat); border-radius: 10px;
  padding: .72em .9em; width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 4.5em; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay) 18%, transparent);
  background: #fff;
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239A5E44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; padding-right: 2.4em;
}
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--ember); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ember) 16%, transparent); }
.field__err { font-size: .84rem; color: var(--ember); font-weight: 500; }

/* choices (radio cards) */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 620px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; cursor: pointer; }
.choice--wide { grid-column: 1 / -1; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__face {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9em 1em; border: 1.5px solid var(--oat); border-radius: 12px;
  background: var(--cream); transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  min-height: 100%;
}
.choice__t { font-family: var(--text); font-weight: 600; color: var(--ink); display: flex; align-items: center; }
.choice__d { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.choice:hover .choice__face { border-color: color-mix(in oklab, var(--clay) 50%, var(--oat)); transform: translateY(-1px); }
.choice input:focus-visible + .choice__face { outline: 2.5px solid var(--clay); outline-offset: 2px; }
.choice input:checked + .choice__face {
  border-color: var(--clay); background: color-mix(in oklab, var(--clay) 9%, var(--cream));
  box-shadow: inset 0 0 0 1px var(--clay);
}
.choice--wide .choice__face { background: color-mix(in oklab, var(--ochre) 8%, var(--cream)); border-style: dashed; }
.choice--wide input:checked + .choice__face { background: color-mix(in oklab, var(--clay) 10%, var(--cream)); border-style: solid; }

/* dropzone / file input */
.dropzone { position: relative; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__face {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.4rem 1rem; border: 1.6px dashed color-mix(in oklab, var(--clay) 45%, var(--oat));
  border-radius: 12px; background: var(--cream); color: var(--clay);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.dropzone:hover .dropzone__face, .dropzone.is-drag .dropzone__face { border-color: var(--clay); background: color-mix(in oklab, var(--clay) 7%, var(--cream)); }
.dropzone input:focus-visible + .dropzone__face { outline: 2.5px solid var(--clay); outline-offset: 2px; }
.dropzone__t { font-weight: 600; color: var(--ink); }
.dropzone__d { font-size: .86rem; color: var(--ink-soft); max-width: 38ch; }

.filelist { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.filelist li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-soft); background: var(--cream); border: 1px solid var(--oat); border-radius: 8px; padding: .45em .7em; }
.filelist li .filelist__name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist li .filelist__size { color: var(--ink-faint); margin-left: auto; flex: none; }
.filelist__rm { flex: none; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .1em .3em; border-radius: 6px; }
.filelist__rm:hover { color: var(--ember); background: color-mix(in oklab, var(--ember) 10%, transparent); }

/* footer of form */
.cform__foot { margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1.5px solid var(--rule); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.cform__consent { font-size: .88rem; color: var(--ink-faint); max-width: 56ch; line-height: 1.5; }
.cform__submit { font-size: 1.08rem; padding: .85em 1.7em; }
.cform__submit[aria-busy="true"] { opacity: .75; pointer-events: none; }
.cform__submit-arrow { transition: transform .3s var(--ease); }
.cform__submit:hover .cform__submit-arrow { transform: translateX(3px); }
.cform__reassure { font-family: var(--display); font-style: italic; color: var(--ink-soft); font-size: 1.06rem; }

.cform__status { margin-top: 1rem; padding: .9em 1.1em; border-radius: 10px; font-size: .96rem; }
.cform__status.is-error { background: color-mix(in oklab, var(--ember) 12%, var(--cream)); border: 1px solid color-mix(in oklab, var(--ember) 40%, var(--oat)); color: var(--clay-deep); }
.cform__status.is-info { background: color-mix(in oklab, var(--sage) 12%, var(--cream)); border: 1px solid color-mix(in oklab, var(--sage) 35%, var(--oat)); color: var(--ink); }

/* success panel */
.thanks {
  text-align: center; padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem);
  background: color-mix(in oklab, var(--clay) 8%, var(--cream));
  border: 1px solid var(--oat); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.thanks__mark { color: var(--clay); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in oklab, var(--clay) 14%, var(--cream)); border: 1.5px solid color-mix(in oklab, var(--clay) 30%, var(--oat)); }
.thanks__h { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.thanks__p { color: var(--ink-soft); max-width: 46ch; }
.thanks__actions { margin-top: .8rem; }

/* small helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }