/* ============================================================
   PULP FUNCTION — Contact page ("Place your order")
   Enquiry form + Calendly booking block.
   Pairs with tokens.css + menu.css (shared header / buttons / footer)
   ============================================================ */

/* ---- generic section rhythm ---- */
.ct-sec { padding: clamp(56px,7vw,104px) 0; }
.ct-sec.band { background: var(--paper-2); }

/* =================== BREADCRUMB =================== */
.crumb { background: var(--paper); }
.crumb .wrap { padding-top: 28px; padding-bottom: 16px; }
.crumb .trail { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.crumb a, .crumb span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.crumb .path { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumb .path .sl { color: var(--accent); }
.crumb .path .here { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb .back { display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.crumb .back:hover { color: var(--accent); }
.crumb .back .ar { display: inline-flex; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.crumb .back:hover .ar { transform: translateX(-3px); }

/* =================== HERO =================== */
.ct-hero { padding: clamp(44px,5.5vw,80px) 0 clamp(20px,3vw,36px); }
.ct-hero .kick { font-family: var(--tab); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; }
.ct-hero h1 { margin: 16px 0 0; font-weight: 700; letter-spacing: -0.035em; line-height: 0.94;
  font-size: clamp(52px,8vw,108px); }
.ct-hero h1 em { font-style: italic; color: var(--accent); }
.ct-hero .lede { margin: 26px 0 0; font-size: clamp(18px,1.6vw,23px); line-height: 1.45; max-width: 46ch; color: var(--ink); }

/* =================== MAIN GRID (form + aside) =================== */
.ct-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(32px,4vw,64px); align-items: start; }

/* legend frame already supplied by menu.css (.legend-frame / .tab-label) */
.ct-form-frame { padding: clamp(28px,3.4vw,46px) clamp(24px,3vw,42px) clamp(28px,3.4vw,40px); }
.ct-form-frame > .tab-label { margin-left: 24px; margin-right: auto; }

/* form layout */
.ct-form { display: flex; flex-direction: column; gap: clamp(20px,2.4vw,28px); }
.ct-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.4vw,28px); }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.field > label .req { color: var(--accent); }

/* inputs */
.field input,
.field select,
.field textarea {
  font-family: var(--disp); font-size: 16.5px; color: var(--ink); line-height: 1.4;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 14px 16px; width: 100%; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,58,23,.16); }
.field textarea { min-height: 150px; resize: vertical; }

/* select with custom caret */
.sel { position: relative; }
.sel select { padding-right: 44px; cursor: pointer; }
.sel select:invalid { color: var(--muted); }
.sel .caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--accent); display: inline-flex; }

.field > label .hint { font-family: var(--disp); text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12.5px; font-style: italic; }

/* ---- custom multi-select ---- */
.msel { position: relative; }
.msel-trigger { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 44px 10px 14px; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; cursor: pointer;
  text-align: left; font-family: var(--disp); position: relative; transition: border-color .2s, box-shadow .2s; }
.msel-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,58,23,.16); }
.msel.open .msel-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,58,23,.16); }
.msel.invalid .msel-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,58,23,.22); }
.msel-ph { color: var(--muted); font-size: 16.5px; }
.msel .caret { position: absolute; right: 16px; top: 17px; pointer-events: none; color: var(--accent); display: inline-flex;
  transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.msel.open .caret { transform: rotate(180deg); }

.msel-chips { display: contents; }
.msel-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: 5px 6px 5px 13px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink); }
.msel-chip button { border: 0; background: var(--ink); color: #fff; width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; transition: background .2s; }
.msel-chip button:hover { background: var(--accent); }

.msel-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; background: #fff;
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px; box-shadow: 0 16px 38px rgba(17,19,21,.18);
  max-height: 320px; overflow: auto; }
.msel-opt { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 6px; cursor: pointer; font-size: 16px; }
.msel-opt:hover { background: var(--paper-2); }
.msel-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.msel-opt .box { width: 21px; height: 21px; border: 1.5px solid var(--ink); border-radius: 5px; flex: none; display: grid;
  place-items: center; transition: background .15s, border-color .15s; }
.msel-opt .box svg { opacity: 0; transition: opacity .15s; }
.msel-opt input:checked + .box { background: var(--accent); border-color: var(--accent); }
.msel-opt input:checked + .box svg { opacity: 1; }
.msel-opt input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(255,58,23,.2); }

/* submit row */
.ct-submit { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.ct-submit .note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); max-width: 34ch; }
.ct-form button[type="submit"] { font-family: 'Chivo Mono', monospace; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; padding: 15px 24px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff; transition: transform .25s, background .25s, border-color .25s; }
.ct-form button[type="submit"] .ar { display: inline-flex; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ct-form button[type="submit"]:hover { background: var(--accent-d); border-color: var(--accent-d); }
.ct-form button[type="submit"]:hover .ar { transform: translate(3px,-3px); }

/* success state */
.ct-done { display: none; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(20px,3vw,32px) 0; }
.ct-form-frame.sent .ct-form { display: none; }
.ct-form-frame.sent .ct-done { display: flex; }
.ct-done .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.ct-done h3 { margin: 0; font-style: italic; font-weight: 700; font-size: clamp(26px,2.6vw,36px); letter-spacing: -0.02em; }
.ct-done p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 42ch; }

/* =================== ASIDE (direct contact) =================== */
.ct-aside { display: flex; flex-direction: column; gap: clamp(22px,2.6vw,30px); }
.ct-block { border-top: 2px solid var(--ink); padding-top: 18px; }
.ct-block .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
.ct-block a, .ct-block .v { font-style: italic; font-weight: 700; letter-spacing: -0.018em; line-height: 1.1;
  font-size: clamp(22px,2vw,28px); color: var(--ink); display: inline-block; transition: color .2s; }
.ct-block a:hover { color: var(--accent); }
.ct-socials { display: flex; flex-direction: column; gap: 9px; }
.ct-socials a { font-style: normal; font-weight: 400; font-size: 16px; }
.ct-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.7; color: var(--ink-2); text-transform: uppercase; }

/* =================== CALENDLY =================== */
.ct-cal .ab-head, .ct-cal .head { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(28px,3vw,42px); }
.ct-cal .kick { font-family: var(--tab); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.ct-cal h2 { margin: 0; font-weight: 400; font-size: clamp(46px,7vw,80px); letter-spacing: -0.022em; line-height: 0.98; }
.ct-cal .sub { margin: 4px 0 0; font-size: clamp(16px,1.3vw,18px); color: var(--ink-2); max-width: 48ch; }
.cal-frame { border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; position: relative; min-height: 680px; }
.calendly-inline-widget { min-width: 320px; height: 680px; }
.cal-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px; pointer-events: none; }
.cal-fallback .inner { max-width: 30ch; }
.cal-fallback .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cal-fallback p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .crumb .path .here { display: none; }
  .ct-row2 { grid-template-columns: 1fr; }
  .ct-submit { flex-direction: column-reverse; align-items: stretch; }
  .ct-form button[type="submit"] { justify-content: center; }
}