/* ==========================================================================
   EK Studio — Request a Project Review page
   Extends styles.css (Hybrid A + C). New components only; base system reused.
   ========================================================================== */

/* ---------- Shared helpers ---------- */
.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;
}
.section-eyebrow{max-width:none}
/* IBM Plex Mono technical labels on this page sit at weight 500 */
.hero-note p,.inquiry-head,.inquiry-list .n,.inquiry-foot,.fit-price,
.q-tag,.option--stack .price,.np-eyebrow,.next-node,.faq-num{font-weight:500}

/* ==========================================================================
   1. PAGE HERO
   ========================================================================== */
.page-hero{padding-block:clamp(44px,6vw,88px) clamp(48px,6vw,92px)}
.page-hero-grid{
  display:grid;grid-template-columns:1.16fr .84fr;
  gap:clamp(34px,5vw,72px);align-items:start;
}
.page-hero h1{
  font-family:var(--serif);font-weight:400;line-height:1.01;letter-spacing:-.015em;
  font-size:clamp(2.5rem,5.2vw,4.35rem);color:var(--espresso);margin-top:8px;
}
.page-hero .lead{margin-top:26px;max-width:54ch;font-size:1.18rem;line-height:1.58;color:var(--body)}

.hero-note{
  margin-top:30px;display:flex;align-items:flex-start;gap:13px;
  padding:15px 20px;border:1px solid var(--divider-strong);border-left:2px solid var(--signal);
  border-radius:8px;background:var(--surface);max-width:46ch;
}
.hero-note .n-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;margin-top:6px}
.hero-note p{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;line-height:1.55;
  text-transform:uppercase;color:var(--muted-strong);
}
.hero-note strong{color:var(--espresso);font-weight:600}

/* Technical inquiry-index card — replaces the hero photo */
.inquiry-card{
  position:relative;isolation:isolate;
  border:1px solid var(--divider-strong);border-radius:14px;background:var(--surface);
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-md);overflow:hidden;
}
.inquiry-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(110,30,44,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(110,30,44,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.inquiry-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-strong);padding-bottom:16px;border-bottom:1px solid var(--divider);
}
.inquiry-head .live{display:inline-flex;align-items:center;gap:8px;color:var(--burgundy)}
.inquiry-head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.inquiry-list{display:block}
.inquiry-list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--divider);
}
.inquiry-list .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--burgundy)}
.inquiry-list .t{font-family:var(--serif);font-size:1.08rem;color:var(--espresso);letter-spacing:-.01em}
.inquiry-list .mk{width:7px;height:7px;border-radius:50%;background:var(--divider-strong)}
.inquiry-list li:first-child .mk{background:var(--signal)}
.inquiry-foot{
  display:flex;justify-content:space-between;gap:12px;margin-top:16px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-strong);
}

/* ==========================================================================
   2. FIT NOTE
   ========================================================================== */
.fit-note{background:var(--sand);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.fit-inner{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,60px);
  align-items:start;padding-block:clamp(38px,4.5vw,60px);
}
.fit-note h2{
  font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(1.55rem,2.6vw,2.1rem);color:var(--espresso);
}
.fit-note .copy{font-size:1.1rem;line-height:1.6;color:var(--body);max-width:60ch}
.fit-price{
  margin-top:18px;display:flex;align-items:flex-start;gap:11px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;line-height:1.55;
  text-transform:uppercase;color:var(--muted-strong);
}
.fit-price::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;margin-top:5px}
.fit-price strong{color:var(--espresso);font-weight:600}

/* ==========================================================================
   3. PROJECT REVIEW FORM
   ========================================================================== */
.review-layout{
  display:grid;grid-template-columns:1fr 340px;gap:clamp(38px,5vw,72px);
  align-items:start;margin-top:clamp(38px,4vw,52px);
}

