/* ============================================================
   BEGG-style liquid egg site — original implementation
   Palette: forest #003300 · brown #663300 · off-white #f6f4f3 · sage #889982
   ============================================================ */

:root {
  --cream: #f6f4f3;
  --dark: #003300;
  --yellow: #d97818;
  --orange: #663300;
  --sage: #889982;
  --sage-soft: #dce2d9;
  --forest-deep: #001f14;
  --surface: #f6f4f3;
  --line: rgba(0, 51, 0, .18);
  --font-display: "Fredoka", sans-serif;
  --font-body: "Nunito", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; }

.container {
  width: min(90vw, 1200px);
  margin: 0 auto;
}

/* ---------------- Preloader ---------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}
.loader.is-done { transform: translateY(-100%); }
.loader_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}
.loader_name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  color: var(--dark);
  letter-spacing: 1px;
  animation: nameGlow 1.2s ease-in-out infinite;
}
.loader_name--solo {
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 2px;
  animation: soloPulse 1.4s ease-in-out infinite;
}
@keyframes soloPulse {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes nameGlow {
  0%, 100% { opacity: .75; }
  30% { opacity: 1; }
  80% { opacity: .65; }
}
.loader_bottom {
  position: absolute;
  bottom: 4vh;
  right: 5vw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--dark);
}
.loader_number_value { font-size: .5em; }

/* ---------------- Header ---------------- */
.nav_wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4vw;
  transition: transform .4s ease, background .3s ease, box-shadow .3s ease;
}
.body-scrolled .nav_wrapper:not(.on-dark) {
  background: rgba(246, 244, 243, .88);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(14px);
}
.nav_wrapper.is-hidden { transform: translateY(-110%); }

.menu_btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  text-decoration: none;
}
.menu_btn span {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: var(--dark);
  transition: transform .3s ease, opacity .3s ease;
}
.menu_btn:hover .line_1 { transform: translateX(4px); }
.menu_btn:hover .line_3 { transform: translateX(-4px); }

.logo { text-decoration: none; }
.logo_svg { width: 120px; height: auto; display: block; }
.logo--footer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 3px;
}
.nav_spacer { width: 54px; }

.nav_wrapper.on-dark .menu_btn span { background: var(--cream); }
.nav_wrapper.on-dark .logo_svg text { fill: var(--cream); }

/* ---------------- Fullscreen menu ---------------- */
.modal_wrapper {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--dark);
  color: var(--cream);
  clip-path: circle(0% at 40px 40px);
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1),
              visibility 0s .7s;
  pointer-events: none;
  visibility: hidden;
}
.modal_wrapper.is-open {
  clip-path: circle(150% at 40px 40px);
  pointer-events: auto;
  visibility: visible;
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1);
}
.menu_content_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 8vw;
  position: relative;
}
.close_btn {
  position: absolute;
  top: 28px;
  left: 4vw;
  width: 54px;
  height: 54px;
}
.close_btn span {
  position: absolute;
  top: 50%; left: 10px;
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: var(--cream);
}
.cross_line_1 { transform: rotate(45deg); }
.cross_line_2 { transform: rotate(-45deg); }

.menu_links { display: flex; flex-direction: column; gap: 1vh; }
.menu_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 7rem);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.05;
  color: var(--cream);
  width: fit-content;
  position: relative;
  transition: color .3s ease, transform .3s ease;
}
.menu_title:hover { color: var(--yellow); transform: translateX(2vw); }
.menu_title.is-current { color: var(--yellow); }

.menu_footer {
  margin-top: 6vh;
  display: flex;
  gap: 8vw;
  flex-wrap: wrap;
  font-size: 1rem;
}
.navmenu_phone a { color: var(--yellow); text-decoration: none; }
.navmenu_phone a:hover { text-decoration: underline; }
.menu_address { opacity: .7; }

/* ---------------- Hero ---------------- */
.hero_section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #ffe9a8 0%, var(--yellow) 45%, var(--orange) 100%);
}
.hero_liquid { position: absolute; inset: 0; }
.hero_blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.hero_blob--1 {
  width: 55vmax; height: 55vmax;
  background: #fff6d8;
  top: -20vmax; left: -15vmax;
  animation: blobFloat 14s ease-in-out infinite;
}
.hero_blob--2 {
  width: 45vmax; height: 45vmax;
  background: #ffdf6b;
  bottom: -18vmax; right: -10vmax;
  animation: blobFloat 18s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vmax, 3vmax) scale(1.1); }
}
.hero_yolk {
  position: absolute;
  right: 8vw;
  top: 50%;
  width: 34vmin; height: 34vmin;
  margin-top: -17vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a 0%, var(--orange) 70%);
  box-shadow: 0 3vmin 8vmin rgba(25, 18, 0, .25), inset -1.5vmin -2vmin 4vmin rgba(190, 80, 0, .5);
  animation: yolkBob 6s ease-in-out infinite;
}
@keyframes yolkBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3vmin) rotate(4deg); }
}
.hero_drip {
  position: absolute;
  right: 23vmin;
  top: -10vh;
  width: 3vmin; height: 45vh;
  border-radius: 2vmin;
  background: linear-gradient(#fff3c4, rgba(255, 243, 196, 0));
  animation: dripFlow 4s ease-in-out infinite;
}
@keyframes dripFlow {
  0% { transform: translateY(-20vh); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(60vh); opacity: 0; }
}

.container_hero {
  position: relative;
  z-index: 2;
  padding: 0 6vw;
}
.hero_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.5vw, 7.5rem);
  line-height: 1.02;
  text-transform: lowercase;
  color: var(--dark);
}
.h1_mask {
  display: block;
  overflow: hidden;
}
.h1_line {
  display: block;
  transform: translateY(110%);
  animation: lineUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.h1_mask:nth-child(2) .h1_line { animation-delay: .12s; }
.h1_mask:nth-child(3) .h1_line { animation-delay: .24s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero_sub {
  margin-top: 3vh;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.4vw, 1rem);
  opacity: .75;
}
.hero_scroll_hint {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  animation: hintFloat 2s ease-in-out infinite;
}
@keyframes hintFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------------- Energy value ---------------- */
.milk_section {
  position: relative;
  padding: 16vh 0;
  background:
    radial-gradient(60% 90% at 80% 10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  overflow: hidden;
}
.milk_bg {
  position: absolute;
  top: -10%; right: -8%;
  width: 45vw; height: 45vw;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #fdf3d0 55%, rgba(253,243,208,0) 100%);
  animation: milkMorph 12s ease-in-out infinite;
}
@keyframes milkMorph {
  0%, 100% { border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; }
  50% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; }
}
.energy_grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
}
.section_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  text-transform: lowercase;
}
.lettering {
  margin-top: 1vh;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--yellow);
  transform: rotate(-6deg);
  display: inline-block;
}
.energy_facts { display: flex; flex-direction: column; gap: 2.2vh; }
.fact_pill {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: .05em;
  padding: 2.4vh 2.4vw;
  border-radius: 100px;
  width: fit-content;
  transform: rotate(-1.5deg);
}
.fact_pill--2 { background: var(--yellow); color: var(--dark); transform: rotate(1.2deg); align-self: flex-end; }
.fact_pill--3 { background: var(--orange); transform: rotate(-1deg); }

/* ---------------- Vitamins / minerals ---------------- */
.physics_section {
  background: var(--yellow);
  padding: 8vh 0;
}
.physics_stage {
  position: relative;
  height: 80vh;
  min-height: 520px;
  width: min(92vw, 1300px);
  margin: 0 auto;
}
.physics_title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  text-align: center;
  line-height: 1.05;
  color: var(--dark);
}
.nutri_circle, .nutri_tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: rotate(var(--r));
  animation: nutriFloat 5s ease-in-out infinite;
  animation-delay: var(--d);
}
.nutri_circle {
  width: clamp(56px, 7vw, 96px);
  height: clamp(56px, 7vw, 96px);
  border-radius: 50%;
  background: var(--cream);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  box-shadow: 0 10px 24px rgba(25, 18, 0, .18);
}
.nutri_circle--orange { background: var(--orange); color: var(--cream); }
.nutri_tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  color: var(--dark);
  opacity: .85;
}
@keyframes nutriFloat {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50% { transform: rotate(var(--r)) translateY(-14px); }
}

/* ---------------- Recipes / storage ---------------- */
.recipes_section {
  padding: 16vh 0 12vh;
  background: var(--cream);
}
.food_letters {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 18vw, 16rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--yellow);
  text-shadow: .04em .04em 0 var(--dark);
  text-transform: uppercase;
  margin-bottom: 6vh;
}
.recipes_grid {
  display: flex;
  align-items: center;
  gap: 4vw;
  flex-wrap: wrap;
  margin-bottom: 10vh;
}
.recipes_text {
  max-width: 520px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
}
.cta_black {
  display: inline-block;
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: lowercase;
  padding: 1.6vh 3vw;
  border-radius: 100px;
  transition: background .3s ease, transform .3s ease;
}
.cta_black:hover { background: var(--orange); transform: translateY(-3px); }

.storage_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4vw;
  border-top: 2px solid var(--dark);
  padding-top: 5vh;
}
.subheader_1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2vh;
}
.subheader_2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1vh;
  opacity: .7;
}
.storage_text { line-height: 1.7; font-size: .98rem; }
.accent_text { color: var(--orange); font-weight: 800; }
.code_product { color: var(--yellow); font-weight: 800; font-size: 1.2rem; letter-spacing: .08em; }

/* ---------------- Badges ---------------- */
.badges_section {
  padding: 8vh 0;
  background: var(--cream);
}
.badges_row {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 3vw;
  flex-wrap: wrap;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vh;
  text-align: center;
}
.badge_icon {
  width: clamp(48px, 5vw, 64px);
  height: auto;
  color: var(--dark);
  transition: transform .3s ease, color .3s ease;
}
.badge:hover .badge_icon { transform: translateY(-6px) rotate(-4deg); color: var(--orange); }
.caption_text {
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.35;
}

/* ---------------- Packs / product ---------------- */
.packs_section {
  background:
    radial-gradient(70% 60% at 20% 20%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%),
    var(--orange);
  padding: 14vh 0;
  color: var(--cream);
}
.packs_grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 6vw;
  align-items: center;
}
.packs_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 5vh;
}

/* CSS-drawn bottle */
.pack_visual { position: relative; display: flex; justify-content: center; }
.pack_bottle { position: relative; width: min(30vw, 260px); }
.pack_cap {
  width: 46%; height: 34px;
  margin: 0 auto;
  border-radius: 10px 10px 4px 4px;
  background: var(--dark);
}
.pack_neck {
  width: 38%; height: 26px;
  margin: 0 auto;
  background: #fff;
}
.pack_body {
  position: relative;
  height: 380px;
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(25, 18, 0, .25);
}
.pack_fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, #ffd964 0%, var(--yellow) 60%, #f0a500 100%);
}
.pack_fill::before {
  content: "";
  position: absolute;
  top: -18px; left: 0;
  width: 200%; height: 36px;
  background: radial-gradient(circle at 10px -6px, transparent 14px, #ffd964 15px);
  background-size: 40px 36px;
  animation: waveSlide 5s linear infinite;
}
@keyframes waveSlide { to { transform: translateX(-40px); } }
.pack_label {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 2;
  background: var(--cream);
  border: 3px solid var(--dark);
  border-radius: 18px;
  padding: 14px 18px;
  text-align: center;
  color: var(--dark);
}
.pack_brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
.pack_kind { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pack_ml { display: block; margin-top: 4px; font-weight: 800; color: var(--orange); }

.pack_chicken {
  position: absolute;
  bottom: -10px;
  left: -30px;
  width: clamp(90px, 12vw, 140px);
  cursor: pointer;
  animation: chickenBob 3s ease-in-out infinite;
}
@keyframes chickenBob {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg) translateY(-6px); }
}
.pack_chicken:hover .chicken_eye { r: 1.4px; }

