/* ============================================================
   ADRI KRIGE PHOTOGRAPHY — Client questionnaire & agreement
   All styles are scoped to .akp so nothing here can affect
   the rest of the website.
   ============================================================ */

.akp {
  --ink:        #29251F;
  --ink-soft:   #5C554C;
  --muted:      #857C71;
  --tan:        #6B553F;
  --tan-light:  #A08A6E;
  --cream:      #F4EEE5;
  --cream-deep: #EAE1D4;
  --line:       #DCD2C4;
  --white:      #FFFFFF;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  max-width: 860px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 44px) 48px;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
  box-sizing: border-box;
}
.akp *, .akp *::before, .akp *::after { box-sizing: border-box; }
.akp p { margin: 0 0 1em; }

/* ---------- type ---------- */
.akp-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 14px;
  font-weight: 600;
}
.akp-h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.akp-h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.akp-h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: 22px;
  margin: 40px 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.akp-cond .akp-h3:first-child { margin-top: 34px; }
.akp-lede { font-size: 17px; color: var(--ink-soft); max-width: 62ch; }
.akp-lede--sm { font-size: 15.5px; color: var(--muted); }
.akp-hero { margin-bottom: 34px; }
.akp-mail { white-space: nowrap; color: var(--tan); }

/* ---------- progress ---------- */
.akp-steps { margin: 0 0 40px; }
.akp-steps ol {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
}
.akp-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 1 auto;
  transition: color .25s;
}
.akp-steps li + li { margin-left: 6px; }
.akp-dot {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0;
  background: var(--white);
  transition: all .25s;
}
.akp-steps li.is-active { color: var(--ink); }
.akp-steps li.is-active .akp-dot { background: var(--ink); border-color: var(--ink); color: var(--white); }
.akp-steps li.is-done .akp-dot { background: var(--cream-deep); border-color: var(--cream-deep); color: var(--tan); }
.akp-track { height: 2px; background: var(--cream-deep); overflow: hidden; }
.akp-bar { height: 100%; width: 33.33%; background: var(--tan); transition: width .4s cubic-bezier(.4,0,.2,1); }

/* ---------- steps ---------- */
.akp-step { display: none; }
.akp-step.is-active { display: block; animation: akpFade .35s ease both; }
@keyframes akpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.akp-cond { display: none; }
.akp-cond.is-on { display: block; animation: akpFade .3s ease both; }

/* ---------- fields ---------- */
.akp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.akp-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.akp-wide, .akp-cards { grid-column: 1 / -1; }
@media (max-width: 640px) { .akp-grid { grid-template-columns: 1fr; } }

.akp label, .akp legend {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.45;
  padding: 0;
}
.akp .akp-opt { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.akp-req { color: var(--tan-light); font-weight: 400; }

.akp input[type=text],
.akp input[type=email],
.akp input[type=tel],
.akp select,
.akp textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px;
  line-height: 1.5;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.akp textarea { resize: vertical; min-height: 90px; }
.akp select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B553F' stroke-width='1.3' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
  cursor: pointer;
}
.akp input:focus, .akp select:focus, .akp textarea:focus {
  outline: none;
  border-color: var(--tan);
  box-shadow: 0 0 0 3px rgba(107,85,63,.10);
}
.akp input::placeholder, .akp textarea::placeholder { color: #B6ADA1; }
.akp input[readonly] { background: var(--cream); color: var(--muted); }

.akp-err { color: #A6432F; font-size: 12.5px; margin: 6px 0 0; min-height: 0; display: none; }
.akp-field.has-error .akp-err { display: block; }
.akp-field.has-error input,
.akp-field.has-error select,
.akp-field.has-error textarea { border-color: #C9836F; }
.akp-formerr {
  color: #A6432F; font-size: 14px; text-align: center;
  background: #FBF0EC; border: 1px solid #EBD3CA; padding: 12px 16px; margin-top: 18px;
}

/* ---------- session type cards ---------- */
.akp-cardrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .akp-cardrow { grid-template-columns: 1fr; } }
.akp-cardrow .akp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.akp-card { margin: 0; cursor: pointer; font-weight: 400; position: relative; display: block; }
.akp-card input { position: absolute; top: 18px; left: 18px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.akp-cardin {
  display: block;
  border: 1px solid var(--line);
  padding: 16px 18px;
  background: var(--white);
  transition: all .2s;
  height: 100%;
}
.akp-cardin strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 3px;
}
.akp-cardin em { display: block; font-style: normal; font-size: 12.8px; color: var(--muted); line-height: 1.45; }
.akp-card:hover .akp-cardin { border-color: var(--tan-light); }
.akp-card input:focus-visible + .akp-cardin { box-shadow: 0 0 0 3px rgba(107,85,63,.15); }
.akp-card input:checked + .akp-cardin { border-color: var(--ink); background: var(--cream); }

/* ---------- the agreement document ---------- */
.akp-doc {
  border: 1px solid var(--line);
  background: var(--cream);
  max-height: 430px;
  overflow-y: auto;
  padding: 0;
  margin: 26px 0 8px;
  position: relative;
}
.akp-doc:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }
.akp-docinner { padding: 30px clamp(20px, 4vw, 38px) 34px; }
.akp-doc h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--tan);
  font-weight: 600;
  margin: 26px 0 8px;
}
.akp-doc p { font-size: 14.6px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 12px; }
.akp-doctitle {
  font-family: var(--serif) !important;
  font-size: 25px !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
  line-height: 1.2;
}
.akp-docsub {
  font-size: 11.5px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin: 0 0 24px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
/* Key figures in the agreement. They are wrapped in <mark> so you can
   find every one of them quickly with Ctrl+F / Cmd+F when you want to
   change a number — but clients simply see them as emphasised text. */
.akp-doc mark {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-weight: 600;
}
.akp-docend { text-align: center; color: var(--muted) !important; font-size: 12px !important; letter-spacing: 1.5px; margin-top: 28px !important; }
.akp-scrollhint {
  font-size: 12.5px; color: var(--tan); margin: 0 0 24px;
  transition: opacity .3s;
}
.akp-scrollhint.is-hidden { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* ---------- consents ---------- */
.akp-consents { margin: 8px 0 30px; }
.akp-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
  cursor: pointer;
}
.akp-check input[type=checkbox] {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--tan);
  cursor: pointer;
}
.akp-check em { font-style: italic; color: var(--muted); }
.akp-check.is-locked { opacity: .45; cursor: not-allowed; }
.akp-check.is-locked input { cursor: not-allowed; }

