/* Beyond the Flow V28 — personal identity, calm industrial typography.
   Fixed image and stage boxes: revealing identity never resizes the Nexus. */
:root {
  --v28-paper: #edf2eb;
  --v28-muted: #b3c4bc;
  --v28-quiet: #91aaa0;
  --v28-accent: #d6edb5;
  --v28-rule: rgba(202, 224, 209, .19);
  --v28-radius: 10px;
}
.nav { border-color: var(--v28-rule); }
.brand-name { letter-spacing: -.01em; }
.brand-studio { color: var(--v28-quiet); }
.hero { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: start; }
.hero-copy { grid-column: 1; grid-row: 1; padding: 52px clamp(32px, 3.7vw, 68px) 185px; }
.hero-copy > .eyebrow { font-size: 9px; letter-spacing: .13em; color: var(--v28-accent); }
.hero-index { margin: 17px 0 0; font-size: 9px; letter-spacing: .085em; gap: 12px; white-space: normal; }
.hero-index-line { width: 22px; flex: 0 0 22px; opacity: .5; }
.hero h1 { font-size: clamp(72px, 7.05vw, 126px); line-height: .9; margin: 22px 0 27px -3px; letter-spacing: -.07em; font-weight: 750; }
.hero-stage { grid-column: 2; grid-row: 1; height: clamp(800px, calc(100svh - 76px), 980px); min-height: 0 !important; align-self: start; }
.v28-hero-secondary { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 3; min-width: 0; padding: 0 clamp(32px,3.7vw,68px) 28px; }
.hero-stage .btf-poster img[data-btf-poster-projection="v28"] { object-fit: fill; opacity: 1; transform-origin: center; transform: translateX(var(--btf-poster-offset-x,0%)) scale(var(--btf-poster-scale-x,1),var(--btf-poster-scale-y,1)); }
.hero-v2-counter { top: 19px; font-size: 8px; opacity: .72; }
.hero-side-label { color: #77908a; letter-spacing: .13em; }
.v28-personal { opacity: 1; transform: translateY(0); transition: opacity .48s ease, transform .48s ease; }
.btf-prelude-on:not(.btf-home-ready) .v28-personal { opacity: 0; transform: translateY(8px); }
.btf-home-ready .v28-personal { opacity: 1; transform: translateY(0); }
.v28-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.v28-avatar { display: block; width: 72px; height: 72px; min-width: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; object-position: 50% 42%; border: 1px solid rgba(214,237,181,.55); background: #edf0ed; box-shadow: 0 0 0 5px rgba(214,237,181,.035); }
.v28-signature { min-width: 0; }
.v28-signature > strong { display: block; font-size: clamp(20px, 1.6vw, 27px); font-weight: 670; letter-spacing: -.025em; line-height: 1.18; color: var(--v28-paper); }
.v28-signature > p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--v28-muted); }
.v28-signature > p span { color: var(--v28-accent); }
.v28-bio { max-width: 550px; margin: 20px 0 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.75; color: #becbc3; text-wrap: pretty; }
.v26-hero-promise { border: 0; border-top: 1px solid var(--v28-rule); border-radius: 0; background: none; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 15px 0 0; margin-top: 21px; width: 100%; }
.v26-hero-promise span { display: grid; align-content: start; gap: 5px; font-size: 10px; line-height: 1.4; color: var(--v28-muted); }
.v26-hero-promise b { color: var(--v28-accent); font-weight: 500; }
.hero-actions { margin-top: 23px; gap: 10px; align-items: stretch; }
.hero-actions .btn { font-size: 11px; min-width: 0; min-height: 48px; padding: 13px 17px; flex: 1 1 auto; justify-content: space-between; gap: 10px; }
.btn-lime { background: var(--v28-accent); border-color: var(--v28-accent); color: #142019; }
.btn-outline { border-color: rgba(202,224,209,.32); }
.v28-hero-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 15px; margin-top: 13px; }
.v28-hero-tools .v10-hero-prelude, .v28-hero-tools .v9-hero-shortcuts { margin: 0 !important; }
.v28-hero-tools .v10-hero-prelude > span { display: none; }
.v28-hero-tools .v10-hero-prelude button, .v28-hero-tools .v9-fast-open, .v28-hero-tools .v7-gfx-open { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin: 0 !important; min-height: 44px; background: none; border: 0; border-radius: 0; font-size: 10px; font-weight: 550; line-height: 1.35; letter-spacing: 0; color: var(--v28-muted); box-shadow: none; cursor: pointer; }
.v28-hero-tools button:hover { color: var(--v28-paper); }
.v28-hero-tools .v9-fast-dot { font-size: 12px; }
.hero-footer { border-top: 1px solid var(--v28-rule); margin-top: 16px; padding-top: 14px; font-size: 8px; letter-spacing: .065em; color: var(--v28-quiet); }
.stage-top, .stage-bottom { color: #b7ccc8; }
.stage-chip { border-color: rgba(201,223,211,.19); background: rgba(9,24,27,.74); box-shadow: none; }
.stage-chip small { color: #b2c3bd; }
.v24-nexus-links button { min-height: 44px; border-color: var(--v28-rule); }

/* Reuse the existing scene/state controls; only their visual hierarchy changes. */
.section-label { color: var(--v28-quiet); border-color: var(--v28-rule); letter-spacing: .09em; }
.section-heading > p, .experience-heading > p, .lab-intro p { color: var(--v28-muted); line-height: 1.75; }
.project-card, .exp-card, .lab-shell, .playbook-panel, .v26-studio, .v26-casebook-card { border-color: var(--v28-rule); border-radius: var(--v28-radius); }
.project-card { transition: border-color .2s ease, background-color .2s ease; }
.project-card:hover { border-color: rgba(214,237,181,.45); }
.project-info h3 { letter-spacing: -.035em; }
.project-info > p, .exp-body p { line-height: 1.75; }
.project-tags span { border-color: var(--v28-rule); color: #bacebf; }
.v26-case-text h3, .v26-casebook-card h3, .lab-intro h3, .playbook-panel h3 { letter-spacing: -.035em; }
.v26-case-intro, .v26-casebook-card > p { font-size: 14px; line-height: 1.75; }
.v26-method-grid p, .v26-verify p { font-size: 13px; line-height: 1.65; }
.v26-footnote { color: #a6bdb0; font-size: 12px; }
.v27-field-check { border-radius: 6px; border-color: var(--v28-rule); border-left-color: #9bbb88; }
.v27-field-check p { font-size: 13px; }
.lab-results { background: linear-gradient(145deg, #142822, #101b1c); border-radius: 8px; }
.lab-tabs .lab-tab { min-height: 48px; }
.lab-demo-badge, .status-pill { color: #c5dcb6; }
#experience .v25-console { border-color: rgba(202,224,209,.25); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
#experience .v25-console-header { padding: 19px 16px 17px; background: #142625; }
#experience .v25-kicker { color: var(--v28-accent); }
#experience .v25-group { border-color: var(--v28-rule); background: #102120; }
#experience .v25-section-label { color: #b6cabd; }
#experience .experience-current p, #experience .v8-inspection p { line-height: 1.65 !important; color: #bccdc2; }
#experience .v24-stats dd { color: var(--v28-paper); }
#experience .experience-scenes button[aria-pressed="true"] { border-color: #bcd3a7; }
#v24-system[data-scene="warehouse"] { --v28-scene-accent: #d6edb5; }
#v24-system[data-scene="data"] { --v28-scene-accent: #9ed6e3; }
#v24-system[data-scene="automation"] { --v28-scene-accent: #e8cba8; }
#v24-system[data-scene="energy"] { --v28-scene-accent: #bbe8b6; }
#experience #v24-system .v24-rule { border-left-color: var(--v28-scene-accent); }
#experience #v24-system .v24-instructions h4 { color: var(--v28-scene-accent); }

/* Profile: an editorial method panel, rather than an oversized photograph. */
.about-grid { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(32px,5vw,82px); margin-top: 46px; align-items: start; }
.v28-method-card { border: 1px solid var(--v28-rule); border-radius: var(--v28-radius); padding: clamp(24px,3vw,42px); background: linear-gradient(150deg,#1a2d27,#0d181a); }
.v28-card-index { display: block; font: 650 10px ui-monospace, Consolas, monospace; letter-spacing: .1em; color: var(--v28-accent); }
.v28-method-card h3 { margin: 25px 0 29px; font-size: clamp(30px,3vw,45px); line-height: 1.08; letter-spacing: -.04em; font-weight: 620; }
.v28-method-list { list-style: none; padding: 0; margin: 0 0 28px; }
.v28-method-list li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 11px; padding: 18px 0; border-top: 1px solid var(--v28-rule); }
.v28-method-list li > span { padding-top: 3px; color: #a8c79b; font: 550 11px ui-monospace, Consolas, monospace; }
.v28-method-list strong { font-size: 15px; font-weight: 650; }
.v28-method-list p { font-size: 13px; line-height: 1.65; margin: 7px 0 0; color: var(--v28-muted); }
.v28-method-card .text-link { font-size: 12px; line-height: 1.6; gap: 12px; }
.about-content h2 { font-size: clamp(36px,4vw,63px); font-weight: 660; line-height: 1.1; margin: 20px 0 25px; }
.about-content p { color: #bdcdc3; font-size: 15px; line-height: 1.8; max-width: 650px; }
.about-content p strong { color: #e5eee3; font-weight: 620; }
.about-facts { gap: 18px; border-color: var(--v28-rule); }
.about-facts strong { font-size: 12px; line-height: 1.6; }
.contact h2 { font-size: clamp(46px,6.5vw,96px); letter-spacing: -.045em; font-weight: 660; }
.contact-main > p { line-height: 1.75; color: var(--v28-muted); }
.contact .contact-email { color: var(--v28-quiet); font-size: 13px; }
.contact .text-link { font-size: 12px; margin-top: 15px; }
.contact-actions [aria-disabled="true"], .contact-actions button:disabled { opacity: .5; cursor: default; transform: none; }
.footer { gap: 20px; font-size: 10px; line-height: 1.7; }
:where(a,button,summary,input,select):focus-visible { outline: 2px solid #d6edb5; outline-offset: 4px; }

@media(min-width:1600px) {
  .hero-copy { padding-top: 64px; }
  .hero-actions .btn { flex: 0 1 auto; padding-inline: 21px; }
}
@media(min-width:851px) and (max-width:1100px) {
  .hero-copy { padding-inline: 28px; }
  .v28-hero-secondary { padding-inline: 28px; }
  .hero h1 { font-size: 7.35vw; }
  .v28-signature > strong { font-size: 20px; }
  .hero-actions { flex-direction: column; }
  .hero-stage { height: 820px; }
}
@media(max-width:850px) {
  .nav .brand { min-width: 0; }
  .brand-name { font-size: 11px; }
  .brand-studio, .brand-sep { display: none; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-copy, body[data-edition='mobile'] .hero-copy { padding: 34px 24px 25px !important; }
  .hero-stage, body[data-edition='mobile'] .hero-stage { grid-column: 1; grid-row: 2; }
  .v28-hero-secondary { grid-column: 1; grid-row: 3; padding: 0 24px 24px; }
  .hero h1 { font-size: clamp(62px,15.9vw,108px) !important; margin: 19px 0 25px -2px; }
  .hero-index { font-size: 8px; margin-top: 13px !important; gap: 10px; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .08em; }
  .hero-v2-counter { display: none; }
  .v28-avatar { width: 56px; height: 56px; min-width: 56px; flex-basis: 56px; }
  .v28-identity { gap: 13px; }
  .v28-signature > strong { font-size: 21px; }
  .v28-signature > p { font-size: 11px; margin-top: 5px; }
  .v28-bio { margin-top: 18px; font-size: 14px; line-height: 1.7; max-width: 560px; }
  .v26-hero-promise { gap: 10px; margin-top: 20px; padding-top: 13px; }
  .hero-actions, body[data-edition='mobile'] .hero-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; }
  .hero-actions .btn { font-size: 11px; line-height: 1.35; padding: 12px 13px !important; min-height: 50px; }
  .v28-hero-tools { gap: 0 17px; margin-top: 9px; }
  .hero-stage, body[data-edition='mobile'] .hero-stage { height: 390px !important; margin-top: 0 !important; min-height: 0 !important; }
  .v28-hero-tools .v7-gfx-open { width: auto; }
  .about-grid { grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: 32px; }
  .v28-method-card { padding: 26px; }
  .v28-method-card h3 { font-size: 36px; }
  .about-content h2 { font-size: clamp(33px,7vw,49px); }
  .about-content p { font-size: 14px; line-height: 1.75; }
  .about-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-facts > div:last-child { grid-column: 1 / -1; }
  .v26-case-intro, .v26-casebook-card > p, .v27-field-check p { font-size: 13px; }
  .v26-section-header h2, .v26-casebook-header h2 { font-size: clamp(32px,8.6vw,48px); }
  #experience .v25-console-scroll { padding-bottom: max(24px,env(safe-area-inset-bottom,0px)); }
}
@media(max-width:390px) {
  .hero-copy, body[data-edition='mobile'] .hero-copy { padding-inline: 20px !important; }
  .v28-hero-secondary { padding-inline: 20px; }
  .hero h1 { font-size: 16.5vw !important; }
  .v28-signature > strong { font-size: 19px; }
  .v28-signature > p span { display: block; }
  .v26-hero-promise { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 15px; }
  .v26-hero-promise span { display: flex; gap: 7px; }
  .hero-actions, body[data-edition='mobile'] .hero-actions { grid-template-columns: minmax(0,1fr) !important; }
  .hero-stage, body[data-edition='mobile'] .hero-stage { height: 340px !important; }
  .about-facts { grid-template-columns: minmax(0,1fr); }
  .about-content h2 { font-size: 33px; }
  .v28-method-card { padding: 23px; }
  .v28-method-card h3 { font-size: 33px; }
}
@media(orientation:landscape) and (max-height:500px) and (max-width:850px) {
  .hero-copy, body[data-edition='mobile'] .hero-copy { padding-top: 26px !important; }
  #experience .v25-console { inset: calc(env(safe-area-inset-top,0px) + 68px) 0 max(6px,env(safe-area-inset-bottom,0px)) auto !important; }
}
@media(prefers-reduced-motion:reduce) {
  .v28-personal, .project-card { transition: none !important; transform: none !important; }
  .v28-hero-tools button, .hero-actions .btn { transition: none !important; }
}