/* =========================================================================
   Sparrows · product and utility pages
   Loaded after styles.css. The page ground stays white; product proof lives
   inside quiet interface cards with one shared geometry and product-specific
   compositions.
   ========================================================================= */

:root {
  /* ---- Poetic-style type system, matched to the home (blueprint.css) ---- */
  --font-display: "Inter Tight", "Inter", Arial, Helvetica, sans-serif;
  --font-ui: "Inter", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --font-mn: "Inter", Arial, Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-grot: "Inter", Arial, Helvetica, sans-serif;
  --cobalt: #2337ec; --cobalt-deep: #1b2bc9; --ember: #ff7a29;

  --ink: #101014; --ink-pure: #0a0a0a; --ink-soft: rgba(16,16,20,.56); --muted: rgba(16,16,20,.5);
  --blue-50:#eef0ff; --blue-100:#e3e6ff; --blue-200:#cbd2fb; --blue-300:#9fa9f6;
  --blue-400:#5c6cf1; --blue-500:#2337ec; --blue-600:#1b2bc9;
  --line:#e7e9f4; --line-strong:#d7dcef;

  --sp-blue:#2337ec; --sp-blue-2:#6675f0; --sp-blue-soft:#eef1ff;
  --sp-surface:#f7f8fd; --sp-line:#e7e9f4; --sp-muted:#5c6472;
  --sp-shadow:0 28px 80px rgba(25,39,75,.10), 0 4px 16px rgba(25,39,75,.05);
  --sp-float:0 16px 42px rgba(25,39,75,.11), 0 3px 10px rgba(25,39,75,.05);
}

body.sub-page { background:#fff; color:var(--ink); }
body.sub-page .container { max-width:1248px; padding-inline:24px; }

/* ================= editorial lift · serif display, mono labels, cobalt ================= */
body.sub-page .page-hero h1,
body.sub-page .section-title,
body.sub-page .cta h2 { font-family:var(--font-display); font-weight:500; letter-spacing:-.03em; }
body.sub-page .page-hero .lead { font-family:var(--font-ui); letter-spacing:-.006em; }
body.sub-page .fb h4,
body.sub-page .svc h3,
body.sub-page .feat h3 { font-family:var(--font-ui); font-weight:600; letter-spacing:-.018em; }
body.sub-page .eyebrow { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cobalt); }
body.sub-page .crumb { font-family:var(--font-mono); color:var(--ink-soft); }
body.sub-page .crumb a { color:var(--cobalt); }
body.sub-page .badge { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--ink-soft); }
body.sub-page .badge .tag { color:var(--cobalt); background:var(--sp-blue-soft); }
body.sub-page .btn { font-family:var(--font-ui); }
body.sub-page .btn-dark { background:var(--ink); }
body.sub-page .btn-lg { min-height:52px; }
body.sub-page .link-arrow { color:var(--cobalt); }
body.sub-page .stage-metric b { color:var(--cobalt); font-weight:500; }
body[data-page="bestshot"] .bestshot-action .stage-metric b { color:var(--warm); }
body.sub-page .studio-brief b { font-weight:500; }
body.product-page .viz-bars i.hi { background:var(--cobalt); }