/* Feature accordions */
.feature {
  border-top: 2px solid rgba(251, 249, 241, .5);
  padding: 2.4vh 0;
}
.feature:last-child { border-bottom: 2px solid rgba(251, 249, 241, .5); }
.feature_head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  color: var(--cream);
  font: inherit;
}
.feature_circle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: lowercase;
}
.feature_toggle {
  position: relative;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  transition: transform .35s ease, background .35s ease;
}
.feature_toggle::before, .feature_toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: var(--cream);
  transform: translate(-50%, -50%);
  transition: transform .35s ease;
}
.feature_toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.feature.opened .feature_toggle { transform: rotate(45deg); background: rgba(251, 249, 241, .15); }
.feature_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1);
}
.feature.opened .feature_body { max-height: 260px; }
.feature_sub {
  margin: 1.6vh 0 .8vh;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.feature_body p { line-height: 1.65; opacity: .92; max-width: 46ch; }

/* ---------------- Quality section ---------------- */
.eggs_section {
  position: relative;
  background: var(--dark);
  color: var(--cream);
  padding: 18vh 0;
  overflow: hidden;
  text-align: center;
}
.eggs_bg .egg_shape {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: rgba(244, 179, 12, .14);
}
.egg_shape--1 { width: 220px; height: 280px; top: 8%; left: 6%; animation: eggDrift 9s ease-in-out infinite; }
.egg_shape--2 { width: 140px; height: 180px; bottom: 12%; right: 10%; animation: eggDrift 11s ease-in-out infinite reverse; }
.egg_shape--3 { width: 90px; height: 120px; top: 30%; right: 24%; animation: eggDrift 8s ease-in-out infinite; }
@keyframes eggDrift {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-18px) rotate(5deg); }
}
.eggs_inner { position: relative; z-index: 2; }
.eggs_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--yellow);
  margin-bottom: 4vh;
}
.eggs_text {
  max-width: 560px;
  margin: 0 auto 4vh;
  line-height: 1.75;
  font-size: 1.05rem;
  opacity: .9;
}
.eggs_section .cta_black { background: var(--yellow); color: var(--dark); }
.eggs_section .cta_black:hover { background: var(--cream); }

/* ---------------- Footer ---------------- */
.footer {
  background: var(--cream);
  padding: 12vh 0 6vh;
}
.footer_top { margin-bottom: 8vh; }
.footer_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.05;
  text-transform: lowercase;
  margin-bottom: 4vh;
}
.footer_form {
  display: flex;
  gap: 12px;
  max-width: 520px;
}
.footer_input {
  flex: 1;
  font: inherit;
  font-size: 1.05rem;
  padding: 14px 22px;
  border: 2px solid var(--dark);
  border-radius: 100px;
  background: transparent;
  color: var(--dark);
  outline: none;
}
.footer_input:focus { border-color: var(--orange); }
.footer_submit {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 14px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--dark);
  color: var(--cream);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.footer_submit:hover { background: var(--orange); transform: translateY(-2px); }
.footer_success { margin-top: 2vh; font-weight: 800; color: var(--orange); }

.footer_links_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  margin-bottom: 6vh;
}
.footer_col_title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .6;
  margin-bottom: 1.6vh;
}
.footer_col a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;
  line-height: 2;
}
.footer_col a:hover { color: var(--orange); }
.footer_col p { margin-top: 1vh; line-height: 1.6; opacity: .8; }

.divider_footer {
  height: 2px;
  background: var(--dark);
  opacity: .15;
  margin-bottom: 5vh;
}
.footer_bottom {
  display: flex;
  align-items: flex-start;
  gap: 4vw;
  flex-wrap: wrap;
}
.footer_privacy {
  max-width: 480px;
  font-size: .85rem;
  line-height: 1.7;
  opacity: .65;
}

/* ---------------- Subpage hero ---------------- */
.page_hero {
  padding: 18vh 0 8vh;
  background: radial-gradient(circle at 82% 18%, rgba(136,153,130,.7), transparent 30%), linear-gradient(145deg, var(--sage-soft), var(--cream) 58%, var(--sage));
}
.page_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  text-transform: lowercase;
}
.page_section { padding: 8vh 0; }
.page_section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 3vh;
}
.page_section p { max-width: 640px; line-height: 1.8; margin-bottom: 2vh; }

.card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3vw;
  margin-top: 5vh;
}
.card {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 26px;
  padding: 4vh 2vw;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(25, 18, 0, .12); }
.card_emoji { font-size: 3rem; display: block; margin-bottom: 2vh; }
.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 1.4vh;
}
.card p { font-size: .95rem; line-height: 1.7; opacity: .85; }
.card_tag {
  display: inline-block;
  margin-top: 2vh;
  padding: 6px 16px;
  border-radius: 100px;
  background: var(--yellow);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------------- Reveal on scroll ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .energy_grid, .packs_grid, .storage_grid, .footer_links_row { grid-template-columns: 1fr; }
  .hero_yolk { right: -6vw; opacity: .85; }
  .pack_visual { margin-bottom: 4vh; }
  .fact_pill--2 { align-self: flex-start; }
  .menu_footer { flex-direction: column; gap: 3vh; }
}
@media (max-width: 560px) {
  .physics_stage { height: 70vh; }
  .footer_form { flex-direction: column; }
  .footer_submit { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Gohi Diori workspace components (BEGG design system)
   ============================================================ */

/* ---------------- Header logo ---------------- */
.logo { display: flex; align-items: center; gap: 12px; }
.logo_mark { width: 44px; height: 44px; display: block; filter: drop-shadow(0 4px 10px rgba(25,18,0,.18)); }
.logo_word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .5px;
}
.logo_mark--footer { width: 52px; height: 52px; }
.nav_wrapper.on-dark .logo_word { color: var(--cream); }

/* ---------------- Gate: no menu on landing ---------------- */
.is-gate .menu_btn { display: none; }
.is-gate .nav_wrapper { pointer-events: none; }
.is-gate .nav_wrapper .logo { pointer-events: auto; }

.is-gate .logo_word {
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(25,18,0,.55);
}

/* ---------------- Gate / split hero ---------------- */
.gate_hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--forest-deep);
  --wind-x: 0px;
  --wind-y: 0px;
}
.hero_nature { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.hero_branch {
  position: absolute;
  top: -12px;
  right: -34px;
  width: min(43vw, 620px);
  color: var(--orange);
  opacity: .88;
  filter: drop-shadow(0 8px 18px rgba(0, 31, 20, .2));
}
.leaf_canopy { position: absolute; inset: 0; }
.autumn_leaf {
  --leaf-size: 14px;
  --leaf-delay: 0s;
  --leaf-duration: 10s;
  --leaf-left: 75%;
  position: absolute;
  top: -12vh;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * .65);
  border-radius: 90% 12% 90% 12%;
  background: var(--yellow);
  box-shadow: inset -2px -1px 0 rgba(102, 51, 0, .24);
  opacity: 0;
  transform-origin: 40% 80%;
  animation: leafFall var(--leaf-duration) linear var(--leaf-delay) infinite;
}
.autumn_leaf:nth-child(3n) { background: #b85f16; }
.autumn_leaf:nth-child(4n) { background: var(--orange); }
@keyframes leafFall {
  0% { opacity: 0; transform: translate3d(var(--wind-x), calc(-8vh + var(--wind-y)), 0) rotate(0deg); }
  10% { opacity: .9; }
  55% { transform: translate3d(calc(var(--wind-x) + 5vw), calc(50vh + var(--wind-y)), 0) rotate(290deg); }
  90% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(calc(var(--wind-x) - 2vw), calc(112vh + var(--wind-y)), 0) rotate(620deg); }
}
.gate_half {
  text-decoration: none;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.gate_half--left {
  left: 0;
  width: 100%;
  background: radial-gradient(circle at 18% 80%, rgba(136,153,130,.2), transparent 32%), linear-gradient(145deg, var(--forest-deep), var(--dark));
  color: var(--cream);
  z-index: 1;
  justify-content: flex-start;
  padding: 12vh 0 6vh 5vw;
}
.gate_half--left:hover { background: radial-gradient(circle at 18% 80%, rgba(136,153,130,.28), transparent 34%), linear-gradient(145deg, var(--forest-deep), #004a2e); }
.gate_half--left .gate_block {
  text-align: left;
  margin-left: 0;
  animation-delay: 0s;
}
.gate_half--right {
  right: 0;
  width: 52%;
  background: radial-gradient(circle at 78% 18%, rgba(136,153,130,.34), transparent 30%), var(--cream);
  color: var(--dark);
  clip-path: url(#waveClip);
  z-index: 2;
  justify-content: center;
  padding: 12vh 4vw 6vh;
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.gate_half--right:hover {
  background: radial-gradient(circle at 78% 18%, rgba(136,153,130,.44), transparent 32%), #eef1ec;
  transform: translateX(-1.6vw);
}
.gate_half--left:hover .gate_half--right,
.gate_hero:hover .gate_half--right:hover { transition-duration: .4s; }
.gate_half--left:hover ~ .gate_half--right {
  transform: translateX(1.2vw);
}
.gate_half--right .gate_block {
  animation-delay: .2s;
  max-width: 460px;
}

.gate_block {
  max-width: 420px;
  text-align: center;
  animation: gateFadeIn 1s cubic-bezier(.22,1,.36,1) both;
}
.gate_half--right .gate_block { animation-delay: .2s; }
@keyframes gateFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.gate_icon {
  width: clamp(48px, 7vw, 72px);
  height: auto;
  margin-bottom: 2.6vh;
  transition: transform .4s ease;
}
.gate_half:hover .gate_icon { transform: translateY(-8px); }

.gate_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.8vh;
}

.gate_sub {
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  line-height: 1.7;
  opacity: .8;
  margin-bottom: 3.2vh;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

.gate_cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: lowercase;
  border: 2px solid currentColor;
  border-radius: 100px;
  padding: 1.4vh 3vw;
  transition: background .3s ease, transform .3s ease;
}
.gate_half--left .gate_cta:hover { background: rgba(251,249,241,.12); transform: translateY(-3px); }
.gate_half--right .gate_cta:hover { background: rgba(25,18,0,.06); transform: translateY(-3px); }

/* Panel covers whole screen before navigating */
.gate_cover_layer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 350;
  pointer-events: none;
  transform: translateX(-101%);
}
.gate_cover_layer span {
  position: absolute;
  inset: 0;
  background: inherit;
}
.gate_cover_layer--left { left: 0; background: var(--dark); }
.gate_cover_layer--right { left: 0; background: var(--cream); }
.gate_cover_layer.is-cover {
  animation: gateCoverIn .65s cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes gateCoverIn {
  from { transform: translateX(-101%); }
  to   { transform: translateX(0); }
}

/* ---------------- Hero extras ---------------- */
.hero_eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--cream);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 2.4vh;
}
.hero_actions { display: flex; gap: 14px; margin-top: 3.4vh; flex-wrap: wrap; }
.cta_ghost {
  display: inline-block;
  border: 2px solid var(--dark);
  color: var(--dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 1.6vh 3vw;
  border-radius: 100px;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.cta_ghost:hover { background: var(--dark); color: var(--cream); transform: translateY(-3px); }
.cta_ghost--small { font-size: .85rem; padding: 8px 18px; }

.hero_card {
  position: absolute;
  right: 7vw;
  top: 50%;
  transform: translateY(-50%) rotate(3deg);
  width: min(30vw, 330px);
  background: var(--cream);
  border: 3px solid var(--dark);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 30px 60px rgba(25, 18, 0, .22);
  animation: cardBob 6s ease-in-out infinite;
  z-index: 2;
}
@keyframes cardBob {
  0%, 100% { transform: translateY(-50%) rotate(3deg); }
  50% { transform: translateY(calc(-50% - 14px)) rotate(1deg); }
}
.hero_card_status { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.hero_card_status img { width: 30px; height: 30px; }
.hero_card_hero { margin: 2vh 0; }
.hero_card_hero small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.hero_card_hero strong { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.hero_card_metrics { display: flex; gap: 8px; margin-bottom: 12px; }
.hero_card_metrics i {
  flex: 1; height: 38px; border-radius: 10px;
  background: linear-gradient(160deg, var(--yellow), var(--orange));
}
.hero_card_metrics i:nth-child(2) { opacity: .75; }
.hero_card_metrics i:nth-child(3) { opacity: .5; }
.hero_card_lines i {
  display: block; height: 9px; border-radius: 6px;
  background: rgba(25, 18, 0, .14); margin-top: 8px;
}
.hero_card_lines i:nth-child(2) { width: 78%; }
.hero_card_lines i:nth-child(3) { width: 56%; }

/* ---------------- Small notes ---------------- */
.mini_note { margin-top: .8vh; font-size: .85rem; opacity: .65; }
.eyebrow_txt {
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1vh;
}
.page_lead { margin-top: 2.4vh; font-size: 1.1rem; font-weight: 700; max-width: 560px; }
.page_section--flush-top { padding-top: 4vh; }
.page_section--tinted { background: var(--sage-soft); }
.page_section--dark { background: var(--dark); color: var(--cream); }
.page_section--dark h2 { color: var(--cream); }

/* ---------------- Profile card ---------------- */
.profile_split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: start;
}
.profile_split .profile_card {
  min-height: 100%;
}
.profile_split .profile_details--mini {
  grid-template-columns: 1fr;
}
.academic_card {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 30px;
  padding: 5vh 3vw;
  box-shadow: 10px 10px 0 var(--yellow);
}
.academic_card .resume_heading { margin-bottom: 2vh; }
.profile_card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4vw;
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 30px;
  padding: 4vh 3vw;
  box-shadow: 10px 10px 0 var(--yellow);
}
.profile_photo_wrap { position: relative; }
.profile_photo {
  width: 100%;
  border-radius: 22px;
  border: 3px solid var(--dark);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #ffe9a8, var(--yellow));
}
.profile_name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1;
}
.profile_role {
  display: inline-block;
  margin: 1.4vh 0 2.6vh;
  background: var(--yellow);
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 16px;
  border-radius: 100px;
}
.profile_details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2vh 2vw;
}
.profile_details dt {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .55;
}
.profile_details dd { font-weight: 700; margin-top: 2px; }
.profile_details a { color: var(--dark); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.profile_details a:hover { color: var(--orange); }

/* ---------------- Resume blocks / timeline ---------------- */
.resume_heading {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  margin-bottom: 5vh;
}
.resume_heading h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.15; max-width: 22ch; }
.resume_number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--dark);
}
.resume_heading--light .resume_number { -webkit-text-stroke: 2px var(--cream); }

.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(var(--dark) 0 8px, transparent 8px 16px);
  opacity: .35;
}
.timeline_item {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2vw;
  padding: 3vh 0;
}
.timeline_item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4.2vh;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--dark);
}
.timeline_item time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--orange);
}
.timeline_body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: .4vh; }
.timeline_meta { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-bottom: 1.2vh; }
.timeline_body ul { padding-left: 1.2em; }
.timeline_body li { margin-bottom: .8vh; line-height: 1.65; }
.timeline_body p { line-height: 1.7; }

/* ---------------- Org / capability cards ---------------- */
.org_root {
  width: fit-content;
  margin: 0 auto 4vh;
  text-align: center;
  background: var(--yellow);
  color: var(--dark);
  border-radius: 20px;
  padding: 2vh 3vw;
  transform: rotate(-1.5deg);
}
.org_root span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.org_root strong { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.org_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.4vw;
}
.org_card {
  background: var(--cream);
  color: var(--dark);
  border-radius: 24px;
  padding: 3.4vh 1.8vw;
  border: 3px solid transparent;
  transition: transform .3s ease, border-color .3s ease;
}
.org_card:hover { transform: translateY(-6px); border-color: var(--yellow); }
.org_card > span {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
}
.org_card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 1vh 0; }
.org_card p { line-height: 1.65; font-size: .95rem; opacity: .85; }
.org_card ul { margin-top: 1.6vh; padding-left: 1.1em; }
.org_card li { margin-bottom: .6vh; font-weight: 700; font-size: .9rem; }
.center_cta { text-align: center; margin-top: 7vh; }

/* ---------------- Project selector ---------------- */
.project_selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.project_tab {
  text-align: left;
  font: inherit;
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 20px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.project_tab span { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: .9rem; }
.project_tab strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.project_tab small { opacity: .65; font-weight: 600; line-height: 1.4; }
.project_tab:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--yellow); }
.project_tab.is-active { background: var(--dark); color: var(--cream); box-shadow: 6px 6px 0 var(--yellow); }
.project_tab.is-active small { opacity: .8; }

/* ---------------- Project bands: Data/AI vs Continuous Improvement ---------------- */
.band_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto 2vh;
}
.band_tab {
  text-align: left;
  font: inherit;
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 34px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.band_tab span { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: .9rem; }
.band_tab strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; }
.band_tab small { opacity: .65; font-weight: 600; line-height: 1.45; }
.band_tab:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--yellow); }
.band_tab.is-active { background: var(--dark); color: var(--cream); box-shadow: 6px 6px 0 var(--yellow); }
.band_tab.is-active span { color: var(--yellow); }
.band_tab.is-active small { opacity: .8; }
.band_panel[hidden] { display: none; }
.band_panel.is-active > .page_section { padding-top: 3vh; }
.band_intro { margin-bottom: 4vh; }
.band_intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  max-width: 22ch;
}

/* ---------------- Project detail panels ---------------- */
.project_detail { padding: 5vh 0 8vh; }
.project_detail[hidden] { display: none; }
.project_head { max-width: 760px; margin-bottom: 5vh; }
.project_head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 2vh;
}
.project_head p { line-height: 1.75; font-size: 1.05rem; margin-bottom: 2vh; }

/* ---------------- Iframe panels ---------------- */
.ai_project_intro {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: 5vh;
}
.ai_project_intro .project_head { margin-bottom: 0; }
.ai_scene_card {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 2px solid var(--dark);
  border-radius: 22px;
  background: var(--forest-deep);
  box-shadow: 10px 10px 0 var(--sage);
  isolation: isolate;
}
.ai_scene_card canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.scene_toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(246, 244, 243, .42);
  border-radius: 999px;
  background: rgba(0, 31, 20, .8);
  color: var(--cream);
  font: 800 .72rem var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.scene_toggle:hover,
.scene_toggle:focus-visible { background: var(--cream); color: var(--dark); outline: none; }

.frame_panel {
  border: 3px solid var(--dark);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 10px 10px 0 var(--yellow);
}
.frame_panel iframe { display: block; width: 100%; height: 78vh; min-height: 520px; border: 0; }
.frame_panel--app iframe { height: 82vh; }
.frame_panel--inspection { background: rgb(23 47 68); }
.frame_panel--inspection iframe {
  height: min(82vh, 760px);
  min-height: 660px;
  background: rgb(23 47 68);
}
.frame_panel_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 14px 20px;
  background: var(--dark);
  color: var(--cream);
  flex-wrap: wrap;
}
.frame_panel_bar strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.frame_panel_bar .cta_ghost { border-color: var(--cream); color: var(--cream); }
.frame_panel_bar .cta_ghost:hover { background: var(--cream); color: var(--dark); }

/* ---------------- Interactive dashboard collection ---------------- */
.dashboard_workspace { margin-bottom: 8vh; }
.dashboard_picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dashboard_pick {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 15px 16px;
  border: 2px solid var(--dark);
  border-radius: 16px;
  background: #fff;
  color: var(--dark);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.dashboard_pick_icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,51,0,.22);
  border-radius: 14px 14px 14px 5px;
  background: linear-gradient(145deg, rgba(136,153,130,.22), rgba(246,244,243,.92));
  color: var(--forest-deep);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}
.dashboard_pick_icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard_pick strong { font-family: var(--font-display); font-size: .98rem; line-height: 1.2; }
.dashboard_pick:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--yellow); }
.dashboard_pick.is-active { background: var(--dark); color: var(--cream); box-shadow: 5px 5px 0 var(--yellow); }
.dashboard_pick.is-active .dashboard_pick_icon {
  border-color: rgba(246,244,243,.32);
  background: linear-gradient(145deg, var(--orange), #f1b255);
  color: var(--forest-deep);
}
.dashboard_frame_bar > div:first-child { display: grid; gap: 2px; }
.dashboard_frame_label { color: var(--yellow); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dashboard_actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard_actions button { background: transparent; cursor: pointer; }
.frame_panel--dashboard iframe { height: 76vh; min-height: 540px; }
.dashboard_access_note { margin: 16px 8px 0; font-size: .86rem; font-weight: 700; opacity: .65; }
.dashboard_archive { margin-top: 4vh; }
.dashboard_archive_head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 2.4vh; }
.dashboard_archive_head .shot_title { margin-bottom: 0; }
.shot_grid--gallery.is-collapsed .dashboard_extra_shot { display: none; }

.ai_detail_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 5vh;
}
.ai_detail_card {
  padding: 22px;
  border: 2px solid var(--dark);
  border-radius: 18px;
  background: #fff;
}
.ai_detail_card > span { color: var(--orange); font-family: var(--font-display); font-weight: 700; }
.ai_detail_card h3 { margin: 12px 0 8px; font-family: var(--font-display); font-size: 1.1rem; }
.ai_detail_card p { font-size: .9rem; line-height: 1.6; opacity: .78; }

/* ---------------- Promise strip / tags ---------------- */
.promise_strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 5vh;
}
.promise_strip span, .promise_strip strong {
  background: #fff;
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: .9rem;
}
.promise_strip strong { background: var(--yellow); border-color: var(--dark); }

/* ---------------- Stage cards ---------------- */
.stage_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 6vh;
}
.stage_card {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 22px;
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stage_card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 8px 8px 0 var(--yellow); }
.stage_meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6vh; }
.stage_number { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--orange); }
.stage_system { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; background: var(--cream); border: 2px solid var(--dark); padding: 4px 10px; border-radius: 100px; }
.stage_card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: .8vh; }
.stage_card p { font-size: .9rem; line-height: 1.6; opacity: .85; }
.stage_output {
  display: inline-block;
  margin-top: 1.6vh;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--orange);
}

/* ---------------- Decision lanes ---------------- */
.decision_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 6vh;
}
.decision_card { border-radius: 22px; padding: 26px; border: 3px solid var(--dark); }
.decision_card--normal { background: var(--cream); }
.decision_card--critical { background: var(--orange); color: var(--cream); border-color: var(--dark); }
.lane_status {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  background: var(--dark); color: var(--cream);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 1.6vh;
}
.decision_card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 1vh; }
.decision_card p { line-height: 1.65; }

/* ---------------- Intelligence items ---------------- */
.intel_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 6vh;
}
.intel_item {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 22px;
  padding: 22px;
}
.intel_item > span {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--yellow);
  border: 2px solid var(--dark);
  border-radius: 14px;
  height: fit-content;
  padding: 8px 12px;
  font-size: .85rem;
}
.intel_item strong { display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: .6vh; }
.intel_item p { font-size: .9rem; line-height: 1.6; opacity: .85; }

/* ---------------- Screenshot gallery ---------------- */
.shot_block { margin-bottom: 6vh; }
.shot_title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 2.4vh; }
.shot_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.shot_grid--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.shot_grid--gallery { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.shot_grid figure {
  border: 3px solid var(--dark);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot_grid figure:hover { transform: translateY(-5px); box-shadow: 8px 8px 0 var(--yellow); }
.shot_grid img { display: block; width: 100%; height: auto; }
.shot_grid--workflow figure { cursor: zoom-in; }
.shot_grid--workflow figure:focus-within {
  outline: 3px solid rgba(217,120,24,.35);
  outline-offset: 4px;
}
.shot_grid figcaption {
  padding: 10px 16px;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-top: 3px solid var(--dark);
  background: var(--cream);
}

.image_lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(0,31,20,.78);
  backdrop-filter: blur(12px);
}
.image_lightbox[hidden] { display: none; }
.image_lightbox__panel {
  position: relative;
  width: min(96vw, 1180px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 2px solid rgba(246,244,243,.8);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}
.image_lightbox__image {
  width: 100%;
  max-height: calc(92vh - 62px);
  object-fit: contain;
  background: #fff;
}
.image_lightbox__caption {
  padding: 14px 18px;
  color: var(--dark);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: 1px solid rgba(0,51,0,.18);
}
.image_lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,51,0,.22);
  border-radius: 50%;
  background: rgba(246,244,243,.92);
  color: var(--dark);
  cursor: pointer;
}
.image_lightbox__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.image_lightbox__close:hover,
.image_lightbox__close:focus-visible {
  background: var(--dark);
  color: var(--cream);
  outline: none;
}

@media (max-width: 700px) {
  .dashboard_picker { grid-template-columns: 1fr; }
  .dashboard_archive_head { align-items: flex-start; flex-direction: column; }
  .dashboard_frame_bar { align-items: flex-start; }
  .dashboard_actions { width: 100%; }
  .dashboard_actions .cta_ghost { flex: 1 1 auto; text-align: center; }
  .frame_panel--dashboard iframe { min-height: 440px; height: 68vh; }
  .frame_panel--inspection iframe { min-height: 620px; height: 74vh; }
  .ai_detail_grid { grid-template-columns: 1fr; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .ai_detail_grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- KPI strip ---------------- */
.kpi_strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 6vh;
}
.kpi {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 22px;
  padding: 22px;
  text-align: center;
}
.kpi span { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.kpi strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1.1; color: var(--dark); }
.kpi small { font-weight: 700; opacity: .6; }
.kpi--critical { background: var(--orange); color: var(--cream); }
.kpi--critical strong, .kpi--critical span, .kpi--critical small { color: var(--cream); opacity: 1; }
.kpi--closed { background: var(--yellow); }

/* ---------------- Data panels: chart + table ---------------- */
.data_grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  margin-bottom: 5vh;
}
.chart_panel, .table_panel {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 22px;
  padding: 26px;
}
.chart_panel h4, .table_panel h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.panel_note { font-size: .88rem; opacity: .65; margin: .6vh 0 2vh; }

.mini_chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 220px;
  border-bottom: 3px solid var(--dark);
  padding: 0 6px;
}
.bar_column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}
.bar_column strong { font-family: var(--font-display); font-size: .9rem; }
.bar_column > span { font-size: .75rem; font-weight: 800; text-transform: uppercase; opacity: .6; }
.bar_stack {
  width: 70%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  height: 75%;
  gap: 2px;
}
.bar_new { display: block; background: var(--yellow); border-radius: 6px 6px 0 0; border: 2px solid var(--dark); }
.bar_critical { display: block; background: var(--orange); border-radius: 6px; border: 2px solid var(--dark); min-height: 0; }
.chart_legend { display: flex; gap: 20px; margin-top: 1.6vh; font-size: .8rem; font-weight: 800; }
.chart_legend span { display: flex; align-items: center; gap: 8px; }
.chart_legend i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--dark); display: inline-block; }
.legend_new { background: var(--yellow); }
.legend_critical { background: var(--orange); }

.table_wrap { overflow-x: auto; }
.finding_table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.finding_table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 10px 12px;
  border-bottom: 3px solid var(--dark);
}
.finding_table td { padding: 12px; border-bottom: 2px solid rgba(25,18,0,.12); font-weight: 600; }
.sev, .sts {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--dark);
}
.sev--high { background: var(--yellow); }
.sev--emergency { background: var(--orange); color: var(--cream); }
.sev--medium { background: var(--cream); }
.sts--assigned { background: var(--sage-soft); }
.sts--open { background: rgba(217, 120, 24, .2); }
.sts--closed { background: rgba(136, 153, 130, .35); }

/* ---------------- Schema strip ---------------- */
.schema_strip {
  background: var(--dark);
  color: var(--cream);
  border-radius: 22px;
  padding: 26px;
}
.schema_strip strong { display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: 1.6vh; }
.schema_strip div { display: flex; flex-wrap: wrap; gap: 10px; }
.schema_strip code {
  background: rgba(251,249,241,.12);
  border: 1px solid rgba(251,249,241,.35);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .82rem;
}

/* ---------------- AI note ---------------- */
.ai_note {
  border-left: 6px solid var(--orange);
  background: #fff;
  border-radius: 0 16px 16px 0;
  padding: 18px 22px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 4vh;
  max-width: 720px;
}

/* ---------------- Engineering cards ---------------- */
.eng_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.eng_card {
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 24px;
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.eng_card:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--yellow); }
.eng_card time {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--yellow);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 4px 16px;
  margin-bottom: 1.8vh;
}
.eng_card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin-bottom: 1.2vh; }
.eng_card p { line-height: 1.7; font-size: .95rem; opacity: .88; }
.eng_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2vh; }
.eng_tags span {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--cream);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 4px 12px;
}

/* ---------------- CSS dashboard mock (home) ---------------- */
.dash_mock {
  width: min(34vw, 420px);
  background: var(--cream);
  border: 3px solid var(--dark);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 12px 12px 0 rgba(25, 18, 0, .3);
  transform: rotate(-2deg);
  animation: dashBob 7s ease-in-out infinite;
}
@keyframes dashBob {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-12px); }
}
.dash_mock_top {
  display: flex; gap: 8px;
  background: var(--dark);
  padding: 12px 16px;
}
.dash_mock_top span { width: 12px; height: 12px; border-radius: 50%; background: var(--cream); opacity: .9; }
.dash_mock_top span:first-child { background: var(--orange); }
.dash_mock_top span:nth-child(2) { background: var(--yellow); }
.dash_mock_body { padding: 20px; }
.dash_mock_kpis { display: flex; gap: 10px; margin-bottom: 16px; }
.dash_mock_kpis i {
  flex: 1; height: 44px; border-radius: 12px;
  border: 2px solid var(--dark);
  background: linear-gradient(160deg, var(--yellow), var(--orange));
}
.dash_mock_kpis i:nth-child(2) { opacity: .8; }
.dash_mock_kpis i:nth-child(3) { opacity: .6; }
.dash_mock_chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 120px;
  border-bottom: 3px solid var(--dark);
  margin-bottom: 16px;
  padding: 0 4px;
}
.dash_mock_chart em {
  flex: 1;
  background: var(--yellow);
  border: 2px solid var(--dark);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.dash_mock_chart em:nth-child(2n) { background: var(--orange); }
.dash_mock_rows i {
  display: block; height: 10px; border-radius: 6px;
  background: rgba(25, 18, 0, .14); margin-top: 10px;
}
.dash_mock_rows i:nth-child(2) { width: 80%; }
.dash_mock_rows i:nth-child(3) { width: 60%; }

/* ---------------- Footer CTA ---------------- */
.footer_cta_row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.footer_mail_btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  text-decoration: none;
  border: 3px solid var(--dark);
  border-radius: 100px;
  padding: 1.6vh 3vw;
  transition: background .3s ease, transform .3s ease;
}
.footer_mail_btn:hover { background: var(--yellow); transform: translateY(-3px); }
.footer_submit.as-link { display: inline-block; text-decoration: none; }

/* ---------------- Blog cards ---------------- */
.blog_grid { display: flex; flex-direction: column; gap: 22px; }
.blog_card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  background: #fff;
  border: 3px solid var(--dark);
  border-radius: 24px;
  padding: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: var(--dark);
}
.blog_card:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--yellow); }
.blog_card_icon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: var(--cream);
  border: 2px solid var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex: 0 0 80px;
}
.blog_card_icon svg { width: 36px; height: 36px; }
.blog_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 1vh;
}
.blog_meta time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  background: var(--yellow);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 3px 14px;
}
.blog_meta span {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--cream);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 3px 12px;
}
.blog_card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.25;
  margin-bottom: 1vh;
}
.blog_card p { line-height: 1.7; font-size: .95rem; opacity: .82; margin-bottom: 1.6vh; }
.blog_read {
  font-weight: 800;
  font-size: .88rem;
  color: var(--orange);
  text-decoration: none;
  transition: color .2s ease;
}
.blog_read:hover { color: var(--dark); }

/* ---------------- Palette and layout refinement ---------------- */
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
.academic_card,
.profile_card,
.project_tab,
.band_tab,
.frame_panel,
.dashboard_pick,
.ai_detail_card,
.promise_strip span,
.promise_strip strong,
.stage_card,
.intel_item,
.shot_grid figure,
.kpi,
.chart_panel,
.table_panel,
.ai_note,
.eng_card,
.blog_card { background-color: var(--surface); }

