/* Bay Permit Desk, scroll build. Page styles on top of scrollcraft.css.
   Theme: black ground, orange accent, paper card; two faces. The one shape is the inspection tag (clipped corner). */
:root {
  --sc-canvas: #050505;
  --sc-surface: #161616;
  --sc-ink: #f5f5f5;
  --sc-ink-soft: #b5b5b5;
  --sc-accent: #ea6a3e;
  --sc-accent-ink: #050505;
  --sc-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --sc-shadow-color: 0 0% 2%;
  --sc-r-sm: 0px; --sc-r-md: 0px; --sc-r-lg: 0px;
  --blue: #2f6bb5;
  --blue-deep: #0b3c7a;
  --paper: #f5f5f5;
  --notch: 14px;
}
html { background: var(--sc-canvas); }
.sc-display { font-weight: 700; letter-spacing: -0.01em; }
.sc-body { color: var(--sc-ink); }
.soft { color: var(--sc-ink-soft); }
.tag { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.nums { font-variant-numeric: tabular-nums; }
:focus-visible { border-radius: 0; }

/* ---------- chrome: the bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: var(--sc-4); padding: var(--sc-3) var(--sc-gutter); padding-top: calc(var(--sc-3) + env(safe-area-inset-top, 0px)); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar .mark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; text-decoration: none; white-space: nowrap; }
.bar .mark svg { width: 1.4rem; height: 1.4rem; }
.bar .mark .badge { width: 2rem; height: 2rem; border-radius: 0.45rem; object-fit: cover; }
.bar .mark .badge--glove { width: 3rem; height: 3rem; margin: -0.55rem 0; border-radius: 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.bar .phone { margin-left: auto; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.55rem 1.2rem; background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: transform var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--quiet { background: var(--sc-surface); color: var(--sc-ink); }
@media (max-width: 560px) { .bar .phone { display: none; } .bar .mark { font-size: 1.15rem; } }

/* ---------- the running permit (signature move) ---------- */
.permit { position: fixed; z-index: calc(var(--sc-z-chrome) - 1); width: min(440px, calc(100vw - 2 * var(--sc-gutter))); background: var(--paper); color: #10213a; padding: 1.25rem 1.4rem; box-shadow: var(--sc-e3); will-change: transform; transform-origin: top right; right: var(--sc-gutter); top: 50%; transform: translateY(-50%); transition: transform 760ms var(--sc-ease-drawer), opacity 400ms var(--sc-ease-out); }
.permit::before { content: ""; position: absolute; top: calc(var(--notch) + 8px); right: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--sc-canvas); }
.permit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-right: 2rem; }
.permit-no { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.permit-type { color: #4a5a70; font-size: 0.95rem; margin-top: 0.25rem; }
.chip { display: inline-block; padding: 0.15em 0.6em 0.2em; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; background: #4a5a70; color: #fff; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.chip--on { background: var(--sc-accent); color: var(--sc-accent-ink); }
.permit dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 1rem 0 0; font-size: 0.95rem; }
.permit dt { color: #4a5a70; }
.permit dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.permit-stamps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; padding: 0; list-style: none; }
.permit-stamps a { display: inline-block; padding: 0.15em 0.55em 0.2em; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-decoration: none; color: #4a5a70; border: 2px solid #c3cddb; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); transition: background var(--sc-d-base), color var(--sc-d-base), transform 420ms var(--sc-ease-out); }
.permit-stamps li.on a { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.permit-stamps li.on.issued a { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); transform: rotate(-2deg); }
.permit-stamps li.on.finaled a { background: #10213a; border-color: #10213a; color: #fff; }
.permit-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: #4a5a70; }
/* docked: top right, smaller */
.permit.is-docked { transform: translateY(0) scale(0.54); top: calc(4.5rem + env(safe-area-inset-top, 0px)); }
.permit.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .permit { right: var(--sc-gutter); left: var(--sc-gutter); width: auto; top: auto; bottom: 4svh; transform: none; transform-origin: bottom center; padding: 0.9rem 1rem; }
  .permit dl, .permit-type { display: none; }
  .permit-note { margin-top: 0.6rem; }
  .permit.is-docked { transform: none; top: auto; bottom: 0; left: 0; right: 0; padding: 0.6rem var(--sc-gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px hsl(var(--sc-shadow-color) / 0.4); }
  .permit.is-docked dl, .permit.is-docked .permit-note, .permit.is-docked .permit-type, .permit.is-docked::before { display: none; }
  .permit.is-docked .permit-head { padding-right: 0; align-items: center; }
  .permit.is-docked .permit-no { font-size: 1.15rem; }
  .permit.is-docked .permit-stamps { margin-top: 0.45rem; gap: 0.3rem; }
  .permit.is-docked .permit-stamps a { font-size: 0.8rem; padding: 0.1em 0.45em; }
}
@media (prefers-reduced-motion: reduce) { .permit { transition: opacity 220ms; } }

/* ---------- act 1: hero. The logo IS the hero: black stage, glove through the permit, copy beneath. ---------- */
.hero .sc-stage { background: #050505; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: start; gap: var(--sc-5); padding: calc(4.5rem + env(safe-area-inset-top, 0px)) var(--sc-gutter) var(--sc-6); box-sizing: border-box; }
.hero-logo { display: block; width: min(100%, 46vw, 760px); height: auto; margin-left: -3%; mix-blend-mode: screen; user-select: none; -webkit-user-drag: none; }
.hero-copy { position: static; max-width: 40rem; }
.hero-copy h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); max-width: 13ch; color: #fff; }
.hero-copy .sc-lede { margin-top: var(--sc-4); max-width: 38ch; color: #d7dde8; }
.hero-copy .sc-lede strong { color: var(--sc-accent); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); margin-top: var(--sc-5); }
.hero-actions .link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; color: #fff; }
@media (max-width: 860px) {
  .hero .sc-stage { align-content: start; gap: var(--sc-4); padding-top: calc(4.75rem + env(safe-area-inset-top, 0px)); }
  .hero-logo { width: 100%; margin-left: 0; }
  .hero-copy h1 { font-size: var(--sc-t-2xl); }
  .hero-copy .sc-lede { font-size: 1.05rem; margin-top: var(--sc-3); }
}
@media (max-height: 700px) and (min-width: 861px) { .hero-logo { width: min(38vw, 560px); } }

/* ---------- act 2: the night (pin) ---------- */
.night .sc-stage { display: grid; align-items: end; }
.night-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.28; filter: saturate(0.4); }
.night-wrap { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter) clamp(3rem, 10vh, 7rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-6) var(--sc-8); align-items: end; }
.night-lines { display: grid; }
.night-lines > * { grid-area: 1 / 1; }
.night-line { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 0.96; letter-spacing: -0.01em; max-width: 12ch; margin: 0; }
.night-line .t { display: block; font-size: 0.42em; font-weight: 600; color: var(--sc-ink-soft); letter-spacing: 0; margin-bottom: 0.3em; }
.night-figs { display: grid; gap: var(--sc-5); }
.fig { margin: 0; }
.fig .n { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 0.9; letter-spacing: -0.02em; }
.fig .l { display: block; margin-top: 0.4rem; max-width: 26ch; color: var(--sc-ink); }
@media (max-width: 860px) { .night-wrap { grid-template-columns: 1fr; gap: var(--sc-5); padding-bottom: 26svh; } .night-line { font-size: var(--sc-t-2xl); max-width: 14ch; } .fig .n { font-size: var(--sc-t-2xl); } .night-figs { gap: var(--sc-4); } }

/* ---------- act 3: the thread (flow) ---------- */
.thread-section { padding-block: var(--sc-section) calc(var(--sc-section) + 24vh); }
.thread-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-7) var(--sc-9); align-items: center; }
.thread { display: grid; gap: 0.6rem; max-width: 30rem; margin: 0; padding: 0; list-style: none; }
.msg { max-width: 86%; padding: 0.8rem 1rem; line-height: 1.4; }
.msg .who { display: block; font-size: 0.8rem; color: var(--sc-ink-soft); margin-bottom: 0.2rem; }
.msg--you { justify-self: end; background: var(--blue-deep); color: #fff; }
.msg--you .who { color: #cfe0f6; }
.msg--desk { justify-self: start; background: var(--paper); color: #10213a; }
.msg--desk .who { color: #4a5a70; }
.msg strong { font-weight: 700; }
.msg .photo { display: block; margin-top: 0.5rem; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.thread-caption { margin-top: var(--sc-4); font-size: 0.9rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .thread-grid { grid-template-columns: 1fr; gap: var(--sc-6); } .thread-section { padding-bottom: calc(var(--sc-section) + 16vh); } }

/* ---------- act 4: the check and the stamp (pin, the peak) ---------- */
.proof .sc-stage { display: grid; align-items: center; }
.proof-wrap { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-6) var(--sc-8); align-items: center; }
.proof-wrap h2 { max-width: 12ch; }
.checks { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-4); }
.checks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: start; font-size: var(--sc-t-lg); line-height: 1.3; }
.checks li::before { content: ""; width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; background: var(--blue); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.checks li small { display: block; font-size: 0.78em; color: var(--sc-ink-soft); margin-top: 0.15rem; }
.proof-card { position: relative; justify-self: center; width: min(100%, 440px); background: var(--paper); color: #10213a; padding: 1.4rem 1.5rem; box-shadow: var(--sc-e3); }
.proof-card .permit-head { padding-right: 1.5rem; }
.proof-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 1rem 0 0; font-size: 0.95rem; }
.proof-card dt { color: #4a5a70; } .proof-card dd { margin: 0; font-weight: 600; }
/* the stamp: driven from the act's progress, slams between p 0.72 and 0.80 */
.stamp { --k: clamp(0, calc((var(--sc-p, 0) - 0.72) / 0.08), 1); position: absolute; right: -4%; top: 34%; padding: 0.35rem 0.9rem 0.45rem; border: 5px solid var(--sc-accent); color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; opacity: var(--k); transform: rotate(-11deg) scale(calc(1.9 - 0.9 * var(--k))); transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; mix-blend-mode: multiply; }
.stamp small { display: block; font-size: 0.32em; letter-spacing: 0.08em; font-weight: 600; }
.proof-after { --k: clamp(0, calc((var(--sc-p, 0) - 0.82) / 0.08), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 12px)); margin-top: var(--sc-5); max-width: 36ch; }
@media (prefers-reduced-motion: reduce) { .stamp { --k: 1 !important; } .proof-after { --k: 1 !important; } }
@media (max-width: 860px) {
  .proof-wrap { grid-template-columns: 1fr; gap: var(--sc-5); align-content: center; padding-top: 4rem; }
  .checks li { font-size: 1.05rem; } .checks { margin-top: var(--sc-4); gap: var(--sc-3); }
  .proof-card { padding: 1rem 1.1rem; } .proof-card dl { display: none; }
  .stamp { font-size: 2.4rem; top: 18%; right: 0; }
  .proof-after { display: none; }
}

/* ---------- act 5: the jurisdictions (pan) ---------- */
.where .sc-stage { display: grid; align-items: center; }
.rail { display: flex; align-items: stretch; gap: var(--sc-5); padding-inline: var(--sc-gutter); will-change: transform; }
.rail > * { flex: 0 0 auto; }
.rail-lead { width: min(38vw, 30rem); align-self: center; padding-right: var(--sc-6); }
.rail-lead h2 { max-width: 10ch; }
.rail-lead p { margin-top: var(--sc-4); max-width: 30ch; }
.place { width: clamp(17rem, 26vw, 23rem); display: grid; grid-template-rows: auto 1fr; background: var(--sc-surface); }
.place figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.place img { width: 100%; height: 100%; object-fit: cover; }
.place .label { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.place .label h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; margin: 0 0 0.3rem; }
.place .label .k { color: var(--sc-ink-soft); }
.place .label .time { font-weight: 700; }
.rail-close { width: min(40vw, 28rem); align-self: center; display: grid; gap: var(--sc-4); padding-left: var(--sc-6); color: var(--sc-ink); }
.rail-close .fl { width: min(100%, 220px); height: auto; color: var(--blue); }
.rail-close h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1; margin: 0; max-width: 14ch; }
.rail-close p { margin: 0; max-width: 34ch; }
.rail-close .record { font-size: 0.9rem; color: var(--sc-ink-soft); }
/* staggered settle from the rail's progress */
@media (prefers-reduced-motion: no-preference) {
  .rail > *:not(:first-child) { --i: 1; opacity: calc(0.55 + 0.45 * clamp(0, calc((var(--sc-p, 0) * 6 - var(--i) + 1)), 1)); transform: translateY(calc((1 - clamp(0, calc((var(--sc-p, 0) * 6 - var(--i) + 1)), 1)) * 18px)); }
  .rail > *:nth-child(2) { --i: 1; } .rail > *:nth-child(3) { --i: 2; } .rail > *:nth-child(4) { --i: 3; } .rail > *:nth-child(5) { --i: 4; } .rail > *:nth-child(6) { --i: 5; }
}
@media (max-width: 860px) {
  .rail { gap: var(--sc-4); }
  .rail-lead { width: 72vw; padding-right: 0; } .rail-close { width: 78vw; padding-left: 0; }
  .place { width: 74vw; }
}

/* ---------- act 6: answers, who, and the job (flow) ---------- */
.answers { padding-block: var(--sc-section); }
.answers-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.faq { display: grid; gap: 4px; margin-top: var(--sc-6); }
.faq details { background: var(--sc-surface); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 1.1rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--sc-accent); font-weight: 700; font-size: 1.4rem; line-height: 1; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq .a { padding: 0 1.1rem 1.1rem; max-width: 56ch; color: var(--sc-ink); }
.who { display: grid; gap: var(--sc-5); }
.who h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1; margin: 0; }
.who ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.who li { position: relative; padding-left: 1.5rem; }
.who li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.8em; height: 0.8em; background: var(--blue); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.who .no li::before { background: var(--sc-ink-soft); }
.portrait { width: min(100%, 260px); aspect-ratio: 1 / 1; background: var(--blue-deep); color: #fff; display: flex; align-items: flex-end; padding: 0.9rem; font-family: var(--sc-font-display); font-weight: 600; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.job { padding-block: 0 var(--sc-section); }
.job-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.job-grid .bigphone { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 1; text-decoration: none; user-select: all; margin-top: var(--sc-4); }
.job-grid .bigphone:hover { color: var(--sc-accent); }
.ticket { background: var(--paper); color: #10213a; padding: clamp(1.25rem, 3vw, 2.25rem); position: relative; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; top: 4.4rem; border-top: 4px dotted var(--sc-canvas); }
.ticket h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; margin: 0 0 2.2rem; line-height: 1; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.field { display: grid; gap: 0.3rem; } .field.wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9rem; } .field label .opt { font-weight: 400; color: #4a5a70; }
.ticket input, .ticket select, .ticket textarea { width: 100%; min-height: 2.9rem; padding: 0.55rem 0.75rem; background: #fff; border: 2px solid #b7c3d3; color: #10213a; }
.ticket textarea { min-height: 5.5rem; resize: vertical; }
.ticket :is(input, select, textarea):focus-visible { outline-offset: 0; border-color: var(--blue-deep); }
.ticket .submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.ticket .submit .btn { border: 0; cursor: pointer; }
.ticket .status { grid-column: 1 / -1; margin: 0; font-weight: 600; min-height: 1.4em; }
.ticket .status[data-state="error"] { color: #b5411a; }
.ticket .success { display: grid; gap: 0.8rem; }
.ticket .success h3 { margin: 0; }
@media (max-width: 860px) { .answers-grid, .job-grid { grid-template-columns: 1fr; gap: var(--sc-6); } }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* ---------- act 7: the close (pin) ---------- */
.close .sc-stage { display: grid; align-items: center; background: var(--sc-canvas); }
.close-inner { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); align-content: center; min-height: 100svh; padding-top: 6rem; padding-bottom: 2rem; }
.close-inner h2 { max-width: 10ch; }
.close-phone { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 1; text-decoration: none; user-select: all; }
.close-phone:hover { color: var(--sc-accent); }
.close-actions { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-5); align-items: center; }
.close-actions .btn { font-size: 1.4rem; min-height: 3.2rem; padding-inline: 1.6rem; }
.foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sc-4) var(--sc-7); padding-top: var(--sc-6); font-size: 0.9rem; color: var(--sc-ink-soft); }
.foot p { margin: 0; max-width: 46ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot a { text-decoration: none; color: var(--sc-ink); } .foot a:hover { text-decoration: underline; }
.foot .credits { grid-column: 1 / -1; font-size: 0.8rem; max-width: none; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; } .close-inner { padding-bottom: 7rem; } }

/* phone layout: the docked permit strip covers the bottom, so give the last screens room */
@media (max-width: 860px) { .job { padding-bottom: calc(var(--sc-section) + 4rem); } }