/* ================= glass pill nav (matches the home) ================= */
body.sub-page .site-nav { position:fixed; inset:16px 0 auto; z-index:60; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.sub-page .site-nav.scrolled { background:transparent; box-shadow:none; }
body.sub-page .nav-inner {
  position:relative; width:min(calc(100% - 32px),1120px); max-width:none; margin-inline:auto;
  min-height:58px; padding:10px 12px 10px 22px; gap:20px; border-radius:999px;
  background:rgba(255,255,255,.82); box-shadow:0 18px 52px rgba(20,31,61,.12), inset 0 0 0 1px rgba(25,39,75,.08);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
body.sub-page .nav-inner .brand { font-family:var(--font-ui); font-weight:600; font-size:18px; color:var(--ink); }
body.sub-page .nav-inner .brand .mark { color:var(--cobalt); }
body.sub-page .nav-menu { position:absolute; left:50%; transform:translateX(-50%); gap:26px; }
body.sub-page .nav-menu a,
body.sub-page .nav-drop > button { font-family:var(--font-ui); font-size:14px; font-weight:400; color:var(--ink-soft); }
body.sub-page .nav-menu a:hover,
body.sub-page .nav-drop > button:hover { color:var(--ink); }
body.sub-page .nav-spacer { display:none; }
body.sub-page .nav-cta { margin-left:auto; gap:16px; }
body.sub-page .nav-login { font-family:var(--font-ui); font-size:14px; color:var(--ink); }
body.sub-page .nav-cta .btn-dark { min-height:42px; padding:10px 20px; }
@media (max-width:760px) {
  body.sub-page .nav-cta { display:none; }
  body.sub-page .nav-toggle { margin-left:auto; }
  body.sub-page .nav-inner { padding:8px 10px 8px 18px; }
}

/* ============================ page heroes ============================ */
body.sub-page .page-hero {
  padding:154px 0 88px; border-bottom:0; background:#fff; overflow:hidden;
}
body.product-page .page-hero { min-height:760px; display:flex; align-items:center; }
body.sub-page .page-hero > .container { position:relative; z-index:1; }
body.sub-page .crumb {
  margin-bottom:30px; color:#7c8796; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
body.sub-page .crumb a { display:inline-flex; color:var(--sp-blue); }
body.sub-page .page-hero .split {
  grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
  gap:clamp(52px,6vw,92px); align-items:center;
}
body.sub-page .page-hero h1 {
  max-width:11ch; font-size:clamp(52px,6.2vw,84px); line-height:.98;
  letter-spacing:-.032em;
}
body.sub-page .page-hero .lead {
  max-width:50ch; margin-top:24px; color:#4f5967; font-size:18px;
  line-height:1.58; font-weight:400; letter-spacing:-.012em;
}
body.sub-page .page-hero .hero-cta { margin-top:32px; }
body.sub-page .badge {
  display:inline-flex; align-items:center; gap:10px; padding:6px 10px 6px 6px;
  border:1px solid var(--sp-line); border-radius:999px; background:#fff;
  box-shadow:0 4px 14px rgba(42,64,99,.035); color:#758091;
  font:500 11px/1 var(--font-ui); letter-spacing:.02em;
}
body.sub-page .badge .tag {
  border:0; border-radius:999px; padding:6px 9px; color:#426fae; background:var(--sp-blue-soft);
}

/* ============================ product hero stages ============================ */
.product-stage {
  position:relative; min-height:560px; padding:24px; overflow:hidden;
  border:1px solid var(--sp-line); border-radius:28px; background-color:var(--sp-surface);
  background-image:
    linear-gradient(rgba(91,126,177,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,126,177,.035) 1px,transparent 1px);
  background-size:32px 32px; box-shadow:var(--sp-shadow);
}
.product-stage-head {
  position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:#7a8594; font:500 11px/1 var(--font-ui);
}
.product-stage-head > span:first-child { color:#2f3947; font-weight:600; }
.stage-status,.stage-pill {
  display:inline-flex; align-items:center; gap:7px; padding:7px 10px;
  border:1px solid var(--sp-line); border-radius:999px; background:rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(42,64,99,.035); color:#6f7b8b;
  font:500 10px/1 var(--font-ui); white-space:nowrap;
}
.stage-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#79a9ef; box-shadow:0 0 0 4px #e9f2ff; }
.stage-window {
  position:relative; overflow:hidden; border:1px solid var(--sp-line); border-radius:18px;
  background:rgba(255,255,255,.94); box-shadow:0 14px 38px rgba(45,67,100,.07);
}
.stage-window-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px; padding:12px 15px; border-bottom:1px solid #edf1f6;
  color:#7d8897; font:500 10px/1.2 var(--font-ui);
}
.stage-window-bar b { color:#333e4c; font-size:11px; }
.stage-avatar {
  display:inline-grid; place-items:center; width:30px; height:30px; flex:0 0 auto;
  border:3px solid #fff; border-radius:50%; background:linear-gradient(145deg,#dce9fb,#99bbed);
  box-shadow:0 0 0 1px #dce5f1; color:#45658e; font:600 9px/1 var(--font-ui);
}
.stage-avatar.alt { background:linear-gradient(145deg,#e6e6fa,#aaaee9); }
.stage-avatar.warm { background:linear-gradient(145deg,#f8dfca,#e8a66f); }
.stage-metric {
  display:grid; gap:4px; padding:15px 17px; border:1px solid var(--sp-line); border-radius:16px;
  background:rgba(255,255,255,.94); box-shadow:var(--sp-float);
}
.stage-metric small { color:#8a95a4; font:500 9.5px/1.2 var(--font-ui); }
.stage-metric b { color:#315f9f; font:600 28px/1 var(--font-display); letter-spacing:-.04em; }
.stage-metric span { color:#9aa4b1; font:400 9px/1.2 var(--font-ui); }
.stage-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.stage-chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--sp-line);
  border-radius:999px; background:#fff; color:#6e7a89; font:500 9.5px/1 var(--font-ui);
  box-shadow:0 3px 10px rgba(42,64,99,.03);
}
.stage-chip.active { color:#416fae; border-color:#cbdff8; background:#edf5ff; }
.stage-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:#9ebde7; }

/* Dealy · live inbox becomes a paid order. */
.dealy-stage .dealy-inbox { position:absolute; z-index:1; left:24px; top:74px; width:58%; height:420px; }
.dealy-thread { display:grid; }
.dealy-thread-row {
  display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center;
  min-height:69px; padding:11px 14px; border-top:1px solid #f0f3f7;
}
.dealy-thread-row:first-child { border-top:0; }
.dealy-thread-row div { display:grid; gap:4px; min-width:0; }
.dealy-thread-row b { color:#364151; font:600 11px/1.2 var(--font-ui); }
.dealy-thread-row span { overflow:hidden; color:#8a95a4; font:400 9.5px/1.2 var(--font-ui); text-overflow:ellipsis; white-space:nowrap; }
.dealy-thread-row time { color:#9aa4b1; font:500 9px/1 var(--font-ui); }
.dealy-thread-row.on { background:#f6f9fe; }
.dealy-stage .dealy-order { position:absolute; z-index:3; right:24px; top:146px; width:49%; padding-bottom:16px; }
.order-product { display:flex; align-items:center; gap:12px; padding:16px; }
.order-thumb { width:44px; height:44px; border-radius:12px; background:linear-gradient(145deg,#e9f2ff,#c9ddf7); border:1px solid #dae6f4; }
.order-product div { display:grid; gap:3px; }
.order-product b { color:#334052; font:600 12px/1.2 var(--font-ui); }
.order-product span { color:#8a95a4; font:400 10px/1.2 var(--font-ui); }
.order-total { display:flex; align-items:center; justify-content:space-between; margin:0 16px; padding:13px 0; border-block:1px solid #edf1f6; color:#7d8897; font:500 10px/1 var(--font-ui); }
.order-total b { color:#2f3947; font-size:14px; }
.order-progress { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:16px 16px 0; }
.order-progress span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #dce6f2; border-radius:50%; background:#fff; color:#8b96a5; font:600 9px/1 var(--font-ui); }
.order-progress span.on { color:#fff; background:#70a0e7; border-color:#70a0e7; }
.order-progress i { flex:1; height:1px; background:#dbe5f0; }
.dealy-stage .stage-chip-row { position:absolute; z-index:4; left:36px; bottom:28px; }

/* Best-shot · warm color is intentionally exclusive to this product. */
body[data-page="bestshot"] { --warm:#db6a17; --warm-soft:#fff4eb; }
.bestshot-stage { background-color:#fffaf7; border-color:#f1e5dc; }
.bestshot-stage .stage-status::before { background:var(--warm); box-shadow:0 0 0 4px rgba(219,106,23,.12); }
.table-map { position:absolute; left:24px; right:24px; top:76px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.table-card { min-height:104px; padding:15px; border:1px solid #eee9e4; border-radius:17px; background:rgba(255,255,255,.9); box-shadow:0 10px 28px rgba(80,63,52,.055); }
.table-card-head { display:flex; align-items:center; justify-content:space-between; color:#8b817a; font:500 9.5px/1 var(--font-ui); }
.table-card-head b { color:#423a34; font-size:11px; }
.table-people { display:flex; margin-top:19px; }
.table-people .stage-avatar + .stage-avatar { margin-left:-8px; }
.table-card.active { border-color:#efc5a5; box-shadow:0 16px 36px rgba(183,96,38,.11); transform:translateY(-4px); }
.table-card.active .stage-pill { color:#a9551c; background:var(--warm-soft); border-color:#f0c7a8; }
.evening-track { position:absolute; left:38px; right:38px; top:230px; }
.evening-track-label { display:flex; justify-content:space-between; color:#948a83; font:500 9px/1 var(--font-ui); }
.evening-line { position:relative; height:64px; margin-top:12px; }
.evening-line::before { content:""; position:absolute; left:0; right:0; top:28px; height:1px; background:#eadfd6; }
.evening-line span { position:absolute; top:12px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #eadfd6; border-radius:50%; background:#fff; color:#8e8279; font:600 9px/1 var(--font-ui); }
.evening-line span:nth-child(1){left:0}.evening-line span:nth-child(2){left:24%}.evening-line span:nth-child(3){left:48%}.evening-line span:nth-child(4){left:72%}.evening-line span:nth-child(5){right:0}
.evening-line span.active { color:#fff; background:var(--warm); border-color:var(--warm); box-shadow:0 0 0 7px rgba(219,106,23,.1); }
.bestshot-action { position:absolute; z-index:3; left:52px; right:52px; bottom:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid #f0c7a8; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 18px 44px rgba(166,86,32,.12); }
.bestshot-action div { display:grid; gap:4px; }
.bestshot-action small { color:#9a806e; font:500 9.5px/1 var(--font-ui); }
.bestshot-action b { color:#4a3b31; font:600 15px/1.2 var(--font-ui); }
.bestshot-action .stage-metric { box-shadow:none; border-color:#f0d2bd; }
.bestshot-action .stage-metric b { color:var(--warm); }

/* Construction · schedule, cost, and field proof. */
.construction-stage .project-summary { position:absolute; left:24px; right:24px; top:74px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.project-summary .stage-metric { box-shadow:0 8px 22px rgba(42,64,99,.055); }
.construction-stage .schedule-window { position:absolute; left:24px; top:194px; width:67%; height:300px; }
.schedule-body { padding:18px 16px; display:grid; gap:17px; }
.schedule-row { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; }
.schedule-row > span { color:#7e8997; font:500 9.5px/1 var(--font-ui); }
.schedule-track { position:relative; height:12px; border-radius:999px; background:#eff3f8; overflow:hidden; }
.schedule-track i { position:absolute; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#8bb4ed,#6194de); }
.schedule-track i.forecast { background:#d9e6f5; border:1px dashed #8fb1dd; }
.construction-stage .field-window { position:absolute; z-index:3; right:24px; top:222px; width:39%; }
.field-feed { padding:8px 14px 14px; }
.field-feed-row { display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:center; padding:10px 0; border-top:1px solid #f0f3f7; }
.field-feed-row:first-child { border-top:0; }
.field-feed-row i { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:#edf5ff; color:#5d88c7; font:600 9px/1 var(--font-ui); font-style:normal; }
.field-feed-row div { display:grid; gap:3px; }
.field-feed-row b { color:#394555; font:600 10px/1.2 var(--font-ui); }
.field-feed-row span { color:#939dab; font:400 9px/1.2 var(--font-ui); }

/* Camp · availability and occupancy, supported by the generated ger asset. */
.camp-stage .camp-ger { position:absolute; z-index:0; right:6px; top:54px; width:210px; opacity:.16; mix-blend-mode:multiply; }
.camp-stage .availability-window { position:absolute; z-index:2; left:24px; top:76px; width:67%; padding-bottom:18px; }
.availability-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; padding:16px; }
.availability-grid span { aspect-ratio:1; display:grid; place-items:center; border:1px solid #e8edf4; border-radius:9px; background:#fff; color:#9aa4b1; font:500 8.5px/1 var(--font-ui); }
.availability-grid span.booked { color:#416fae; background:#edf5ff; border-color:#d1e2f8; }
.availability-grid span.active { color:#fff; background:#70a0e7; border-color:#70a0e7; box-shadow:0 7px 18px rgba(89,132,195,.2); }
.camp-stage .booking-card { position:absolute; z-index:3; right:24px; top:180px; width:42%; padding-bottom:15px; }
.booking-guest { display:flex; gap:11px; align-items:center; padding:15px; }
.booking-guest div { display:grid; gap:3px; }
.booking-guest b { color:#364151; font:600 11px/1.2 var(--font-ui); }
.booking-guest span { color:#8e98a6; font:400 9.5px/1.2 var(--font-ui); }
.booking-route { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 14px; }
.booking-route span { padding:8px 5px; border:1px solid #e7ecf3; border-radius:9px; background:#fff; color:#7d8897; text-align:center; font:500 8.5px/1 var(--font-ui); }
.booking-route span.on { color:#426fae; background:#edf5ff; border-color:#cbdff8; }
.camp-stage .occupancy-card { position:absolute; left:24px; right:24px; bottom:24px; height:190px; padding:18px 18px 12px; border:1px solid var(--sp-line); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 14px 38px rgba(45,67,100,.07); }
.occupancy-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.occupancy-card-head div { display:grid; gap:4px; }
.occupancy-card-head small { color:#8a95a4; font:500 9px/1 var(--font-ui); }
.occupancy-card-head b { color:#334052; font:600 14px/1.2 var(--font-ui); }
.occupancy-card svg { width:100%; height:110px; margin-top:7px; }

/* ============================ feature sections ============================ */
body.sub-page .section { padding-block:clamp(76px,8vw,112px); }
body.product-page .page-hero + .section { border-top:1px solid #f0f3f7; }
body.sub-page .section > .container > .eyebrow {
  font-family:var(--font-mono); font-weight:500; color:var(--cobalt); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
body.sub-page .section-title {
  max-width:16ch; margin-top:16px !important; font-size:clamp(40px,5vw,64px);
  line-height:1.02; letter-spacing:-.035em;
}
body.product-page .fbento {
  grid-template-columns:1.08fr .92fr; grid-auto-rows:minmax(310px,auto);
  gap:20px; margin-top:58px;
}
body.product-page .fb {
  min-width:0; padding:clamp(26px,3vw,38px); border:1px solid var(--sp-line); border-radius:24px;
  background-color:#fbfcfe; background-image:
    linear-gradient(rgba(91,126,177,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,126,177,.025) 1px,transparent 1px);
  background-size:32px 32px; color:#1a2230; box-shadow:0 14px 42px rgba(37,54,83,.055);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;
}
body.product-page .fb:hover { transform:translateY(-3px); border-color:#d8e1ed; box-shadow:0 24px 62px rgba(37,54,83,.09); }
body.product-page .fb--wide { grid-column:auto; }
body.product-page .fb:nth-last-child(1):nth-child(odd) { grid-column:1 / -1; min-height:260px; }
body.product-page .fb h4 { color:#1b2431; font-size:clamp(23px,2.2vw,30px); line-height:1.05; }
body.product-page .fb p { max-width:48ch; color:#687486; font-size:15px; line-height:1.55; }
body.product-page .fb--blue,
body.product-page .fb--dark,
body.product-page .fb--teal { background-color:#f8fafc; border-color:var(--sp-line); color:#1b2431; }
body.product-page .fb--blue h4,
body.product-page .fb--blue p,
body.product-page .fb--dark h4,
body.product-page .fb--dark p { color:inherit; }
body.product-page .fb--blue p,
body.product-page .fb--dark p { color:#687486; }
body[data-page="bestshot"] .fb--blue { background-color:#fff8f2; border-color:#f1dfd1; }
body[data-page="bestshot"] .fb--blue [style*="font-size:52px"] { color:var(--warm) !important; }
body.product-page .fb [style*="color:#fff"],
body.product-page .fb [style*="color:rgba(255,255,255"] { color:inherit !important; }
body.product-page .fb-mock,
body.product-page .fb--blue .fb-mock,
body.product-page .fb--dark .fb-mock {
  border-color:var(--sp-line) !important; border-radius:17px; background:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 28px rgba(48,69,100,.055);
}
body.product-page .fb-mock .row { min-height:36px; padding:7px 2px; border-top:1px solid #f0f3f7; }
body.product-page .fb-mock .row:first-child { border-top:0; }
body.product-page .fb-chips b { color:#587fc1; background:#f3f8ff; border:1px solid #e1ebfa; box-shadow:none; }
body.product-page .viz-bars i { background:#dce8f6; }
body.product-page .viz-bars i.hi { background:#78a7f5; }

/* CTA is a white editorial object, never a full-width color field. */
body.sub-page .cta {
  border:1px solid var(--sp-line); border-radius:28px; background:#fff; color:#111722;
  box-shadow:var(--sp-shadow); text-align:left; padding:clamp(42px,6vw,74px);
}
body.sub-page .cta::before {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(circle at 88% 12%,rgba(120,167,245,.16),transparent 34%);
}
body.sub-page .cta h2 { position:relative; max-width:15ch; color:#111722; font-size:clamp(40px,5vw,62px); }
body.sub-page .cta p { position:relative; max-width:52ch; margin-inline:0; color:#687486; }
body.sub-page .cta .hero-cta { position:relative; justify-content:flex-start; }
body.sub-page .cta .btn-light { color:#fff; background:#0b0f17; border-color:#0b0f17; }
body.sub-page .cta .btn[style] { color:#0b0f17 !important; background:#fff !important; border-color:var(--sp-line) !important; }

/* ============================ studio ============================ */
body.studio-page .page-hero { padding-bottom:96px; }
body.studio-page .page-hero .container { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:70px; align-items:end; }
body.studio-page .page-hero .crumb { grid-column:1 / -1; margin-bottom:4px; }
body.studio-page .page-hero h1 { max-width:9ch; }
body.studio-page .page-hero .lead { max-width:43ch; margin:0 0 8px; }
.studio-brief {
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; margin-top:46px;
  border:1px solid var(--sp-line); border-radius:22px; background:var(--sp-line); box-shadow:0 14px 42px rgba(37,54,83,.055);
}
.studio-brief div { min-height:112px; padding:20px; background:#fff; }
.studio-brief b { display:block; color:#17202c; font:600 28px/1 var(--font-display); letter-spacing:-.04em; }
.studio-brief span { display:block; margin-top:9px; color:#85909f; font:500 10px/1.3 var(--font-ui); }
body.studio-page .mock { min-height:420px; border-radius:24px; background:#f8fafc; box-shadow:var(--sp-shadow); }
body.studio-page .mock-body { padding:34px; }
body.studio-page .cols3 { gap:20px; margin-top:50px; }
body.studio-page .feat { min-height:300px; padding:34px; border:1px solid var(--sp-line); border-radius:24px; background:#fbfcfe; box-shadow:0 14px 42px rgba(37,54,83,.05); }
body.studio-page .feat .ico { width:46px; height:46px; border-radius:14px; }
body.studio-page .feat h3 { margin-top:56px; font-size:25px; }
body.studio-page .feat p { margin-top:12px; font-size:15px; line-height:1.55; }

/* ============================ contact ============================ */
body.contact-page .page-hero { padding-bottom:72px; }
body.contact-page .page-hero .container { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:end; }
body.contact-page .page-hero .crumb { grid-column:1 / -1; margin-bottom:2px; }
body.contact-page .page-hero h1 { max-width:8ch; }
body.contact-page .page-hero .lead { margin:0 0 8px; max-width:44ch; }
body.contact-page .section { padding-top:38px !important; }
body.contact-page .section .split { grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr); gap:28px; align-items:start; }
body.contact-page .form { max-width:none; gap:20px; padding:clamp(26px,4vw,44px); border:1px solid var(--sp-line); border-radius:24px; background:#fbfcfe; box-shadow:var(--sp-shadow); }
body.contact-page .field { gap:9px; }
body.contact-page .field label { color:#4e5968; font-size:12px; }
body.contact-page .field input,
body.contact-page .field select,
body.contact-page .field textarea { min-height:48px; border-radius:13px; border-color:#dfe6ef; box-shadow:0 2px 8px rgba(42,64,99,.025); }
body.contact-page .field textarea { min-height:160px; }
body.contact-page .card-plain { border-radius:22px; padding:30px; box-shadow:0 12px 36px rgba(37,54,83,.05); }
body.contact-page .card-plain:first-child { min-height:174px; background:linear-gradient(145deg,#f6f9fe,#fff); }

/* ============================ login ============================ */
body.login-page .page-hero { padding-bottom:68px; text-align:center; }
body.login-page .page-hero .crumb { justify-content:center; }
body.login-page .page-hero h1 { max-width:14ch; margin-inline:auto; }
body.login-page .page-hero .lead { max-width:58ch; margin-inline:auto; }
body.login-page .section { padding-top:12px !important; }
body.login-page .section > .container { max-width:1048px !important; }
body.login-page .chooser { gap:18px; margin-top:18px; }
body.login-page .svc { min-height:230px; display:grid; grid-template-columns:54px 1fr; gap:20px; padding:30px; border-radius:23px; border-color:var(--sp-line); box-shadow:0 12px 36px rgba(37,54,83,.055); }
body.login-page .svc:hover { transform:translateY(-3px); box-shadow:var(--sp-shadow); }
body.login-page .svc .svc-glyph { width:54px; height:54px; border-radius:16px; }
body.login-page .svc h3 { font-size:23px; }
body.login-page .svc p { margin-top:12px; font-size:15px; line-height:1.5; }
body.login-page .svc .svc-host { margin-top:24px; color:var(--sp-blue); }

/* ============================ responsive ============================ */
@media (max-width:1024px) {
  body.sub-page .page-hero .split { grid-template-columns:1fr; }
  body.product-page .page-hero { min-height:0; }
  .product-stage { min-height:550px; }
  body.studio-page .page-hero .container,
  body.contact-page .page-hero .container { grid-template-columns:1fr; gap:24px; }
  body.studio-page .page-hero .lead,
  body.contact-page .page-hero .lead { margin-top:0; }
}

@media (max-width:760px) {
  body.sub-page .container { padding-inline:20px; }
  body.sub-page .nav-inner { padding-inline:20px; }
  body.sub-page .page-hero { padding-top:124px; padding-bottom:58px; }
  body.sub-page .page-hero h1 { font-size:clamp(46px,13vw,64px); }
  body.sub-page .page-hero .lead { font-size:16px; line-height:1.55; }
  body.sub-page .crumb { margin-bottom:22px; }
  body.product-page .page-hero .split { gap:42px; }
  .product-stage { min-height:570px; padding:18px; border-radius:22px; }
  .product-stage-head { align-items:flex-start; }
  .dealy-stage .dealy-inbox { left:18px; top:68px; width:82%; height:370px; }
  .dealy-thread-row { min-height:59px; }
  .dealy-stage .dealy-order { right:18px; top:248px; width:78%; }
  .dealy-stage .stage-chip-row { left:24px; bottom:18px; max-width:78%; }
  .table-map { left:18px; right:18px; top:68px; grid-template-columns:1fr 1fr; }
  .table-card:nth-child(3) { display:none; }
  .evening-track { left:24px; right:24px; top:222px; }
  .bestshot-action { left:18px; right:18px; bottom:22px; display:grid; }
  .bestshot-action .stage-metric { grid-template-columns:auto 1fr; align-items:center; }
  .construction-stage .project-summary { left:18px; right:18px; top:68px; }
  .project-summary .stage-metric { padding:12px; }
  .project-summary .stage-metric b { font-size:21px; }
  .construction-stage .schedule-window { left:18px; top:184px; width:90%; height:300px; }
  .construction-stage .field-window { right:18px; top:320px; width:68%; }
  .camp-stage .camp-ger { width:160px; }
  .camp-stage .availability-window { left:18px; top:68px; width:88%; }
  .camp-stage .booking-card { right:18px; top:228px; width:72%; }
  .camp-stage .occupancy-card { left:18px; right:18px; bottom:18px; height:180px; }
  body.product-page .fbento { grid-template-columns:1fr; grid-auto-rows:auto; margin-top:38px; }
  body.product-page .fb { min-height:290px; }
  body.product-page .fb:nth-last-child(1):nth-child(odd) { grid-column:auto; }
  body.sub-page .section { padding-block:70px; }
  body.sub-page .section-title { font-size:clamp(38px,11vw,52px); }
  body.sub-page .cta { padding:38px 26px; border-radius:23px; }
  .studio-brief { grid-template-columns:1fr 1fr; }
  body.studio-page .feat { min-height:250px; }
  body.studio-page .feat h3 { margin-top:36px; }
  body.contact-page .section .split { grid-template-columns:1fr; }
  body.contact-page .form { padding:24px 20px; }
  body.login-page .svc { min-height:0; padding:24px; }
}

@media (prefers-reduced-motion:reduce) {
  body.product-page .fb,.svc { transition:none; }
}