/* ============================================================
   Bali Prime Construction. Confidential BOQ review form, v5.
   Rebuilt 29 Sep 2026 from Kier's review of v4.
   Mobile first. Most visitors arrive inside Instagram's in-app
   browser, so nothing here relies on styling a native control.
   ============================================================ */

@font-face { font-family: 'Switzer'; src: url('fonts/Switzer-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/Switzer-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/Switzer-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/Switzer-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/Switzer-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --forest: #2F4B3C;
  /* Button text and anything small on gold. The brand forest is only
     4.04:1 on gold, below the 4.5 minimum. This one is 5.9:1. */
  --forest-deep: #1c3026;
  --gold: #C1A56A;
  /* Small gold text on the dark card. Brand gold is 4.04:1 there. */
  --gold-light: #d6c190;
  --cream: #EFE8DC;
  --white: #FFFFFF;
  --ink: #2F2F2F;
  /* Helper text. The old value was 3.76:1 on cream and failed. This is
     5.47:1 on cream and 6.66:1 on white. */
  --ink-soft: #5f5c56;
  --line: rgba(47, 47, 47, 0.16);
  --line-strong: rgba(47, 47, 47, 0.38);
  --error: #8A3B1F;
  --font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --radius: 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--forest); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------------- header ---------------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--forest); text-decoration: none;
}
.top-email {
  font-size: 0.92rem; font-weight: 500; color: var(--forest);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------- intro ---------------- */
.intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px var(--gutter) 8px;
}
.who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.who img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line);
}
.who-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.who-role { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; }
.label {
  margin: 0 0 10px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest);
}
.intro h1 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 6.2vw, 2.45rem);
  line-height: 1.12; font-weight: 600; letter-spacing: -0.022em;
  color: var(--forest);
}
.lede { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.meta { margin: 0 0 22px; font-size: 0.95rem; color: var(--ink-soft); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
}
.step-n {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--forest); color: var(--cream);
  font-weight: 600; font-size: 0.9rem;
}
.step-t { margin: 0; font-weight: 600; color: var(--forest); font-size: 0.98rem; }
.step-d { margin: 2px 0 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.steps-note { margin: 12px 0 0; font-size: 0.92rem; color: var(--ink-soft); }

@media (min-width: 760px) {
  .intro { padding-top: 44px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr; gap: 10px; }
}

/* In the two column layout the form area is 1080 wide, so the intro has
   to start at the same left edge or the photo and headline sit off to one
   side of the card below them. Text still stops at a readable 720. */
@media (min-width: 980px) {
  body:not(.opt-single) .intro { max-width: 1120px; }
  body:not(.opt-single) .intro > * { max-width: 720px; }
}

/* ---------------- proof ---------------- */
.proof-line { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; color: var(--forest); font-weight: 500; }
.proof--top { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.proof--top .proof-line:last-child { margin-bottom: 0; }
.proof--bottom {
  max-width: 720px; margin: 0 auto;
  padding: 36px var(--gutter);
  text-align: center;
}
.proof-title {
  margin: 0 0 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.proof--bottom-inner { padding-top: 28px; border-top: 1px solid var(--line); }
body:not(.opt-proof-top) .proof--top { display: none; }
body.opt-proof-top .proof--bottom { display: none; }

/* ---------------- form area layout ---------------- */
.form-area { padding: 22px var(--gutter) 8px; }
.form-grid { max-width: 720px; margin: 0 auto; }
.live-sheet { display: none; }

/* Two column on desktop, with the cover sheet filling in beside the form.
   This is the layout in the signed off brief. opt-single turns it off. */
@media (min-width: 980px) {
  body:not(.opt-single) .form-grid {
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 48px;
    align-items: start;
  }
  body:not(.opt-single) .live-sheet { display: block; position: sticky; top: 24px; }
  body:not(.opt-single) .card-summary { display: none; }
}

/* ---------------- form card ---------------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 22px 18px 24px;
}
@media (min-width: 560px) { .form-card { padding: 30px 32px 32px; } }

.progress { height: 3px; background: var(--line); margin: -22px -18px 20px; }
@media (min-width: 560px) { .progress { margin: -30px -32px 26px; } }
.progress span { display: block; height: 100%; width: 33.3%; background: var(--gold); transition: width 0.3s ease; }
body:not(.opt-progress) .progress { display: none; }

.intake-note { margin: 0 0 20px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

.sheet-head { margin-bottom: 18px; }
.sheet-count {
  margin: 0 0 4px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sheet-title {
  margin: 0;
  font-size: 1.45rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.014em;
  color: var(--forest);
}

.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q + .q, .q + .field, .field + .field, .field + .q { margin-top: 24px; }
.q legend, .field-label {
  display: block; padding: 0; margin: 0 0 10px;
  font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.35;
}
.q-num { color: var(--forest); margin-right: 4px; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; }
.help { margin: -4px 0 10px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------------- options ----------------
   The real radio is visually hidden and the indicator is drawn on a span
   next to it. Styling the native control directly is what failed inside
   Instagram's in-app browser, where some phones showed round native
   radios and others showed our squares. This renders the same everywhere. */
.opts { display: grid; gap: 8px; }
@media (min-width: 440px) { .opts--pair { grid-template-columns: 1fr 1fr; } }
.opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ind {
  flex: none; position: relative;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-soft);
  background: var(--white);
}
.opt-text { font-size: 0.97rem; color: var(--ink); line-height: 1.3; }
.opt:hover { border-color: var(--forest); }
.opt input:focus-visible ~ .ind { outline: 2px solid var(--forest); outline-offset: 2px; }
.opt input:checked ~ .ind { background: var(--gold); border-color: var(--gold); }
.opt input:checked ~ .ind::after {
  content: ''; position: absolute; left: 4px; top: 5px;
  width: 10px; height: 5px;
  border-left: 2px solid var(--forest-deep); border-bottom: 2px solid var(--forest-deep);
  transform: rotate(-45deg);
}
.opt:has(input:checked) { border-color: var(--forest); background: #fbf8f2; }

/* Round radio buttons, as Kier proposes. Off by default: the brief chose
   square boxes. opt-round turns this on. */
body.opt-round .ind { border-radius: 50%; }
body.opt-round .opt input:checked ~ .ind { background: var(--white); border-color: var(--forest); }
body.opt-round .opt input:checked ~ .ind::after {
  left: 50%; top: 50%; width: 10px; height: 10px;
  border: 0; border-radius: 50%; background: var(--forest);
  transform: translate(-50%, -50%);
}

/* ---------------- text fields ---------------- */
.input, .textarea, .select {
  display: block; width: 100%;
  /* 16px or larger, or iOS zooms the page on focus */
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.input::placeholder, .textarea::placeholder { color: #8a867e; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); }
.sub-field { margin-top: 12px; }

.err { margin: 8px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--error); }

/* documents link */
.confidential { margin: 0 0 6px; font-size: 0.95rem; color: var(--ink); font-weight: 500; }
.nda { margin: 0 0 12px; font-size: 0.92rem; color: var(--ink-soft); }
.small { margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.link-btn {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--forest); background: none; border: 0; padding: 6px 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-ok {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--forest);
}
.link-ok::before {
  content: ''; width: 16px; height: 16px; background: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8.1-8.1L13.2 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8.1-8.1L13.2 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.consent { margin: 22px 0 0; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------------- buttons ---------------- */
.nav { display: flex; gap: 10px; margin-top: 26px; }
.btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 18px;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.005em;
  border: 1.5px solid var(--gold); background: var(--gold); color: var(--forest-deep);
  cursor: pointer; text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #b89b5e; border-color: #b89b5e; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-back {
  flex: 0 0 auto; min-width: 104px;
  background: var(--white); color: var(--forest); border-color: var(--forest);
}
.btn-back:hover { background: #f4f1ea; border-color: var(--forest); }

.status { margin: 12px 0 0; font-size: 0.92rem; color: var(--ink-soft); min-height: 1.2em; }
.status.is-error { color: var(--error); font-weight: 600; }

/* ---------------- summary card ----------------
   Dark on every screen size. It was pale grey on desktop before. */
.summary {
  background: var(--forest); color: var(--cream);
  padding: 18px 18px 8px;
}
.summary-title {
  margin: 0 0 10px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light);
}
.summary-rows { margin: 0; padding: 0; list-style: none; }
.srow {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none; border: 0; border-top: 1px solid rgba(239, 232, 220, 0.16);
  color: var(--cream); font: inherit; text-align: left;
  cursor: pointer;
}
.srow:first-child { border-top: 0; }
.srow-k { flex: none; font-size: 0.9rem; color: rgba(239, 232, 220, 0.82); }
.srow-dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(239, 232, 220, 0.32); transform: translateY(-4px); min-width: 12px; }
.srow-v { flex: none; max-width: 62%; font-size: 0.95rem; font-weight: 600; text-align: right; }
.srow-v.is-empty { color: rgba(239, 232, 220, 0.6); font-weight: 400; }
.srow:hover .srow-k, .srow:focus-visible .srow-k { color: var(--gold-light); }
.srow:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.summary--static .srow { cursor: default; }
.summary-hint { margin: 8px 0 10px; font-size: 0.82rem; color: rgba(239, 232, 220, 0.72); }
.card-summary { margin: 0 0 22px; }

/* ---------------- confirmation and branch ---------------- */
.done-title { margin: 0 0 16px; font-size: 1.4rem; line-height: 1.25; font-weight: 600; color: var(--forest); letter-spacing: -0.012em; }
.done-steps { margin: 0 0 18px; padding-left: 22px; }
.done-steps li { margin: 0 0 10px; line-height: 1.5; }
.done-note { margin: 0 0 14px; padding: 12px 14px; background: #fbf6ea; border-left: 3px solid var(--gold); font-size: 0.95rem; }
.done-line { margin: 0 0 22px; font-size: 0.95rem; }
.branch-copy { margin: 0 0 20px; font-size: 1rem; line-height: 1.55; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 720px; margin: 0 auto; padding: 30px var(--gutter) 0; }
.faq h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 600; color: var(--forest); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 30px 16px 0; position: relative;
  font-weight: 600; font-size: 0.98rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--forest);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 16px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
body:not(.opt-faq) .faq { display: none; }

/* ---------------- disclaimer and footer ---------------- */
.disclaimer { max-width: 720px; margin: 0 auto; padding: 8px var(--gutter) 28px; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; }
.foot { background: var(--forest); color: var(--cream); padding: 28px var(--gutter); }
.foot-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.foot-name { font-weight: 600; margin: 0; }
.foot-entity { margin: 0; color: rgba(239, 232, 220, 0.86); font-size: 0.92rem; }
.foot a { color: var(--gold-light); font-size: 0.92rem; text-underline-offset: 3px; }

/* ---------------- share-a-folder help ---------------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); background: rgba(28, 48, 38, 0.55); }
.modal-box { width: 100%; max-width: 420px; background: var(--white); padding: 24px 22px; }
.modal-box h3 { margin: 0 0 14px; font-size: 1.1rem; color: var(--forest); }
.modal-box ol { margin: 0 0 20px; padding-left: 22px; }
.modal-box li { margin: 0 0 10px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }