/* ============================================================
   Bianca Kau · Commission page
   Order: How it works (dark) → pricing tiers → enquiry form.
   Uses the brand-book palette + variables from main.css.
   ============================================================ */

/* ---- page header ---- */
.cpage-head { max-width: 64ch; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.6rem) var(--pad) 0; text-align: center; }
.cpage-head .kicker { justify-content: center; }
.cpage-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.04; letter-spacing: -.01em; margin-top: .5rem; text-wrap: balance; }
.cpage-head h1 em { font-style: italic; color: var(--clay); }
.cpage-head__lede { margin: 1rem auto 0; max-width: 52ch; color: var(--ink-soft); font-size: clamp(1.08rem, 1vw + .9rem, 1.3rem); text-wrap: pretty; }

/* ---- section scaffolding ---- */
.csec { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.6rem, 6vw, 4.4rem) var(--pad); }
.csec__head { text-align: center; max-width: 48ch; margin: 0 auto clamp(1.7rem, 3.6vw, 2.6rem); }
.csec__head .kicker { justify-content: center; }
.csec__head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.01em; margin-top: .5rem; text-wrap: balance; }

/* ============================================================
   How it works — dark indigo process panel (roman-numeral steps)
   ============================================================ */
.process {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--clay); color: var(--cream); border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 60px -38px color-mix(in oklab, var(--clay) 70%, black);
}
.pstep {
  padding: clamp(1.8rem, 3vw, 2.3rem) clamp(1.4rem, 2.2vw, 1.85rem) clamp(2.2rem, 3.4vw, 2.6rem);
  border-left: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  display: flex; flex-direction: column;
}
.pstep:first-child { border-left: none; }
.pstep__rn { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--ochre); margin-bottom: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: .04em; }
.pstep h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.42rem); color: var(--cream); margin-bottom: .5rem; line-height: 1.15; }
.pstep p { font-size: .95rem; color: color-mix(in oklab, var(--linen) 90%, white); margin: 0; line-height: 1.6; max-width: none; }
@media (max-width: 820px) {
  .process { grid-template-columns: 1fr 1fr; }
  .pstep { border-left: none; }
  .pstep:nth-child(even) { border-left: 1px solid color-mix(in oklab, var(--cream) 18%, transparent); }
  .pstep:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--cream) 18%, transparent); }
}
@media (max-width: 520px) {
  .process { grid-template-columns: 1fr; }
  .pstep { border-left: none; border-top: 1px solid color-mix(in oklab, var(--cream) 18%, transparent); }
  .pstep:first-child { border-top: none; }
}

/* ============================================================
   Pricing tiers
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 1.8rem); align-items: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.tier {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  padding: clamp(1.7rem, 2.6vw, 2.1rem); display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(60,40,16,.4); }
.tier--feat { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tier__tag { display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--madder); font-weight: 700; margin-bottom: .55rem; }
.tier--feat .tier__tag { color: var(--ochre); }
.tier h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.tier--feat h3 { color: var(--cream); }
.tier__price { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.3rem); color: var(--ink); margin: .35rem 0 .15rem; }
.tier--feat .tier__price { color: var(--cream); }
.tier__meta { font-size: .82rem; letter-spacing: .04em; color: var(--ink-faint); }
.tier--feat .tier__meta { color: color-mix(in oklab, var(--linen) 82%, white); }
.tier__list { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; flex: 1; }
.tier__list li { position: relative; padding: .55rem 0 .55rem 1.3rem; font-size: .95rem; border-bottom: 1px solid var(--rule); }
.tier--feat .tier__list li { border-color: color-mix(in oklab, var(--cream) 18%, transparent); }
.tier__list li:last-child { border-bottom: none; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 9px; height: 2px; background: var(--madder); }
.tier--feat .tier__list li::before { background: var(--ochre); }
.tier .btn { align-self: stretch; justify-content: center; }
.ctiers__note { text-align: center; max-width: 64ch; margin: clamp(1.5rem, 3vw, 2.2rem) auto 0; color: var(--ink-faint); font-size: .92rem; line-height: 1.6; }

/* gold / ghost button variants for the tiers */
.btn--gold { background: var(--ochre); color: var(--ink); box-shadow: none; }
.btn--gold:hover { background: color-mix(in oklab, var(--ochre) 86%, white); transform: translateY(-2px); }