.profile_split { gap: clamp(24px, 3vw, 42px); }
.profile_split .profile_card {
  grid-template-columns: minmax(130px, .72fr) minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 34px);
}
.profile_details dd,
.profile_details a { overflow-wrap: anywhere; }
.timeline_body { max-width: 850px; }
.footer { padding: 8vh 0 5vh; background: var(--sage-soft); border-top: 2px solid var(--dark); }
.footer_privacy { max-width: 68ch; }
.project_selector { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.project_tab,
.band_tab,
.academic_card,
.profile_card,
.frame_panel,
.stage_card,
.eng_card,
.blog_card { border-width: 2px; }
.project_tab:focus-visible,
.band_tab:focus-visible,
.dashboard_pick:focus-visible { position: relative; z-index: 2; }
.frame_panel:fullscreen { border-radius: 0; background: var(--forest-deep); }
.frame_panel:fullscreen iframe { width: 100vw; height: 100vh; min-height: 100vh; }

@media (max-width: 900px) {
  .hero_branch { width: min(78vw, 560px); right: -100px; opacity: .7; }
  .profile_split { grid-template-columns: 1fr; }
  .profile_split .profile_card { grid-template-columns: 1fr; }
  .page_hero { padding: 16vh 0 7vh; }
  .page_section { padding: 7vh 0; }
  .project_detail { padding: 4vh 0 7vh; }
}

@media (max-width: 700px) {
  .container { width: min(91vw, 1200px); }
  .nav_wrapper { padding: 14px 4vw; }
  .frame_panel iframe,
  .frame_panel--app iframe { height: 70vh; min-height: 460px; }
  .project_selector { grid-template-columns: 1fr; }
  .project_tab { padding: 15px 17px; border-radius: 16px; }
  .shot_grid--gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .autumn_leaf { display: none; }
  .hero_branch { transform: none !important; }
}

@media (max-width: 600px) {
  .blog_card { grid-template-columns: 1fr; }
  .blog_card_icon { display: none; }
}

/* ---------------- Responsive additions ---------------- */
@media (max-width: 900px) {
  .gate_half { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; min-height: 50vh; }
  .gate_half--right {
    min-height: 56vh;
    margin-top: -6vh;
    padding-top: 13vh;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    animation-name: edgeBreatheV;
  }
  .gate_half--right .gate_block { animation-delay: 0s; }
  .gate_half--left { padding: 8vh 6vw; }
  .gate_half--left .gate_block, .gate_half--right .gate_block { text-align: center; }
  @keyframes edgeBreatheV {
    0%, 100% { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
  }
  .hero_card { display: none; }
  .profile_card { grid-template-columns: 1fr; }
  .profile_photo { max-width: 320px; }
  .timeline_item { grid-template-columns: 1fr; gap: .6vh; }
  .band_grid { grid-template-columns: 1fr; max-width: 520px; }
  .decision_grid, .data_grid { grid-template-columns: 1fr; }
  .dash_mock { width: min(80vw, 420px); }
  .ai_project_intro { grid-template-columns: 1fr; }
  .ai_project_intro .project_head { max-width: 720px; }
}
@media (max-width: 560px) {
  .profile_details { grid-template-columns: 1fr; }
  .logo_word { font-size: 1.1rem; }
  .ai_scene_card { border-radius: 16px; box-shadow: 6px 6px 0 var(--sage); }
  .scene_toggle { right: 9px; bottom: 9px; padding: 7px 10px; }
}

/* ============================================================
   Botanical refinement — slimmer panels and calmer interactions
   ============================================================ */
.modal_wrapper {
  --menu-origin-x: 40px;
  --menu-origin-y: 40px;
  clip-path: circle(0 at var(--menu-origin-x) var(--menu-origin-y));
}
.modal_wrapper.is-open { clip-path: circle(150vmax at var(--menu-origin-x) var(--menu-origin-y)); }

/* Landing: organic seam, leaf litter, and directional page reveal. */
.hero_branch { display: none !important; }
.gate_half--right {
  width: 51.5%;
  transition: width .72s cubic-bezier(.76,0,.24,1), clip-path .72s cubic-bezier(.76,0,.24,1), transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.gate_half--right:hover { transform: translateX(-.45vw); }
.gate_half--left:hover ~ .gate_half--right { transform: none; }
.gate_hero.is-opening-left .gate_half--right { clip-path: inset(0 0 0 100%); transform: none; }
.gate_hero.is-opening-right .gate_half--right { width: 100%; clip-path: inset(0); transform: none; }
.gate_hero[class*="is-opening-"] .gate_half:not(.is-selected) .gate_block { opacity: 0; }
.gate_hero[class*="is-opening-"] .hero_nature { opacity: 0; transition: opacity .28s ease; }
.leaf_ground { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 84px; }
.ground_leaf {
  --leaf-push: 0px; --leaf-lift: 0px;
  position: absolute; left: var(--ground-x); bottom: var(--ground-y);
  width: 20px; height: 12px; border-radius: 90% 10% 90% 10%;
  background: #c06b22;
  box-shadow: inset -3px -2px 0 rgba(102,51,0,.28), 0 3px 7px rgba(0,31,20,.15);
  transform: translate3d(var(--leaf-push), var(--leaf-lift), 0) rotate(var(--ground-r)) scale(var(--ground-s));
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.ground_leaf:nth-child(3n) { background: #8b4a18; }
.ground_leaf:nth-child(4n) { background: #dd852e; }
.ground_leaf:nth-child(5n) { background: #a8a04e; }

/* A quieter forest card language used throughout the site. */
:is(.profile_card, .academic_card, .project_tab, .band_tab, .stage_card, .intel_item, .kpi, .chart_panel, .table_panel, .eng_card, .blog_card, .dashboard_pick, .ai_detail_card, .decision_card, .shot_grid figure, .frame_panel) {
  border: 1px solid rgba(0,51,0,.24); border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(219,226,216,.38));
  box-shadow: 0 10px 30px rgba(0,31,20,.075);
}
:is(.profile_card, .academic_card, .project_tab, .band_tab, .stage_card, .intel_item, .eng_card, .blog_card, .dashboard_pick, .ai_detail_card) { position: relative; overflow: hidden; }
:is(.profile_card, .academic_card, .project_tab, .band_tab, .stage_card, .intel_item, .eng_card, .blog_card, .dashboard_pick, .ai_detail_card)::after {
  content: ""; position: absolute; right: -7px; top: -8px; width: 28px; height: 18px;
  border-radius: 100% 0 100% 0; background: rgba(136,153,130,.34); transform: rotate(-18deg); pointer-events: none;
}
:is(.project_tab, .band_tab, .stage_card, .eng_card, .blog_card, .dashboard_pick):hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,51,0,.12); }
:is(.project_tab, .band_tab, .dashboard_pick).is-active {
  color: var(--cream); background: linear-gradient(145deg, var(--forest-deep), #074a2f);
  border-color: rgba(246,244,243,.18); box-shadow: 0 12px 28px rgba(0,31,20,.16);
}

/* Profile, education, experience: compact editorial layout. */
.profile_split { grid-template-columns: .92fr 1.08fr; gap: 18px; }
.profile_split .profile_card { min-height: 0; grid-template-columns: 138px minmax(0, 1fr); gap: 22px; padding: 22px; }
.profile_photo { border-width: 1px; border-radius: 14px; }
.profile_name { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.profile_role { margin: 10px 0 16px; padding: 6px 12px; font-size: .7rem; }
.profile_details { gap: 10px 18px; }
.academic_card { padding: 22px; }
.resume_heading { align-items: center; gap: 14px; margin-bottom: 22px; }
.resume_number {
  flex: 0 0 auto; color: var(--cream); background: var(--forest-deep);
  border-radius: 10px 100px 100px 10px; padding: 8px 12px;
  font-size: 1rem; line-height: 1; -webkit-text-stroke: 0;
}
.resume_heading h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
.timeline { padding-left: 0; display: grid; gap: 10px; }
.timeline::before, .timeline_item::before { display: none; }
.timeline_item {
  grid-template-columns: 145px minmax(0, 1fr); gap: 18px; padding: 17px 20px;
  border-left: 3px solid var(--sage); border-radius: 0 12px 12px 0; background: rgba(136,153,130,.10);
}
.timeline_item time { font-size: .82rem; }
.timeline_body h3 { font-size: 1.08rem; }
.timeline_body li { margin-bottom: 4px; line-height: 1.5; font-size: .91rem; }
.timeline_body p { line-height: 1.55; font-size: .91rem; }
.academic_card .timeline_item { grid-template-columns: 92px 1fr; padding: 12px 14px; gap: 12px; }

/* Project navigation and content geometry. */
.page_section--tinted { background: linear-gradient(90deg, var(--sage-soft), rgba(136,153,130,.24)); }
.project_selector { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.project_tab { min-width: 0; padding: 13px 12px; border-radius: 13px; }
.project_tab strong { font-size: .93rem; line-height: 1.16; }
.project_tab small { font-size: .7rem; line-height: 1.3; }
.project_tab:hover { box-shadow: 0 12px 26px rgba(0,51,0,.11); }
.band_grid { max-width: 920px; gap: 14px; }
.band_tab { padding: 20px 22px; }
.project_head { margin-bottom: 28px; }
.stage_grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stage_card { padding: 16px; border-radius: 14px; }
.stage_card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,51,0,.11); }
.stage_meta { align-items: flex-start; gap: 6px; }
.stage_number { font-size: 1.25rem; }
.stage_system { padding: 3px 7px; font-size: .57rem; border-width: 1px; }
.stage_card h3 { font-size: 1rem; }
.stage_card p { font-size: .8rem; }
.shot_grid--workflow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.shot_grid--workflow figure { display: grid; grid-template-rows: 150px auto; }
.shot_grid--workflow img { width: 100%; height: 150px; object-fit: cover; object-position: top; }
.shot_grid figure:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,51,0,.11); }
.shot_grid figcaption { border-top: 1px solid rgba(0,51,0,.2); }
@media (max-width: 900px) {
  .stage_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot_grid--workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stage_grid { grid-template-columns: 1fr; }
  .shot_grid--workflow { grid-template-columns: 1fr; }
}
.dashboard_picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard_pick { min-height: 76px; padding: 13px 14px; }
.kpi--critical { background: var(--orange); color: var(--cream); }
.kpi--closed { background: var(--sage); color: var(--dark); }

/* Embedded inspection app is scaled in conveyor-dashboard.html, so this frame can stay compact. */
.frame_panel--inspection iframe { height: min(82vh, 760px); min-height: 660px; }

/* Blog entries become compact forest-editorial rows rather than heavy outlined boxes. */
.blog_card { padding: 20px 22px; gap: 18px; border-left: 4px solid var(--sage); }
.blog_card_icon { width: 52px; height: 52px; flex-basis: 52px; border: 1px solid rgba(0,51,0,.3); border-radius: 50% 50% 50% 12px; }
.blog_card_icon svg { width: 25px; height: 25px; }
.blog_meta time, .blog_meta span { border-width: 1px; }

@media (max-width: 1100px) {
  .project_selector {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 30vw); grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 16px; scroll-snap-type: inline mandatory;
  }
  .project_tab { scroll-snap-align: start; }
}

@media (max-width: 900px) {
  .gate_half--right {
    width: 100%;
    clip-path: none;
    border-radius: 50% 50% 0 0 / 7% 7% 0 0;
    margin-top: -4vh;
    padding-top: 12vh;
  }
  .gate_half--right:hover { transform: none; }
  .gate_hero.is-opening-left .gate_half--left, .gate_hero.is-opening-right .gate_half--right {
    position: fixed; inset: 0; width: 100%; min-height: 100vh; margin: 0; z-index: 20; clip-path: inset(0);
    animation: mobileGateExpand .72s cubic-bezier(.76,0,.24,1) both;
  }
  @keyframes mobileGateExpand { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0); } }
  .profile_split { grid-template-columns: 1fr; }
  .dashboard_picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .gate_half--right { width: 100%; clip-path: none; border-radius: 50% 50% 0 0 / 6% 6% 0 0; }
  .gate_half .gate_block { width: min(88vw, 420px); max-width: min(88vw, 420px); }
  .gate_half--right .gate_block { max-width: min(88vw, 420px); }
  .gate_title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .gate_half--right .gate_title { max-width: 10ch; margin-left: auto; margin-right: auto; overflow-wrap: normal; }
  .gate_sub { max-width: 31ch; }
  .leaf_ground { height: 58px; }
  .ground_leaf { width: 15px; height: 9px; }
  .profile_split .profile_card { grid-template-columns: 96px minmax(0,1fr); padding: 16px; gap: 14px; }
  .profile_name { font-size: 1.35rem; }
  .profile_role { margin-bottom: 10px; }
  .academic_card { padding: 16px; }
  .timeline_item, .academic_card .timeline_item { grid-template-columns: 1fr; gap: 5px; padding: 14px; }
  .dashboard_picker { grid-template-columns: 1fr; }
  .frame_panel--inspection iframe { height: 74vh; min-height: 620px; }
}

/* ============================================================
   Review pass: hero motion, account, authentication, and balance
   ============================================================ */
.gate_half--right {
  right: -5vw;
  width: calc(51.5% + 5vw);
  padding-right: 9vw;
  background: var(--cream);
}
.gate_half--right:hover {
  background: var(--cream);
  transform: translateX(-3vw);
}
.gate_hero.is-opening-left .gate_half--right {
  clip-path: url(#waveClip);
  transform: translateX(110%);
}
.gate_hero.is-opening-right .gate_half--right {
  right: 0;
  width: 100%;
  padding-right: 4vw;
  clip-path: inset(0);
}
.leaf_ground, .ground_leaf { display: none !important; }

.account_btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,51,0,.42);
  border-radius: 50%;
  color: var(--dark);
  background: rgba(246,244,243,.72);
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.account_btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.account_btn:hover { transform: translateY(-2px); background: var(--dark); color: var(--cream); }
.account_btn.is-authenticated::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 0;
  bottom: 1px;
  border-radius: 50%;
  background: #48b97c;
  border: 2px solid var(--cream);
}
.account_btn { position: relative; }
.account_btn--gate { position: absolute; z-index: 12; top: 26px; right: 28px; }

/* Personal identity and education now share one visual container. */
.profile_education_card {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 0;
  border: 1px solid rgba(0,51,0,.24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(219,226,216,.38));
  box-shadow: 0 14px 36px rgba(0,31,20,.08);
  overflow: hidden;
}
.profile_identity {
  display: grid;
  grid-template-columns: 138px minmax(0,1fr);
  align-items: start;
  gap: 22px;
  padding: 26px;
  border-right: 1px solid rgba(0,51,0,.16);
}
.education_panel { padding: 26px; }
.education_panel .resume_heading { margin-bottom: 14px; }
.education_panel .timeline_item { grid-template-columns: 92px minmax(0,1fr); padding: 12px 14px; gap: 12px; }

/* Selector sits close to the content it controls. */
.band_panel[data-band-panel="data"] > .page_section--flush-top { padding-top: 3vh; padding-bottom: 3vh; }
.band_panel[data-band-panel="data"] > .project_detail { padding-top: 2vh; }

/* Engineering is a bright reading surface with sage cards. */
.band_panel[data-band-panel="eng"] > .page_section--tinted {
  background: linear-gradient(145deg, #fbfbf8, #edf1eb);
  color: var(--dark);
  border-top: 1px solid rgba(0,51,0,.12);
}
.band_panel[data-band-panel="eng"] .eng_card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,227,217,.52));
  color: var(--dark);
}