/* --- numbered form sections --- */
.form-main{min-width:0}
.form-section{
  border:0;padding:0;margin:0;min-width:0;
  padding-top:clamp(30px,3.4vw,46px);margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--divider);
}
.form-section:first-child{padding-top:0;margin-top:0;border-top:0}
.fs-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,2.4vw,30px);width:100%;padding:0}
.fs-num{
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--burgundy);flex:none;padding-top:2px;
}
.fs-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.3vw,1.85rem);letter-spacing:-.01em;color:var(--espresso)}

/* --- text fields --- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field.full{grid-column:1 / -1}
.field-label{
  font-family:var(--font-body);font-size:.85rem;font-weight:600;letter-spacing:.005em;
  color:var(--espresso);
}
.field-label .opt,.field-label .req{color:var(--muted-strong);font-weight:400}
.input{
  font-family:var(--sans);font-size:1rem;color:var(--espresso);
  background:var(--surface);border:1px solid var(--divider-strong);border-radius:6px;
  padding:14px 16px;min-height:52px;width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--muted-strong)}
.input:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(110,30,44,.1);outline:none}
textarea.input{min-height:158px;line-height:1.58;resize:vertical}

/* --- questions with selectable options --- */
.q{margin-top:clamp(24px,2.6vw,32px);border:0;padding:0;min-width:0}
.q:first-child{margin-top:0}
.q-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding:0;width:100%}
.q-label{font-family:var(--sans);font-weight:600;font-size:1.06rem;line-height:1.4;color:var(--espresso)}
.q-label .req,.check-text .req{color:var(--muted-strong);font-weight:400;font-size:.85em}
.q-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-strong)}
.q-prompt{margin-top:8px;font-size:.98rem;line-height:1.5;color:var(--muted-strong)}

.options{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.option{position:relative;min-width:0}
.option > input{position:absolute;opacity:0;width:0;height:0}
.option label{
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 18px;min-height:50px;
  border:1.5px solid var(--divider-strong);border-radius:8px;background:var(--surface);
  cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.3;color:var(--body);
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.option label:hover{border-color:var(--muted-strong)}
.option .marker{
  position:relative;width:16px;height:16px;border-radius:50%;flex:none;
  border:1.5px solid var(--divider-strong);transition:border-color .16s ease;
}
.option > input:checked + label{border-color:var(--burgundy);background:rgba(110,30,44,.05);color:var(--espresso)}
.option > input:checked + label .marker{border-color:var(--burgundy)}
.option > input:checked + label .marker::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--signal)}
.option > input:focus-visible + label{outline:2.5px solid var(--signal);outline-offset:2px}

/* price / two-line options */
.option--stack label{flex-direction:row;align-items:center;gap:12px;padding:14px 18px}
.option--stack .txt{display:flex;flex-direction:column;gap:3px}
.option--stack .name{font-weight:600;color:inherit}
.option--stack .price{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--burgundy)}

/* --- checkbox --- */
.check{display:flex;align-items:flex-start;gap:14px;cursor:pointer;margin-top:6px}
.check > input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  position:relative;width:22px;height:22px;flex:none;margin-top:1px;
  border:1.5px solid var(--divider-strong);border-radius:5px;background:var(--surface);
  transition:background-color .16s ease, border-color .16s ease;
}
.check > input:checked + .box{background:var(--burgundy);border-color:var(--burgundy)}
.check > input:checked + .box::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check > input:focus-visible + .box{outline:2.5px solid var(--signal);outline-offset:3px}
.check .check-text{font-size:.96rem;line-height:1.55;color:var(--body)}