/* ---------- signature ---------- */
.akp-signblock {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 26px clamp(18px, 3vw, 28px) 20px;
}
.akp-signature {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 22px !important;
  letter-spacing: .3px;
  background: transparent !important;
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px !important;
}
.akp-signature:focus { box-shadow: none !important; border-bottom-color: var(--tan) !important; }
.akp-fineprint { font-size: 12px; color: var(--muted); margin: 16px 0 0; }

/* ---------- buttons ---------- */
.akp-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.akp .akp-btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 15px 34px;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
  line-height: 1;
}
.akp .akp-btn:hover { background: var(--tan); border-color: var(--tan); }
.akp .akp-btn:disabled { opacity: .45; cursor: default; background: var(--ink); border-color: var(--ink); }
.akp .akp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); margin-right: auto; }
.akp .akp-btn--ghost:hover { background: transparent; color: var(--tan); border-color: var(--tan); }

/* ---------- success ---------- */
.akp-done { text-align: center; padding: 30px 0 10px; animation: akpFade .5s ease both; }
.akp-doneMark {
  width: 56px; height: 56px; margin: 0 auto 22px;
  border: 1px solid var(--tan); border-radius: 50%;
  color: var(--tan); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.akp-done .akp-lede { margin-left: auto; margin-right: auto; }
.akp-done .akp-btn { margin-top: 14px; }

.akp-foot {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.akp-foot p { font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---------- honeypot ---------- */
.akp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- printable copy ---------- */
.akp-print { display: none; }
@media print {
  body * { visibility: hidden !important; }
  .akp-print, .akp-print * { visibility: visible !important; }
  .akp-print {
    display: block !important;
    position: absolute; left: 0; top: 0; width: 100%;
    padding: 0 8mm;
    font-family: Georgia, serif; font-size: 10.5pt; color: #000;
  }
  .akp-print h1 { font-size: 18pt; font-weight: 400; margin: 0 0 2mm; }
  .akp-print h2 { font-size: 11pt; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; margin: 6mm 0 2mm; border-bottom: .4pt solid #999; padding-bottom: 1mm; }
  .akp-print h4 { font-size: 9.5pt; text-transform: uppercase; letter-spacing: 1px; margin: 4mm 0 1mm; }
  .akp-print dl { margin: 0; }
  .akp-print dt { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .8px; color: #555; margin-top: 3mm; }
  .akp-print dd { margin: 0; font-size: 10.5pt; }
  .akp-print .sig { font-style: italic; font-size: 15pt; border-bottom: .4pt solid #000; display: inline-block; padding: 0 6mm 1mm 0; }
  @page { margin: 14mm; }
}

/* ---------- small screens: keep the progress row tidy ---------- */
@media (max-width: 520px) {
  .akp-steps ol { gap: 8px; }
  .akp-steps li:not(.is-active) .akp-steplabel { display: none; }
  .akp-steps li + li { margin-left: 0; }
}