/* Login page. */
.auth_page { min-height: 100vh; background: radial-gradient(circle at 82% 15%, rgba(136,153,130,.45), transparent 32%), var(--cream); }
.nav_wrapper--auth { position: fixed; }
.auth_back { color: var(--dark); text-decoration: none; font-weight: 800; }
.auth_shell { min-height: 100vh; display: grid; place-items: center; padding: 110px 5vw 45px; }
.auth_card {
  width: min(92vw, 470px);
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(0,51,0,.25);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 22px 70px rgba(0,31,20,.12);
  backdrop-filter: blur(14px);
}
.auth_mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 20px; color: var(--dark); background: var(--sage-soft); border-radius: 50% 50% 50% 14px; }
.auth_mark svg { width: 36px; height: 36px; }
.auth_card h1 { font: 700 clamp(2rem,5vw,3rem)/1.05 var(--font-display); }
.auth_intro { margin: 14px 0 24px; line-height: 1.65; opacity: .72; }
.auth_form { display: grid; gap: 8px; }
.auth_form label { margin-top: 9px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth_form input {
  width: 100%; border: 1px solid rgba(0,51,0,.34); border-radius: 12px;
  background: rgba(246,244,243,.8); color: var(--dark); padding: 13px 14px; outline: 0;
}
.auth_form input:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(136,153,130,.25); }
.password_field { position: relative; }
.password_field input { padding-right: 92px; }
.password_toggle { position: absolute; right: 7px; top: 7px; bottom: 7px; width: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; padding: 0; background: var(--sage-soft); color: var(--dark); cursor: pointer; line-height: 0; }
.password_toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password_toggle:focus-visible { outline: 3px solid rgba(217,120,24,.35); outline-offset: 2px; }
.auth_submit { display: block; width: 100%; margin-top: 16px; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--dark); color: var(--cream); text-align: center; text-decoration: none; font-weight: 800; cursor: pointer; }
.auth_submit:hover { background: #075232; }
.auth_error { color: #9c2f20; font-size: .86rem; font-weight: 800; margin-top: 6px; }
.auth_notice { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(0,51,0,.14); font-size: .75rem; line-height: 1.5; opacity: .58; }
.auth_active p { margin: 16px 0; }
.auth_logout { width: 100%; margin-top: 10px; border: 0; background: transparent; color: var(--orange); font-weight: 800; cursor: pointer; }
.auth_form.is-shaking { animation: authShake .35s ease; }
@keyframes authShake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

@media (max-width: 900px) {
  .gate_half--right { right: auto; width: 100%; padding-right: 4vw; }
  .gate_half--right:hover { transform: none; }
  .profile_education_card { grid-template-columns: 1fr; }
  .profile_identity { border-right: 0; border-bottom: 1px solid rgba(0,51,0,.16); }
}
@media (max-width: 600px) {
  .account_btn { width: 40px; height: 40px; }
  .account_btn--gate { top: 16px; right: 16px; }
  .profile_identity { grid-template-columns: 96px minmax(0,1fr); padding: 17px; gap: 14px; }
  .education_panel { padding: 17px; }
  .education_panel .timeline_item { grid-template-columns: 1fr; }
}

/* ---------------- Expandable article library ---------------- */
.article_library { display: grid; gap: 14px; }
.blog_article {
  border: 1px solid rgba(0,51,0,.22);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(226,232,223,.42));
  box-shadow: 0 10px 28px rgba(0,31,20,.065);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.blog_article[open] { border-color: rgba(0,51,0,.46); box-shadow: 0 18px 50px rgba(0,31,20,.11); }
.blog_article summary {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 42px;
  gap: 18px;
  align-items: center;
  padding: 21px 24px;
  cursor: pointer;
  list-style: none;
}
.blog_article summary::-webkit-details-marker { display: none; }
.blog_article summary:hover { background: rgba(136,153,130,.09); }
.article_number {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50% 50% 50% 12px; background: var(--forest-deep); color: var(--cream);
  font: 700 .9rem var(--font-display);
}
.blog_article summary h2 { margin: 6px 0; font: 600 clamp(1.12rem,2vw,1.45rem)/1.2 var(--font-display); }
.blog_article summary p { max-width: 820px; color: var(--forest); line-height: 1.55; }
.blog_article .blog_meta { margin: 0; }
.article_toggle { position: relative; width: 38px; height: 38px; border: 1px solid rgba(0,51,0,.28); border-radius: 50%; }
.article_toggle::before, .article_toggle::after { content: ""; position: absolute; left: 11px; right: 11px; top: 18px; height: 2px; background: var(--dark); transition: transform .3s ease; }
.article_toggle::after { transform: rotate(90deg); }
.blog_article[open] .article_toggle::after { transform: rotate(0); }
.article_content {
  display: grid;
  grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
  gap: clamp(24px,4vw,54px);
  padding: 8px 28px 32px 90px;
  animation: articleOpen .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes articleOpen { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.article_prose h3 { margin: 18px 0 7px; font: 600 1.15rem var(--font-display); }
.article_prose h3:first-child { margin-top: 0; }
.article_prose p, .article_prose li { font-size: .95rem; line-height: 1.72; color: #315d44; }
.article_prose ul { margin: 14px 0; padding-left: 1.2em; }
.article_source { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(0,51,0,.14); font-size: .82rem !important; }
.article_source a { color: var(--orange); font-weight: 800; }
.article_visual {
  position: sticky; top: 100px; align-self: start; min-height: 250px; overflow: hidden;
  border-radius: 16px; background: var(--forest-deep); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(246,244,243,.14);
}
.article_visual--data { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 24px; }
.article_visual--data span { padding: 8px 10px; border: 1px solid rgba(246,244,243,.5); border-radius: 999px; font-size: .68rem; font-weight: 800; }
.article_visual--data i { width: 18px; height: 2px; align-self: center; background: var(--yellow); }
.article_visual--ai { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 34px; }
.article_visual--ai span { display: grid; place-items: center; border-radius: 50% 50% 50% 12px; background: rgba(246,244,243,.1); color: #f0b35a; font: 700 .74rem var(--font-display); }
.article_visual--vision .visual_belt, .article_visual--fire .visual_belt { position: absolute; left: 8%; right: 8%; top: 55%; height: 48px; border: 2px solid rgba(246,244,243,.35); border-radius: 999px; background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(246,244,243,.22) 29px 31px); }
.article_visual--vision b { position: absolute; padding: 5px 8px; border: 2px solid #ff805d; color: #ffaf91; font-size: .65rem; }
.article_visual--vision b:nth-of-type(1) { left: 22%; top: 36%; }
.article_visual--vision b:nth-of-type(2) { right: 21%; top: 43%; }
.article_visual--coal { display: grid; place-items: center; }
.article_visual--coal i { position: absolute; border-radius: 46% 54% 60% 40%; background: #101820; border: 1px solid #889982; box-shadow: 0 0 24px rgba(214,129,35,.18); }
.article_visual--coal i:nth-child(1) { width: 84px; height: 72px; left: 17%; top: 25%; }
.article_visual--coal i:nth-child(2) { width: 58px; height: 52px; left: 49%; top: 18%; }
.article_visual--coal i:nth-child(3) { width: 95px; height: 77px; right: 10%; top: 44%; }
.article_visual--coal i:nth-child(4) { width: 48px; height: 42px; left: 33%; bottom: 15%; }
.article_visual--coal i:nth-child(5) { width: 25px; height: 23px; left: 62%; bottom: 18%; }
.article_visual--coal i:nth-child(6) { width: 18px; height: 15px; left: 12%; bottom: 19%; }
.article_visual--condition, .article_visual--maintenance { display: grid; place-items: center; padding: 28px; }
.article_visual--condition svg, .article_visual--maintenance svg { width: 100%; height: 130px; overflow: visible; }
.article_visual--condition polyline, .article_visual--maintenance path { fill: none; stroke: #f0a13e; stroke-width: 4; }
.article_visual--condition line, .article_visual--maintenance line { stroke: #ff725c; stroke-width: 2; stroke-dasharray: 8 6; }
.article_visual--condition span, .article_visual--maintenance span { position: absolute; right: 22px; top: 46px; font-size: .66rem; color: #ff8f73; font-weight: 800; }
.article_visual--fire i { position: absolute; bottom: 43%; width: 28px; height: 52px; border-radius: 70% 30% 60% 40%; background: #ff7426; box-shadow: 0 0 24px #ff5d28; }
.article_visual--fire i:nth-of-type(1) { left: 29%; }
.article_visual--fire i:nth-of-type(2) { right: 31%; height: 72px; }
.article_visual--fire strong { position: absolute; right: 18px; top: 20px; color: #ffac72; }
.article_visual--dashboard { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 22px; }
.article_visual--dashboard b { grid-column: span 2; display: grid; place-items: center; background: rgba(246,244,243,.1); border-radius: 12px; font: 700 2.4rem var(--font-display); }
.article_visual--dashboard i { align-self: end; background: #dd852e; border-radius: 7px 7px 0 0; height: 55%; }
.article_visual--dashboard i:nth-of-type(2) { height: 82%; }
.article_visual--dashboard i:nth-of-type(3) { height: 40%; }
.article_visual--dashboard span { position: absolute; right: 25px; top: 32px; font-size: .68rem; color: #cbd6c8; }
.article_visual--proximity .machine { position: absolute; width: 130px; height: 65px; left: 21%; top: 39%; border-radius: 10px; background: #d88427; }
.article_visual--proximity .person { position: absolute; width: 18px; height: 38px; right: 24%; top: 42%; border-radius: 999px; background: var(--cream); }
.article_visual--proximity i { position: absolute; inset: 50%; border: 1px solid rgba(255,190,91,.5); border-radius: 50%; transform: translate(-38%,-50%); }
.article_visual--proximity i:nth-of-type(1) { width: 120px; height: 120px; }
.article_visual--proximity i:nth-of-type(2) { width: 190px; height: 190px; }
.article_visual--proximity i:nth-of-type(3) { width: 260px; height: 260px; }
.article_visual--methane { display: grid; place-items: center; }
.article_visual--methane b { position: relative; z-index: 2; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #d88427; font: 700 1.8rem var(--font-display); }
.article_visual--methane i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #96aa91; box-shadow: 0 0 0 8px rgba(150,170,145,.15); }
.article_visual--methane i:nth-of-type(1) { left: 18%; top: 24%; }
.article_visual--methane i:nth-of-type(2) { right: 17%; top: 35%; }
.article_visual--methane i:nth-of-type(3) { left: 31%; bottom: 17%; }
.article_visual--methane span { position: absolute; bottom: 20px; font-size: .65rem; letter-spacing: .12em; }

@media (max-width: 800px) {
  .blog_article summary { grid-template-columns: 40px minmax(0,1fr) 36px; gap: 12px; padding: 17px; }
  .article_number { width: 38px; height: 38px; }
  .article_content { grid-template-columns: 1fr; padding: 4px 17px 24px; }
  .article_visual { position: relative; top: auto; min-height: 210px; }
}
@media (max-width: 520px) {
  .blog_article summary { grid-template-columns: 1fr 34px; }
  .article_number { display: none; }
  .blog_article summary p { font-size: .86rem; }
}

/* ---------------- Interactive autumn leaf field ---------------- */
@property --repel-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --repel-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.autumn_leaf {
  --repel-x: 0px;
  --repel-y: 0px;
  --leaf-sway: 6vw;
  --leaf-tilt: 0deg;
  --leaf-depth: .85;
  height: calc(var(--leaf-size) * .58);
  border-radius: 100% 8% 100% 8%;
  background: linear-gradient(145deg, #eea044, #ad5419 72%);
  box-shadow: inset -2px -1px 0 rgba(82,37,0,.28), 0 5px 9px rgba(0,31,20,.12);
  opacity: 0;
  filter: saturate(1.05);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  animation-name: leafFallInteractive;
  animation-timing-function: linear;
}
.autumn_leaf::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 14%;
  top: 48%;
  height: 1px;
  background: rgba(84,39,4,.46);
  transform: rotate(-8deg);
  transform-origin: left center;
}
.autumn_leaf--round { height: calc(var(--leaf-size) * .72); border-radius: 85% 15% 78% 22%; }
.autumn_leaf:nth-child(3n) { background: linear-gradient(145deg, #cf7626, #793b12); }
.autumn_leaf:nth-child(4n) { background: linear-gradient(145deg, #9e9c4c, #5f6c37); }
.autumn_leaf:nth-child(5n) { background: linear-gradient(145deg, #f2ae55, #be641f); }
.autumn_leaf:nth-child(7n) { background: linear-gradient(145deg, #8b5429, #5a321d); }
@keyframes leafFallInteractive {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--wind-x) + var(--repel-x)), calc(-9vh + var(--wind-y) + var(--repel-y)), 0) rotate(var(--leaf-tilt)) rotateY(0deg) scale(var(--leaf-depth));
  }
  8% { opacity: .86; }
  24% {
    transform: translate3d(calc(var(--wind-x) + var(--repel-x) + var(--leaf-sway)), calc(22vh + var(--wind-y) + var(--repel-y)), 0) rotate(calc(var(--leaf-tilt) + 145deg)) rotateY(135deg) scale(var(--leaf-depth));
  }
  48% {
    transform: translate3d(calc(var(--wind-x) + var(--repel-x) - var(--leaf-sway)), calc(49vh + var(--wind-y) + var(--repel-y)), 0) rotate(calc(var(--leaf-tilt) + 305deg)) rotateY(275deg) scale(var(--leaf-depth));
  }
  72% {
    transform: translate3d(calc(var(--wind-x) + var(--repel-x) + var(--leaf-sway)), calc(76vh + var(--wind-y) + var(--repel-y)), 0) rotate(calc(var(--leaf-tilt) + 485deg)) rotateY(410deg) scale(var(--leaf-depth));
  }
  92% { opacity: .68; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--wind-x) + var(--repel-x) - var(--leaf-sway)), calc(112vh + var(--wind-y) + var(--repel-y)), 0) rotate(calc(var(--leaf-tilt) + 690deg)) rotateY(560deg) scale(var(--leaf-depth));
  }
}

@media (max-width: 700px) {
  .autumn_leaf { --leaf-sway: 8vw; }
}

/* ---------------- Complete local account experience ---------------- */
.auth_card { width: min(92vw, 590px); }
.auth_tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 20px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(136,153,130,.16);
}
.auth_tab {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: transparent;
  color: var(--forest);
  font-weight: 800;
  cursor: pointer;
}
.auth_tab.is-active { background: var(--cream); color: var(--dark); box-shadow: 0 5px 15px rgba(0,31,20,.08); }
.auth_view { animation: authViewIn .35s cubic-bezier(.22,1,.36,1) both; }
.auth_view[hidden], .auth_tabs[hidden] { display: none; }
@keyframes authViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth_view h2 { margin: 12px 0 7px; font: 650 1.55rem var(--font-display); }
.auth_view_intro { margin-bottom: 16px; line-height: 1.55; opacity: .7; }
.auth_field_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth_field_grid > div { display: grid; gap: 8px; min-width: 0; }
.auth_options { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 9px 0 0; }
.auth_check {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.auth_check input { width: 17px !important; height: 17px; flex: 0 0 17px; margin-top: 1px; padding: 0 !important; accent-color: var(--dark); }
.auth_check--terms { margin-top: 12px !important; line-height: 1.45; }
.auth_text_button { border: 0; padding: 3px 0; background: transparent; color: var(--orange); font-weight: 800; cursor: pointer; }
.auth_text_button:hover { color: var(--dark); text-decoration: underline; }
.auth_text_button--back { margin-bottom: 4px; }
.password_strength { height: 5px; margin-top: 2px; overflow: hidden; border-radius: 999px; background: rgba(0,51,0,.1); }
.password_strength span { display: block; width: 0; height: 100%; border-radius: inherit; background: #b6422d; transition: width .3s ease, background .3s ease; }
.password_strength span[data-score="2"] { background: #d98427; }
.password_strength span[data-score="3"] { background: #8b9b44; }
.password_strength span[data-score="4"] { background: #278352; }
.password_hint { color: var(--forest); font-size: .73rem; opacity: .68; }
.auth_success { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(39,131,82,.11); color: #17643b; font-size: .86rem; font-weight: 800; }

@media (max-width: 600px) {
  .auth_shell { align-items: start; padding-top: 92px; }
  .auth_card { padding: 24px 19px; border-radius: 19px; }
  .auth_field_grid { grid-template-columns: 1fr; gap: 0; }
  .auth_options { align-items: flex-start; }
}

/* ============================================================
   Global toolbar: time, search, settings, and authenticated user
   ============================================================ */
.nav_wrapper > .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.site_tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.site_tools > :is(.site_clock,#siteThemeToggle,#siteLanguageOpen,#siteSearchOpen,#siteNotificationOpen) { display: none !important; }
.site_tools--gate { position: absolute; z-index: 18; top: 24px; right: 28px; }
.site_clock {
  display: grid;
  justify-items: end;
  min-width: 154px;
  margin-right: 4px;
  color: var(--dark);
  font-size: .67rem;
  line-height: 1.15;
}
.site_clock span { opacity: .62; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.site_clock strong { margin-top: 3px; font-size: .78rem; }
.utility_btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(0,51,0,.32); border-radius: 50%;
  background: rgba(246,244,243,.78); color: var(--dark); cursor: pointer;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.utility_btn:hover { transform: translateY(-2px); color: var(--cream); background: var(--dark); }
.utility_btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site_tools .account_btn { flex: 0 0 auto; }
.site_tools .account_btn.account_btn--named {
  width: auto; min-width: 44px; padding: 0 15px 0 10px; display: flex; align-items: center; gap: 8px;
  border-radius: 999px;
}
.account_username {
  max-width: 120px; overflow: hidden; color: inherit; font-size: .72rem; font-weight: 900;
  letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap;
}
.site_tools .account_btn.account_btn--named::after { right: 7px; bottom: 3px; }

.utility_overlay {
  position: fixed; inset: 0; z-index: 900; padding: min(12vh,100px) 5vw;
  background: rgba(0,31,20,.58); backdrop-filter: blur(14px);
}
.utility_overlay[hidden], .settings_drawer[hidden], .account_panel[hidden], .notification_panel[hidden], .notification_badge[hidden], .language_panel[hidden] { display: none; }
.language_btn span { font-size: .66rem; font-weight: 950; letter-spacing: .04em; }
.language_panel {
  position: fixed; z-index: 927; top: 78px; right: 4vw; width: min(88vw,280px); padding: 13px;
  border: 1px solid rgba(0,51,0,.22); border-radius: 17px; background: var(--cream); color: var(--dark);
  box-shadow: 0 22px 55px rgba(0,31,20,.18); animation: accountPanelIn .24s cubic-bezier(.22,1,.36,1) both;
}
.language_panel > .utility_kicker { padding: 4px 7px 9px; }
.language_panel button { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; gap: 9px; align-items: center; padding: 10px 9px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.language_panel button:hover, .language_panel button.is-active { background: var(--sage-soft); }
.language_panel button b { color: var(--orange); font-size: .72rem; }
.language_panel button span { font-size: .82rem; font-weight: 800; }
.language_panel button i { opacity: 0; color: var(--dark); font-style: normal; font-weight: 950; }
.language_panel button.is-active i { opacity: 1; }
.notification_btn { position: relative; }
.notification_badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; display: grid; place-items: center;
  padding: 0 4px; border: 2px solid var(--cream); border-radius: 999px; background: var(--orange); color: #fff;
  font-size: .58rem; font-weight: 900; line-height: 1;
}
.notification_panel {
  position: fixed; z-index: 925; top: 78px; right: 4vw; width: min(92vw,410px); max-height: min(76vh,650px); overflow: auto;
  border: 1px solid rgba(0,51,0,.22); border-radius: 19px; background: var(--cream); color: var(--dark);
  box-shadow: 0 24px 65px rgba(0,31,20,.2); animation: accountPanelIn .25s cubic-bezier(.22,1,.36,1) both;
}
.notification_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 19px 19px 14px; border-bottom: 1px solid rgba(0,51,0,.12); }
.notification_head h2 { font: 650 1.35rem var(--font-display); }
.notification_head button, .notification_footer button { border: 0; background: transparent; color: var(--orange); font-size: .68rem; font-weight: 900; cursor: pointer; }
.notification_head button:disabled { opacity: .4; cursor: default; }
.notification_list { display: grid; padding: 7px; }
.notification_item { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 10px; padding: 13px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.notification_item:hover { background: var(--sage-soft); }
.notification_item.is-unread { background: rgba(136,153,130,.1); }
.notification_dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notification_item.is-unread .notification_dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(102,51,0,.1); }
.notification_copy { display: grid; gap: 3px; min-width: 0; }
.notification_copy small { color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.notification_copy strong { font: 600 .91rem var(--font-display); }
.notification_copy p { font-size: .76rem; line-height: 1.45; opacity: .65; }
.notification_copy time { margin-top: 2px; font-size: .65rem; font-weight: 800; opacity: .48; }
.notification_empty { display: grid; justify-items: center; gap: 5px; padding: 38px 18px; text-align: center; }
.notification_empty span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--dark); font-weight: 900; }
.notification_empty strong { margin-top: 5px; font: 600 1rem var(--font-display); }
.notification_empty p { font-size: .76rem; opacity: .58; }
.notification_footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 19px 15px; border-top: 1px solid rgba(0,51,0,.12); font-size: .68rem; font-weight: 800; opacity: .82; }
.search_dialog {
  width: min(92vw, 780px); max-height: min(78vh,760px); margin: 0 auto; overflow: hidden;
  border: 1px solid rgba(0,51,0,.22); border-radius: 22px; background: var(--cream); color: var(--dark);
  box-shadow: 0 30px 90px rgba(0,20,12,.28);
}
.search_dialog_head, .settings_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 16px; }
.search_dialog_head h2, .settings_head h2 { font: 650 clamp(1.45rem,3vw,2rem) var(--font-display); }
.utility_kicker { display: block; margin-bottom: 4px; color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.utility_close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--sage-soft); color: var(--dark); font-size: 1.55rem; cursor: pointer; }
.search_field { display: flex; align-items: center; gap: 12px; margin: 0 26px 17px; padding: 12px 15px; border: 1px solid rgba(0,51,0,.25); border-radius: 13px; background: var(--surface); }
.search_field:focus-within { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(136,153,130,.2); }
.search_field svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search_field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: 700 1rem var(--font-body); }
.search_field kbd { padding: 4px 7px; border: 1px solid rgba(0,51,0,.18); border-radius: 6px; font-size: .62rem; opacity: .55; }
.search_results { max-height: 52vh; overflow-y: auto; padding: 0 14px 17px; }
.search_result { display: grid; grid-template-columns: 82px minmax(0,1fr) 24px; gap: 12px; align-items: center; padding: 13px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.search_result:hover { background: var(--sage-soft); }
.search_result > span { color: var(--orange); font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.search_result div { display: grid; gap: 2px; min-width: 0; }
.search_result strong { font: 600 .98rem var(--font-display); }
.search_result small { overflow: hidden; opacity: .64; text-overflow: ellipsis; white-space: nowrap; }
.search_result b { font-size: 1.15rem; }
.search_empty { display: grid; justify-items: center; gap: 5px; padding: 45px; opacity: .62; }

.settings_drawer {
  position: fixed; z-index: 910; top: 0; right: 0; bottom: 0; width: min(92vw,430px); overflow-y: auto;
  border-left: 1px solid rgba(0,51,0,.22); background: var(--cream); color: var(--dark);
  box-shadow: -24px 0 70px rgba(0,31,20,.2); animation: settingsIn .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes settingsIn { from { transform: translateX(100%); } to { transform: none; } }
.settings_group { margin: 6px 26px 25px; }
.settings_group h3 { margin-bottom: 10px; font: 600 .98rem var(--font-display); }
.settings_quick_actions > div { display: grid; gap: 7px; }
.settings_quick_actions button {
  width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; gap: 11px; align-items: center;
  padding: 12px; border: 1px solid rgba(0,51,0,.16); border-radius: 12px; background: var(--surface); color: inherit;
  text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.settings_quick_actions button:hover { transform: translateY(-1px); border-color: rgba(0,51,0,.4); background: var(--sage-soft); }
.settings_quick_actions svg { width: 21px; height: 21px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.settings_quick_actions button > span { display: grid; gap: 2px; }
.settings_quick_actions strong { font: 600 .88rem var(--font-display); }
.settings_quick_actions small { opacity: .58; font-size: .68rem; }
.settings_quick_actions button > b { font-size: 1rem; }
.settings_quick_actions button > em { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 999px; background: var(--orange); color: #fff; font-size: .64rem; font-style: normal; font-weight: 900; }
.settings_quick_actions button > em.is-empty { background: var(--sage-soft); color: var(--dark); }
.segmented_control { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; padding: 4px; border-radius: 12px; background: var(--sage-soft); }
.segmented_control button { border: 0; border-radius: 9px; padding: 9px 6px; background: transparent; color: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.segmented_control button.is-active { background: var(--surface); box-shadow: 0 4px 12px rgba(0,31,20,.08); }
.settings_switches { display: grid; gap: 6px; }
.settings_switches label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; cursor: pointer; }
.settings_switches label > span { display: grid; gap: 3px; }
.settings_switches small { opacity: .58; line-height: 1.35; }
.settings_switches input { position: absolute; opacity: 0; pointer-events: none; }
.settings_switches i { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: rgba(0,51,0,.18); transition: background .25s ease; }
.settings_switches i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 7px rgba(0,31,20,.18); transition: transform .25s ease; }
.settings_switches input:checked + i { background: var(--dark); }
.settings_switches input:checked + i::after { transform: translateX(18px); }
.settings_reset { width: calc(100% - 52px); margin: 0 26px; padding: 11px; border: 1px solid rgba(0,51,0,.24); border-radius: 999px; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.settings_note { margin: 14px 26px 28px; text-align: center; font-size: .72rem; opacity: .52; }

.account_panel {
  position: fixed; z-index: 920; top: 78px; right: 4vw; width: min(88vw,310px); padding: 16px;
  border: 1px solid rgba(0,51,0,.22); border-radius: 17px; background: var(--cream); color: var(--dark);
  box-shadow: 0 22px 55px rgba(0,31,20,.18); animation: accountPanelIn .25s cubic-bezier(.22,1,.36,1) both;
}
@keyframes accountPanelIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.account_panel_identity { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; }
.account_panel_identity > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50% 50% 50% 12px; background: var(--dark); color: var(--cream); font: 700 1.05rem var(--font-display); }
.account_panel_identity div { display: grid; gap: 1px; }
.account_panel_identity strong { font: 600 1rem var(--font-display); }
.account_panel_identity small { opacity: .57; }
.account_panel_email { padding: 10px 0 13px; border-top: 1px solid rgba(0,51,0,.12); font-size: .8rem; opacity: .7; }
.account_panel a, .account_panel button { width: 100%; display: flex; justify-content: space-between; border: 0; border-radius: 9px; padding: 10px; background: transparent; color: inherit; text-align: left; text-decoration: none; font-weight: 800; cursor: pointer; }
.account_panel a:hover, .account_panel button:hover { background: var(--sage-soft); }
.account_panel .account_panel_logout { color: #a33b2a; }

html[data-site-theme="dark"] body:not(.is-gate) {
  --cream: #0d1a12; --dark: #e7f0e8; --surface: #14251a; --sage-soft: #24372b;
  --sage: #8aa08e; --orange: #d8a06b; --yellow: #d78938;
  background: var(--cream); color: var(--dark);
}
html[data-site-theme="dark"] .body-scrolled .nav_wrapper:not(.on-dark),
html[data-site-theme="dark"] .nav_wrapper--auth { background: rgba(13,26,18,.9); }
html[data-site-theme="dark"] body.is-gate .gate_half--right { background: #0d1a12; color: #e7f0e8; }
html[data-site-theme="dark"] body.is-gate .gate_half--right :is(.gate_title,.gate_desc,.gate_icon) { color: #e7f0e8; }
html[data-site-theme="dark"] body.is-gate .gate_half--right .gate_cta { border-color: #e7f0e8; color: #e7f0e8; }
html[data-site-theme="dark"] body.is-gate .utility_btn,
html[data-site-theme="dark"] body.is-gate .account_btn { border-color: rgba(231,240,232,.38); background: rgba(13,26,18,.76); color: #e7f0e8; }
html[data-site-theme="dark"] body:not(.is-gate) :is(.profile_education_card,.timeline_item,.project_tab,.band_tab,.stage_card,.eng_card,.blog_article,.frame_panel,.dashboard_pick,.auth_card) { border-color: rgba(231,240,232,.2); }
html[data-site-theme="dark"] body:not(.is-gate) :is(
  .profile_card,.profile_education_card,.education_resume,.timeline_item,.academic_card,
  .project_tab,.band_tab,.stage_card,.intel_item,.kpi,.chart_panel,.table_panel,
  .eng_card,.blog_card,.blog_article,.dashboard_pick,.ai_detail_card,.decision_card,
  .shot_grid figure,.frame_panel,.auth_card
) {
  border-color: rgba(231,240,232,.22) !important;
  background: #14251a !important;
  color: #e7f0e8 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
html[data-site-theme="dark"] body:not(.is-gate) :is(.page_hero,.page_section--tinted,.project_overview_section,.project_navigation_section,.site_footer) {
  background: #101f16 !important;
  color: #e7f0e8;
}
html[data-site-theme="dark"] body:not(.is-gate) :is(p,li,dd,.page_lead,.gate_desc,.article_prose p,.article_prose li) { color: #bed0c2; }
html[data-site-theme="dark"] body:not(.is-gate) :is(small,dt,.hero_eyebrow,.eyebrow_txt,.section_eyebrow) { color: #a9bdad; }
html[data-site-theme="dark"] body:not(.is-gate) :is(h1,h2,h3,h4,strong,.profile_name,.page_title) { color: #edf5ee; }
html[data-site-theme="dark"] body:not(.is-gate) a:not(.cta_primary):not(.auth_submit) { text-decoration-color: rgba(216,160,107,.7); }
html[data-site-theme="dark"] body:not(.is-gate) :is(.profile_role,.resume_number) {
  background: #d78938;
  color: #07130c;
  border-color: rgba(237,245,238,.2);
}
html[data-site-theme="dark"] body:not(.is-gate) :is(.frame_panel_bar,.dashboard_pick.is-active) {
  background: #062817 !important;
  color: #edf5ee !important;
}
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_frame_label,
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_pick.is-active .dashboard_pick_icon {
  color: #0d1a12;
}
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_frame_label {
  color: #f0b35a;
}
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_actions .cta_ghost,
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_archive_head .cta_ghost {
  background: transparent;
  border-color: rgba(237,245,238,.72);
  color: #edf5ee;
}
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_actions .cta_ghost:hover,
html[data-site-theme="dark"] body:not(.is-gate) .dashboard_archive_head .cta_ghost:hover {
  background: #edf5ee;
  color: #0d1a12;
}
html[data-site-theme="dark"] body:not(.is-gate) .shot_grid figcaption {
  background: #0f1f15;
  color: #edf5ee;
  border-top-color: rgba(237,245,238,.22);
}
html[data-site-theme="dark"] body:not(.is-gate) :is(.auth_form input,.auth_field input,.search_field,.auth_field select,textarea) {
  border-color: rgba(231,240,232,.25); background: #0f1f15; color: #edf5ee;
}
html[data-site-theme="dark"] body:not(.is-gate) :is(input,textarea)::placeholder { color: rgba(231,240,232,.48); }
html[data-site-theme="dark"] body:not(.is-gate) .segmented_control button.is-active { background: #36503e; color: #fff; }
html[data-site-theme="dark"] body:not(.is-gate) .auth_error { color: #ff9b8d; }
html[data-site-theme="dark"] body:not(.is-gate) .auth_success { color: #9ce1b5; background: rgba(79,177,116,.16); }
html[data-site-theme="dark"] body:not(.is-gate) .body-scrolled .nav_wrapper:not(.on-dark) { border-bottom: 1px solid rgba(231,240,232,.12); }
html[data-site-theme="dark"] body.is-gate :is(.settings_drawer,.notification_panel,.search_dialog,.language_panel,.account_panel) {
  border-color: rgba(231,240,232,.22); background: #0d1a12; color: #e7f0e8;
}
html[data-site-theme="dark"] body.is-gate :is(.settings_quick_actions button,.search_field,.segmented_control,.segmented_control button.is-active,.notification_item.is-unread) {
  border-color: rgba(231,240,232,.2); background: #14251a; color: #e7f0e8;
}
html[data-site-theme="dark"] body.is-gate :is(.settings_switches small,.settings_note,.notification_copy p,.notification_copy time) { color: #b8cbbb; }
html[data-site-theme="dark"] body.is-gate .utility_close { background: #24372b; color: #e7f0e8; }
html[data-site-theme="dark"] body:not(.is-gate) .hero_eyebrow {
  background: #24372b;
  color: #d8a06b !important;
  border: 1px solid rgba(231,240,232,.22);
}
html[data-site-theme="dark"] body:not(.is-gate) :is(.utility_btn, .account_btn) {
  border-color: rgba(231,240,232,.38);
  background: #14251a;
  color: #e7f0e8;
}
html[data-site-theme="dark"] body:not(.is-gate) :is(.utility_btn, .account_btn):hover { background: #e7f0e8; color: #0d1a12; }
html[data-site-theme="dark"] body:not(.is-gate) .account_btn.account_btn--named .account_username { color: #e7f0e8; }
html[data-site-theme="dark"] body:not(.is-gate) .schema_strip {
  background: #101f16;
  color: #e7f0e8;
}
html[data-site-theme="dark"] body:not(.is-gate) .schema_strip strong { color: #edf5ee; }
.user-reduced-motion *, .user-reduced-motion *::before, .user-reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.leaves-disabled .autumn_leaf { display: none !important; }
.high-contrast { --line: rgba(0,51,0,.52); }
.high-contrast :focus-visible { outline-width: 4px; }
.high-contrast :is(.project_tab,.band_tab,.stage_card,.eng_card,.blog_article,.profile_education_card,.frame_panel) { border-width: 2px; }

@media (max-width: 800px) {
  .site_clock { min-width: 0; margin-right: 0; }
  .site_clock span { display: none; }
  .site_clock strong { font-size: .68rem; white-space: nowrap; }
  .site_tools { gap: 5px; }
  .utility_btn, .site_tools .account_btn { width: 38px; height: 38px; }
  .site_tools--gate { top: 14px; right: 14px; }
  .search_dialog_head, .settings_head { padding: 20px 18px 14px; }
  .search_field { margin: 0 18px 14px; }
  .search_result { grid-template-columns: 60px minmax(0,1fr) 18px; }
}
@media (max-width: 560px) {
  .site_clock { display: none; }
  .nav_wrapper { padding-left: 3vw; padding-right: 3vw; }
  .utility_btn, .site_tools .account_btn { width: 36px; height: 36px; }
  .site_tools { gap: 4px; }
  .utility_overlay { padding: 68px 3vw 20px; }
  .search_dialog { width: 94vw; border-radius: 17px; }
  .search_result { grid-template-columns: 1fr 18px; }
  .search_result > span { grid-column: 1; }
  .search_result div { grid-column: 1; }
  .search_result b { grid-column: 2; grid-row: 1 / span 2; }
  .account_panel { top: 64px; right: 3vw; }
  .notification_panel { top: 64px; right: 3vw; width: 94vw; max-height: calc(100vh - 78px); }
  .language_panel { top: 64px; right: 3vw; }
  .notification_head { padding: 16px 15px 12px; }
  .site_tools .account_btn.account_btn--named {
    width: 36px; min-width: 36px; padding: 0; justify-content: center; border-radius: 50%;
  }
  .site_tools .account_btn.account_btn--named .account_username { display: none; }
  .site_tools .account_btn.account_btn--named::after { right: -1px; bottom: 0; }
  .nav_wrapper > .logo { display: none; }
}
@media (max-width: 410px) {
  .utility_btn, .site_tools .account_btn { width: 32px; height: 32px; }
  .utility_btn svg, .account_btn svg { width: 17px; height: 17px; }
  .site_tools { gap: 3px; }
}

/* ---------------- Profile and education separation ---------------- */
.profile_education_stack { display: grid; gap: clamp(48px, 7vh, 76px); }
.profile_card--standalone {
  width: 100%;
  min-height: 0;
  grid-template-columns: 170px minmax(0,1fr);
  gap: clamp(22px,3vw,38px);
  padding: 26px;
  box-shadow: 0 14px 36px rgba(0,31,20,.08);
}
.profile_card--standalone .profile_photo { max-width: 170px; }
.profile_card--standalone .profile_details--mini { grid-template-columns: repeat(2,minmax(0,1fr)); }
.education_resume { width: 100%; }
.education_resume .resume_heading { margin-bottom: 22px; }
.education_resume .timeline_item {
  grid-template-columns: 145px minmax(0,1fr);
  gap: 18px;
  padding: 17px 20px;
  border-left: 3px solid var(--sage);
  border-radius: 0 12px 12px 0;
  background: rgba(136,153,130,.1);
}

@media (max-width: 720px) {
  .profile_card--standalone { grid-template-columns: 112px minmax(0,1fr); padding: 18px; gap: 16px; }
  .profile_card--standalone .profile_photo { max-width: 112px; }
  .profile_card--standalone .profile_details--mini { grid-template-columns: 1fr; }
  .education_resume .timeline_item { grid-template-columns: 1fr; gap: 6px; padding: 15px; }
}

/* ---------------- Balanced project overview composition ---------------- */
.project_overview_section { padding: clamp(34px,5.5vh,64px) 0; }
.project_overview_grid {
  width: min(92vw,1500px);
  display: grid;
  grid-template-columns: minmax(240px,.68fr) repeat(2,minmax(0,1fr));
  gap: clamp(14px,1.5vw,24px);
  align-items: stretch;
}
.project_overview_grid > .resume_heading {
  align-self: center;
  margin: 0;
  padding-right: clamp(10px,2vw,30px);
}
.project_overview_grid > .resume_heading h2 { max-width: none; }
.project_overview_grid > .band_grid { display: contents; }
.project_overview_grid .band_tab {
  min-height: 154px;
  justify-content: center;
  padding: clamp(21px,2.3vw,30px);
  border-radius: 17px;
}
.project_overview_grid .band_tab strong { max-width: 24ch; }
.project_navigation_section {
  padding: clamp(28px,3.5vh,42px) 0;
  border-bottom: 1px solid rgba(0,51,0,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(246,244,243,.92));
}
.project_navigation_section > .container { width: min(92vw,1500px); }
.project_navigation_section .project_selector { gap: clamp(8px,.8vw,13px); }
.project_navigation_section .project_tab {
  min-height: 112px;
  justify-content: flex-start;
  padding: 16px 15px;
}
.project_navigation_section .project_tab strong { min-height: 2.3em; display: flex; align-items: flex-start; }
.project_navigation_section .project_tab small { margin-top: auto; }

@media (min-width: 801px) and (max-width: 1100px) {
  .project_overview_grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project_overview_grid > .resume_heading { grid-column: 1 / -1; padding: 0 0 6px; }
}
@media (max-width: 800px) {
  .project_overview_grid { grid-template-columns: 1fr; }
  .project_overview_grid > .resume_heading { padding: 0 0 8px; }
  .project_overview_grid .band_tab { min-height: 130px; }
  .project_navigation_section { padding-bottom: 20px; }
}

/* Keep education and work experience visually connected. */
.profile_resume_section { padding-bottom: clamp(24px,3.5vh,38px); }
.experience_section { padding-top: clamp(24px,3.5vh,38px); }

@media (max-width: 700px) {
  .profile_resume_section { padding-bottom: 18px; }
  .experience_section { padding-top: 22px; }
}