/* Auto-generated split from styles.css — Peak Essence */
/* =========================================================
   SCOUT WIZARD — pre-contact project questionnaire
   ========================================================= */
.scout {
    padding: clamp(80px, 10vw, 130px) 0;
    background: var(--night);
    color: #FFF6E5;
    overflow: hidden;
    position: relative;
    scroll-margin-top: 110px; /* offset for fixed nav when jumping via #scout */
}
/* When jumping to #brief, the "What are we building?" h3 should land
   just below the fixed nav. */
#brief { scroll-margin-top: 90px; }
.scout::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,246,229,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,246,229,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.scout__intro { text-align: center; max-width: 580px; margin: 0 auto 52px; }
.scout__intro h2 { color: #FFF6E5; }
.scout__sub { color: rgba(255,246,229,.6); margin-top: 10px; font-size: 15px; }

.scout__widget {
    max-width: 840px; margin: 0 auto;
    background: rgba(255,246,229,.04);
    border: 1px solid rgba(255,246,229,.1);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
    padding: 40px 40px 36px;
    position: relative;
}
.scout__track { display: flex; align-items: center; gap: 8px; margin-bottom: 36px; }
.scout__pip {
    height: 5px; border-radius: 3px;
    background: rgba(255,246,229,.15);
    transition: width .4s var(--ease), background .4s var(--ease);
    width: 22px;
}
.scout__pip.is-active { background: var(--orange); width: 40px; }
.scout__pip.is-done   { background: rgba(224,122,43,.4); }

.scout__step { display: none; flex-direction: column; gap: 26px; }
.scout__step.is-active { display: flex; animation: scoutIn .45s var(--ease-arch) both; }
.scout__step.is-active.is-back { animation: scoutInBwd .45s var(--ease-arch) both; }
@keyframes scoutIn    { from { opacity:0; transform:translateX(40px) scale(.98); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes scoutInBwd { from { opacity:0; transform:translateX(-40px) scale(.98); } to { opacity:1; transform:translateX(0) scale(1); } }

.scout__step-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; color: var(--orange-soft); text-transform: uppercase; }
.scout__step-head h3 {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px);
    color: #FFF6E5; margin: 8px 0 4px;
}
.scout__step-head p { color: rgba(255,246,229,.55); font-size: 14px; }

.scout__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scout__opts--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) {
    .scout__opts { grid-template-columns: repeat(2, 1fr); }
    .scout__widget { padding: 28px 22px 24px; }
}
@media (max-width: 400px) { .scout__opts, .scout__opts--2 { grid-template-columns: 1fr; } }

.scout__opt {
    background: rgba(255,246,229,.04);
    border: 1px solid rgba(255,246,229,.1);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    padding: 18px 16px; text-align: left; cursor: pointer; color: inherit;
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
    display: flex; flex-direction: column; gap: 5px;
}
.scout__opt:hover { background: rgba(255,246,229,.08); border-color: rgba(255,246,229,.3); transform: translateY(-3px); }
.scout__opt.is-selected { background: rgba(224,122,43,.14); border-color: var(--orange); }
.scout__opt svg {
    width: 28px; height: 28px; margin-bottom: 6px;
    stroke: var(--orange-soft); fill: none; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.scout__opt.is-selected svg { stroke: var(--orange); }
.scout__opt-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #FFF6E5; }
.scout__opt-desc { font-size: 12px; color: rgba(255,246,229,.5); line-height: 1.5; }

.scout__contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .scout__contact-grid { grid-template-columns: 1fr; } }
.scout__contact-grid .scout__field--full { grid-column: 1 / -1; }
.scout__field { display: flex; flex-direction: column; gap: 6px; }
.scout__field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange-soft); }
.scout__field input,
.scout__field textarea {
    background: rgba(255,246,229,.06); border: 1px solid rgba(255,246,229,.14); border-radius: 4px;
    padding: 11px 14px; color: #FFF6E5; font-family: var(--font-body); font-size: 15px;
    transition: border-color .3s, background .3s; resize: none; width: 100%; box-sizing: border-box;
}
.scout__field input::placeholder,
.scout__field textarea::placeholder { color: rgba(255,246,229,.28); }
.scout__field input:focus,
.scout__field textarea:focus { outline: none; border-color: var(--orange); background: rgba(255,246,229,.09); }

.scout__method-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scout__method-btn {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,246,229,.06); border: 1px solid rgba(255,246,229,.14);
    color: rgba(255,246,229,.7); cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 40px; white-space: nowrap;
}
.scout__method-btn:hover { background: rgba(255,246,229,.1); color: #FFF6E5; }
.scout__method-btn.is-selected { background: rgba(224,122,43,.18); border-color: var(--orange); color: var(--orange-soft); }

.scout__foot {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255,246,229,.1); padding-top: 22px; gap: 12px;
}
.scout__foot .btn--ghost { color: rgba(255,246,229,.55); border-color: rgba(255,246,229,.18); }
.scout__foot .btn--ghost:hover { color: #FFF6E5; border-color: rgba(255,246,229,.4); }

.scout__confirm-head { text-align: center; }
.scout__confirm-head h3 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); color: #FFF6E5; margin-bottom: 4px; }
.scout__confirm-head p { color: rgba(255,246,229,.6); font-size: 14px; }
.scout__confirm-tag {
    display: inline-block; margin-top: 8px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    background: rgba(224,122,43,.18); color: var(--orange-soft);
    padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(224,122,43,.35);
}
.scout__confirm-summary {
    background: rgba(255,246,229,.04); border: 1px solid rgba(255,246,229,.1); border-radius: 4px;
    padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
}
.scout__confirm-row {
    display: flex; gap: 14px; align-items: baseline;
    border-bottom: 1px solid rgba(255,246,229,.07); padding-bottom: 10px;
}
.scout__confirm-row:last-child { border-bottom: none; padding-bottom: 0; }
.scout__confirm-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-soft); min-width: 90px; flex-shrink: 0; }
.scout__confirm-val { color: #FFF6E5; font-size: 14px; }
.scout__confirm-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.scout__confirm-actions .btn--ghost { color: rgba(255,246,229,.7); border-color: rgba(255,246,229,.25); }
.scout__confirm-actions .btn--ghost:hover { color: #FFF6E5; border-color: rgba(255,246,229,.5); }