/* ============================================================================
   Ginger Films Estimator  "The Guided Storyboard" layout
   Loads after editorial.css. Layout + wizard chrome only. app.js untouched.
   ========================================================================= */

/* Old furniture the storyboard replaces */
.sb-on .rail,
.sb-on .summary-aside,
.sb-on .gf-aisle,
.sb-on #mobileBar { display: none !important; }

/* Single column: the sticky sidebar is gone, the total lives in the bar */
.sb-on .main-grid { display: block !important; max-width: 720px; margin: 0 auto; }
.sb-on .step { display: block !important; opacity: 1 !important; transform: none !important;
  border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.sb-on .step-head { margin: 0 0 4px; }
.sb-on .step-title, .sb-on .step-num { display: none !important; }

/* ---- Bar: thread + counter + running total ---- */
.sb-bar { position: sticky; top: 0; z-index: 60; background: var(--cream);
  border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.sb-thread { height: 2px; background: var(--border); }
.sb-thread i { display: block; height: 2px; width: 0; background: var(--gold);
  transition: width .55s cubic-bezier(.22,1,.36,1); }
.sb-barin { max-width: 720px; margin: 0 auto; padding: 13px 26px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sb-count { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); }
.sb-total { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.sb-total b { font-family: "Cormorant Garamond", "Fraunces", Georgia, serif;
  font-size: 20px; letter-spacing: 0; color: var(--ink); font-weight: 500;
  margin-left: 9px; font-variant-numeric: tabular-nums; }

/* ---- Screens ---- */
.sb-screen { max-width: 720px; margin: 0 auto; padding: 40px 26px 8px;
  animation: sbIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes sbIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.sb-eye { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2); }
.sb-q { font-family: "Cormorant Garamond", "Fraunces", Georgia, serif;
  font-weight: 300; font-size: clamp(30px, 5vw, 46px); line-height: 1.07;
  letter-spacing: -.012em; margin: 13px 0 11px; text-wrap: balance; max-width: 17ch; color: var(--ink); }
.sb-q em { font-style: italic; color: var(--gold); }
.sb-say { font-size: 14.5px; color: var(--muted); max-width: 52ch; margin: 0 0 32px; line-height: 1.65; }
.sb-body { display: block; }

/* ---- Nav ---- */
.sb-nav { max-width: 720px; margin: 0 auto; padding: 22px 26px 72px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sb-next { padding: 15px 32px; background: var(--ink); color: var(--cream);
  border: 0; font-size: 11.5px; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 500; cursor: pointer; transition: background .22s; }
.sb-next:hover { background: var(--gold); }
.sb-back { background: none; border: 0; cursor: pointer; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); }
.sb-back:hover { color: var(--ink); }

/* ---- Day tabs ---- */
.sb-daytabs { display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.sb-daytab { padding: 11px 17px; font-size: 13px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: .18s; }
.sb-daytab:hover { color: var(--ink); }
.sb-daytab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.sb-daytab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #B84B34; margin-left: 7px; vertical-align: middle; }
.sb-daytab[aria-selected="true"] .sb-daytab-dot { background: var(--gold); }

.sb-screen[data-sb="6"] .generate-btn { width: 100%; margin-top: 8px; }

@media (max-width: 660px) {
  .sb-screen { padding: 30px 20px 8px; }
  .sb-nav { padding: 18px 20px 64px; }
  .sb-barin { padding: 11px 20px; }
  .sb-next { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-screen { animation: none; } .sb-thread i { transition: none; }
}

/* ---- Screen furniture: keep the storyboard calm ----
   NOT .trust-strip: its opening div is duplicated and unclosed in index.html,
   so the browser nests the whole page inside it and display:none blanks the
   site. Target the inner marquee instead. */
.sb-on .trust-inner,
.sb-on .ogilvy-block,
.sb-on .studio-note,
.sb-on .ornamental-divider,
.sb-on .why-gf { display: none !important; }
.sb-on .trust-strip { padding: 0 !important; border: 0 !important; min-height: 0 !important; }

/* Emoji sit in their own spans, so the copy survives without them */
.hero-trust-icon { display: none !important; }
.hero-trust-point { letter-spacing: .02em; }

/* The screen already asks the question; the old description repeats it */
.sb-on .sb-body .step-desc,
.sb-on .sb-body .step-desc-note { display: none !important; }
.sb-on #exploreFirstLink { display: inline-block; margin: 0 0 22px; }

/* ---- 13. Narrow-screen fixes found by cross-browser audit (3 Sep) --------
   Two faults, reproduced on Chromium, Firefox and WebKit at 375/393/412:
   (a) .deliv-grid used minmax(250px,1fr), which cannot shrink below 250px, so
       inside a 287px container the cards ran ~50px off-screen. The unclosed
       .trust-strip wraps the page in overflow:hidden, so that content was
       clipped and unreachable rather than merely scrollable.
   (b) .role-block is 'grid-template-columns: 1fr auto'. Deliverable groups put
       the label in column 1 and the card grid in column 2 - right on desktop,
       far too cramped on a phone.
   Fix (b) is scoped to #deliverableGroups: crew groups must KEEP 1fr/auto,
   because their quantity stepper is explicitly placed in column 2. */
.sb-on .deliv-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important; }
.sb-on .deliv-card, .sb-on .opt-card { min-width: 0; }

@media (max-width: 720px) {
  .sb-on #deliverableGroups .role-block { grid-template-columns: 1fr !important; }
  .sb-on #deliverableGroups .role-block > * { grid-column: 1 !important; min-width: 0; }
  .sb-on .deliv-grid { grid-template-columns: 1fr !important; }
}

/* ---- 14. Tap targets: audit found several under the 44px guideline ------ */
.sb-back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.sb-daytab { min-height: 44px; }
.sb-on #guidanceToggle { min-height: 44px; display: flex; align-items: center; }
.sb-on .deliv-qty-controls button { min-width: 40px; min-height: 40px; }

/* ---- 15. Match the approved mockup -------------------------------------
   Measured gap: 395px of marketing hero sat above the first question, fields
   were boxed rather than ruled, app.js's own CTA rendered alongside the
   storyboard's Continue, and reassurance copy the mockup does not carry
   crowded every screen. */
.sb-on .hero,
.sb-on .hero-trust-points,
.sb-on .hero-service-area { display: none !important; }
.sb-on #brandBar { background: var(--cream); border-bottom: 1px solid var(--border); box-shadow: none; }

.sb-on input[type="text"], .sb-on input[type="tel"], .sb-on input[type="email"],
.sb-on input[type="number"], .sb-on input[type="date"], .sb-on input[type="time"],
.sb-on select, .sb-on textarea {
  background: var(--cream-2) !important; border: 1px solid rgba(26,25,23,.32) !important;
  border-radius: 4px !important; padding: 12px 14px !important;
  font-size: 16px !important; font-weight: 400 !important; box-shadow: none !important;
}
.sb-on select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%238A6D3B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
  padding-right: 38px !important;
}
.sb-on input:focus, .sb-on select:focus, .sb-on textarea:focus {
  border-color: var(--gold) !important; outline: none !important;
  box-shadow: 0 0 0 1px var(--gold) !important; }
.sb-on .field-label { font-size: 10px !important; letter-spacing: .19em;
  text-transform: uppercase; color: var(--muted); }

/* One CTA per screen. app.js's button is clicked programmatically by
   storyboard.js, so hiding it keeps the contact gate, partial-lead capture
   and the Meta Lead event firing exactly as before. */
.sb-on #detailsContinueBtn, .sb-on .details-gate-hint,
.sb-on #exploreFirstLink { display: none !important; }

/* Copy the mockup does not carry. .delivery-note is deliberately KEPT. */
.sb-on .field-hint, .sb-on .field-nudge, .sb-on #budgetGuidanceNote,
.sb-on .data-safety-note, .sb-on .investment-note { display: none !important; }

/* ---- 16. Brand bar + label alignment ----------------------------------- */
.sb-on #brandBar img,
.sb-on #brandBar span:not(.brand-bar-name) { display: none !important; }
.sb-on .brand-bar-name { font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 16px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.sb-on .brand-bar-name::after { content: " estimator"; font-style: italic;
  text-transform: none; letter-spacing: 0; color: var(--gold); }
.sb-on .field-grid { align-items: start; }
.sb-on .field-label { display: block; min-height: 2.4em; line-height: 1.2; }

/* ---- 17. Round-3 notes: hero back, readable type, docked WhatsApp ------- */
.sb-on .hero { display: block !important; height: auto !important;
  min-height: 0 !important; padding: 64px 0 48px !important; }
.sb-on .hero-trust-points { display: flex !important; }
.sb-on .hero-service-area { display: block !important; }

/* Readability: weight 300 on a warm off-white was legible but effortful. */
:root { --muted: #57514A; --muted-2: #857E75; }
body { font-weight: 400; }
.sb-on p, .sb-on li, .sb-on label { font-weight: 400; }
.sb-q { font-weight: 400; }
.sb-say { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; }
.sb-on .field-label { font-size: 11px !important; font-weight: 500;
  color: #5E574F; letter-spacing: .16em; }
.sb-on input, .sb-on select, .sb-on textarea { font-weight: 400 !important; }
.sb-on .role-name, .sb-on .deliv-name, .sb-on .opt-name,
.sb-on .package-name, .sb-on .crew-name { font-weight: 500; }
.sb-on .role-desc, .sb-on .deliv-blurb, .sb-on .opt-blurb,
.sb-on .deliv-desc { color: #5E574F; font-size: 13px; line-height: 1.5; }
.sb-eye { color: #7A736A; font-weight: 500; }

/* WhatsApp docked into the nav row by storyboard.js - no longer floating */
.sb-on .portfolio-floater.sb-docked {
  position: static !important; display: inline-flex !important; opacity: 1 !important;
  transform: none !important; bottom: auto !important; right: auto !important;
  background: transparent !important; color: var(--gold) !important;
  box-shadow: none !important; border: 1px solid var(--border) !important;
  border-radius: 0 !important; padding: 7px 13px !important;
  font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; margin-left: auto;
}
.sb-on .portfolio-floater.sb-docked:hover { border-color: var(--gold) !important; filter: none !important; }
.sb-on .portfolio-floater.sb-docked span,
.sb-on .portfolio-floater.sb-docked svg,
.sb-on .portfolio-floater.sb-docked img { display: none !important; }
.sb-on .portfolio-floater.sb-docked::after { content: "WhatsApp us"; }
.sb-delivbox { display: block; }

/* ---- 18. Guided, directional transitions ------------------------------- */
.sb-screen { animation: none; }
.sb-screen.sb-in-next { animation: sbNext .48s cubic-bezier(.22,1,.36,1) both; }
.sb-screen.sb-in-back { animation: sbBack .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes sbNext { from { opacity: 0; transform: translate3d(26px,0,0); }
                    to   { opacity: 1; transform: none; } }
@keyframes sbBack { from { opacity: 0; transform: translate3d(-26px,0,0); }
                    to   { opacity: 1; transform: none; } }
.sb-thread i { transition: width .6s cubic-bezier(.22,1,.36,1); }
@media (max-width: 660px) {
  .sb-nav { gap: 12px; }
  .sb-nav .portfolio-floater.sb-docked { margin-left: 0; width: 100%;
    justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-screen.sb-in-next, .sb-screen.sb-in-back { animation: none; }
}

/* ---- 19. The hero must belong to the storyboard, not the old page -------
   Restoring .hero brought back the ORIGINAL hero: rounded pill trust chips,
   centred marketing copy, a scroll chevron. ~400px of the old design sat on
   top of the new one, so the first screenful read as unchanged. Same content,
   editorial treatment, same 720px measure as the screens. */
.sb-on .hero { padding: 72px 0 40px !important; background: var(--cream) !important; }
.sb-on .hero-overlay, .sb-on .hero-inner, .sb-on .hero-content {
  max-width: 720px; margin: 0 auto; padding-left: 26px; padding-right: 26px;
  text-align: left !important; }
.sb-on .hero-headline {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important; font-size: clamp(38px, 6.4vw, 68px) !important;
  line-height: 1.03 !important; letter-spacing: -.018em !important;
  text-align: left !important; margin: 0 0 14px !important; max-width: 15ch; }
.sb-on .hero-headline-sub {
  font-size: 15.5px !important; color: var(--ink-2) !important; line-height: 1.62;
  text-align: left !important; max-width: 46ch; margin: 0 0 26px !important; }
.sb-on .hero-cta {
  border-radius: 0 !important; background: var(--ink) !important;
  color: var(--cream) !important; padding: 15px 32px !important;
  font-size: 11.5px !important; letter-spacing: .19em; text-transform: uppercase;
  box-shadow: none !important; }
.sb-on .hero-cta-note { text-align: left !important; font-size: 12.5px; color: var(--muted); }
.sb-on .hero-scroll, .sb-on .hero-logo-mark { display: none !important; }

/* Trust points: rules and spacing, not pills */
.sb-on .hero-trust-points {
  max-width: 720px; margin: 0 auto !important; padding: 14px 26px !important;
  justify-content: flex-start !important; gap: 0 !important; flex-wrap: wrap;
  border-top: 1px solid var(--border); }
.sb-on .hero-trust-point {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 4px 0 !important; font-size: 11px !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; }
.sb-on .hero-trust-point + .hero-trust-point::before {
  content: "\00B7"; margin: 0 12px; color: var(--muted-2); }
.sb-on .hero-service-area {
  max-width: 720px; margin: 0 auto !important; padding: 0 26px 24px !important;
  text-align: left !important; font-size: 12.5px; color: var(--muted) !important; }

/* ---- 20. WhatsApp label was doubling ("Message us directly on WhatsApp
   WhatsApp us") - the original label is a bare text node, so zero the
   anchor's font-size and restore it only on the generated label. */
.sb-on .portfolio-floater.sb-docked { font-size: 0 !important; }
.sb-on .portfolio-floater.sb-docked::after {
  font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; }

/* ---- 21. Hero internals: the old hero was a fixed-height stage with its
   content absolutely positioned over a dark image, so height:auto collapsed
   the headline out of flow and left its light-on-dark colour unreadable on
   the cream ground. Put the children back in normal flow, give them ink. */
.sb-on .hero-overlay, .sb-on .hero-inner, .sb-on .hero-content, .sb-on .hero-copy {
  position: static !important; inset: auto !important; top: auto !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; height: auto !important; min-height: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; display: block !important;
}
.sb-on .hero-headline, .sb-on .hero-headline strong, .sb-on .hero-headline em {
  color: var(--ink) !important; text-shadow: none !important; }
.sb-on .hero-headline-sub, .sb-on .hero-cta-note { text-shadow: none !important; }
.sb-on .hero::before, .sb-on .hero::after { display: none !important; }

/* ============ 22. Hero trust band: editorial grid, no orphan separators ============ */
.sb-on #trustProofStrip,
.sb-on .hero-service-area { background: var(--cream) !important; }

.sb-on #trustProofStrip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  column-gap: 28px !important;
  row-gap: 13px !important;
  gap: 13px 28px !important;
  padding: 20px 26px 16px !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  align-items: start !important;
}
.sb-on .hero-trust-point + .hero-trust-point::before { content: none !important; }
.sb-on .hero-trust-icon { display: none !important; }
.sb-on .hero-trust-point {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .155em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  white-space: normal !important;
}
.sb-on .hero-service-area {
  padding: 14px 26px 30px !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}
@media (max-width: 720px) {
  .sb-on #trustProofStrip { grid-template-columns: repeat(2, 1fr) !important;
    padding: 18px 22px 14px !important; }
  .sb-on .hero-service-area { padding: 14px 22px 26px !important; }
}

/* progress rules: align to the 720 editorial column, not full bleed */
.sb-on .sb-thread { max-width: 720px !important; margin-left: auto !important;
  margin-right: auto !important; }
.sb-on .sb-bar { border-bottom: 0 !important; }
.sb-on .sb-barin { border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important; }

/* ============ 23. The number, in the flow ============ */
.sb-on .sb-screen .summary-box {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 26px 0 4px !important;
  margin: 26px 0 0 !important;
  position: static !important;
  max-width: none !important;
}
.sb-on .sb-screen .summary-kicker,
.sb-on .sb-screen .summary-live,
.sb-on .sb-screen .summary-box > .summary-title { display: none !important; }
.sb-on .sb-screen .summary-crew {
  font-size: 12.5px !important; color: var(--muted) !important;
  line-height: 1.7 !important; margin-bottom: 20px !important;
}
.sb-on .sb-screen .summary-totals {
  display: block !important; border-top: 1px solid var(--border) !important;
  padding-top: 16px !important; margin-top: 4px !important;
}
.sb-on .sb-screen .summary-totals > div {
  display: flex !important; justify-content: space-between !important;
  align-items: baseline !important; gap: 20px !important;
  padding: 5px 0 !important; font-size: 13px !important; color: var(--muted) !important;
}
.sb-on .sb-screen .summary-grand {
  border-top: 1px solid var(--border) !important;
  margin-top: 12px !important; padding-top: 16px !important;
}
.sb-on .sb-screen .summary-grand > * { color: var(--ink) !important; }
.sb-on .sb-screen .summary-grand-value {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(34px, 5.6vw, 52px) !important;
  font-weight: 300 !important; line-height: 1 !important;
  letter-spacing: -.01em !important; color: var(--ink) !important;
}
.sb-on .sb-screen .summary-note,
.sb-on .sb-screen .summary-box p {
  font-size: 12px !important; line-height: 1.65 !important;
  color: var(--muted) !important; margin-top: 16px !important; max-width: 58ch;
}