/* --- submit area --- */
.form-submit{
  margin-top:clamp(32px,3.6vw,44px);padding-top:clamp(28px,3vw,36px);
  border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.form-submit .btn{min-width:290px}
.submit-note{font-size:.95rem;line-height:1.55;color:var(--muted-strong);max-width:52ch}

/* --- "what happens next" rail --- */
.next-panel{
  position:sticky;top:104px;
  border:1px solid var(--divider-strong);border-radius:14px;background:var(--surface);
  padding:clamp(24px,2.4vw,30px);box-shadow:var(--shadow-sm);
}
.next-panel .np-eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-strong);padding-bottom:18px;border-bottom:1px solid var(--divider);
  display:flex;align-items:center;gap:10px;
}
.next-panel .np-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.next-steps{position:relative;margin-top:22px}
.next-steps::before{content:"";position:absolute;left:17px;top:20px;bottom:26px;width:1px;background:var(--divider-strong)}
.next-step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-bottom:26px}
.next-step:last-child{padding-bottom:0}
.next-node{
  position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--divider-strong);background:var(--surface);
  font-family:var(--mono);font-size:.72rem;color:var(--burgundy);
}
.next-step:first-child .next-node{border-color:var(--burgundy);background:var(--burgundy);color:var(--cream)}
.next-step h3{font-family:var(--serif);font-weight:400;font-size:1.14rem;letter-spacing:-.01em;color:var(--espresso);margin-bottom:5px;padding-top:5px}
.next-step p{font-size:.92rem;line-height:1.5;color:var(--body)}

/* ==========================================================================
   4. SCOPE-CALL PANEL (espresso)
   ========================================================================== */
.scope{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream-soft)}
.scope::before{
  content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(216,99,107,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,99,107,.05) 1px,transparent 1px);
  background-size:46px 46px;
}
.scope-inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(56px,7vw,100px);
}
.scope .eyebrow{color:var(--signal-soft)}
.scope .eyebrow::before{background:var(--signal-soft)}
.scope h2{
  font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2rem,4vw,3.1rem);color:var(--cream);margin-top:6px;
}
.scope .scope-copy{margin-top:20px;max-width:52ch;font-size:1.14rem;line-height:1.55;color:var(--cream-soft)}
.scope-action{display:flex;justify-content:flex-start;align-items:center}
.scope .btn-ghost{color:var(--cream);border-color:rgba(243,234,219,.4)}
.scope .btn-ghost:hover{border-color:var(--cream);background:rgba(243,234,219,.08)}

/* ==========================================================================
   5. FAQ
   ========================================================================== */
.faq-list{margin-top:clamp(34px,4vw,48px);border-top:1px solid var(--divider)}
.faq-item{
  display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(16px,3vw,48px);
  padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--divider);
}
.faq-q-wrap{display:flex;gap:16px}
.faq-num{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;color:var(--burgundy);padding-top:6px;flex:none}
.faq-q{font-family:var(--serif);font-weight:400;font-size:clamp(1.22rem,2vw,1.55rem);line-height:1.16;letter-spacing:-.01em;color:var(--espresso)}
.faq-a{font-size:1.06rem;line-height:1.62;color:var(--body);max-width:64ch}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  .page-hero-grid{grid-template-columns:1fr;gap:40px}
  .inquiry-card{max-width:520px}
  .review-layout{grid-template-columns:1fr;gap:44px}
  .next-panel{position:static;order:2}
  .scope-inner{grid-template-columns:1fr;gap:28px}
  .faq-item{grid-template-columns:1fr;gap:12px}
}

@media (max-width:760px){
  .fit-inner{grid-template-columns:1fr;gap:20px}
}

@media (max-width:620px){
  .field-grid{grid-template-columns:1fr;gap:20px}
  /* full-width, single-column, easy-to-tap options */
  .options{flex-direction:column;gap:10px}
  .option{width:100%}
  .option label,.option--stack label{width:100%}
  .form-submit .btn{width:100%;min-width:0}   /* full-width submit on mobile */
  .hero-note{max-width:none}
}

/* ---------- Hero support line + lower-page investment note (content update) ---------- */
.hero-support{
  margin-top:16px;font-size:1.02rem;line-height:1.55;color:var(--body);max-width:54ch;
}
.invest-note{
  border-top:1px solid var(--divider);
  padding-block:clamp(28px,4vw,44px);
}
.invest-note .invest-copy{
  max-width:60ch;font-size:1.05rem;line-height:1.6;color:var(--body);
}
.invest-note .invest-copy strong{color:var(--espresso);font-weight:600}