/* ============================================================
   Enquiry form — "Begin your commission"
   ============================================================ */
.enquire {
  border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--cream-deep) 55%, var(--cream));
  padding: clamp(2.3rem, 5vw, 3.6rem) var(--pad);
}
.enquire__inner { max-width: 42rem; margin-inline: auto; }
/* multi-section enquiry form — tight & cohesive */
.cform { margin-top: clamp(1.3rem, 3vw, 1.9rem); display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); text-align: left; }
.cform__group { border-top: 1px solid var(--rule); padding-top: clamp(1rem, 2.2vw, 1.4rem); margin: 0; }
.cform__group:first-child { border-top: none; padding-top: 0; }
.cform__fieldset { border: 0; min-width: 0; }
.cform__label { font-variant: small-caps; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .7rem; padding: 0; display: block; }
.cform__tag { font-size: .66rem; letter-spacing: .12em; color: var(--ink-faint); margin-left: .6em; }
.cform__tag--req { color: var(--madder); }
.cform__opt { font-size: .64rem; letter-spacing: .1em; color: var(--ink-faint); margin-left: .4em; text-transform: uppercase; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-items: start; }
@media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } }
.cform__group .field + .cform__row { margin-top: .8rem; }

.field { display: grid; gap: .3rem; }
.field > label { font-size: .94rem; color: var(--ink); font-weight: 500; }
.field input, .field textarea, .field select {
  font-family: var(--text); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid color-mix(in oklab, var(--ink) 18%, var(--oat));
  border-radius: 8px; padding: .62em .9em; width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 5rem; height: 5rem; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ochre) 42%, transparent);
}
.field__hint { font-size: .82rem; color: var(--ink-faint); }

/* piece-type choices */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 680px) { .choices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .72rem .9rem; border: 1.5px solid color-mix(in oklab, var(--ink) 16%, var(--oat)); border-radius: 9px; cursor: pointer; background: var(--cream); transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.choice:hover { border-color: color-mix(in oklab, var(--clay) 45%, var(--oat)); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__t { font-family: var(--display); font-weight: 500; font-size: 1.08rem; color: var(--ink); line-height: 1.12; }
.choice__s { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }
.choice:has(input:checked) { border-color: var(--clay); background: color-mix(in oklab, var(--clay) 7%, var(--cream)); box-shadow: inset 0 0 0 1px var(--clay); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ochre) 42%, transparent); }
.choice--wide { grid-column: 1 / -1; }

/* photo dropzone */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: clamp(1.1rem, 3vw, 1.6rem); border: 1.5px dashed color-mix(in oklab, var(--ink) 28%, var(--oat)); border-radius: 10px; cursor: pointer; text-align: center; background: color-mix(in oklab, var(--cream) 55%, var(--paper)); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.dropzone:hover { border-color: var(--clay); background: color-mix(in oklab, var(--clay) 5%, var(--cream)); }
.dropzone:focus-within { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ochre) 42%, transparent); }
.dropzone__icon { font-size: 1.25rem; color: var(--clay); line-height: 1; }
.dropzone__t { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.dropzone__s { font-size: .82rem; color: var(--ink-faint); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* submit */
.cform__submit { border-top: 1px solid var(--rule); padding-top: clamp(1.1rem, 2.4vw, 1.5rem); }
.cform__consent { color: var(--ink-faint); font-size: .88rem; margin: 0 0 .85rem; }
.cform__note { margin-top: .85rem; color: var(--ink-faint); font-style: italic; font-size: .88rem; }
.enquire__mail {
  color: var(--clay); text-decoration: none; font-style: italic; font-family: var(--display); font-size: 1.05rem;
  background-image: linear-gradient(to right, var(--ochre) 55%, transparent 55%);
  background-size: 11px 2px; background-repeat: repeat-x; background-position: 0 1.2em; padding-bottom: .12em;
}
.enquire__mail:hover { color: var(--clay-deep); }