/* AWABIHARI Part 06 — Immersive Company Thesis */
.awb-thesis {
  --thesis-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(112px, 12vw, 180px) 0 clamp(120px, 13vw, 190px);
  background:
    radial-gradient(circle at 78% 18%, rgba(184,79,47,.20), transparent 27%),
    radial-gradient(circle at 18% 72%, rgba(22,55,47,.44), transparent 31%),
    linear-gradient(135deg, #070807 0%, #0b100d 58%, #17100d 100%);
  color: var(--hero-ivory);
}
.awb-thesis::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,164,106,.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,164,106,.048) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}
.awb-thesis::after {
  content: "THESIS";
  position: absolute;
  z-index: -1;
  right: -2vw;
  top: 4vw;
  color: rgba(243,238,229,.025);
  font: 800 clamp(130px, 22vw, 390px)/.8 var(--hero-ui);
  letter-spacing: -.08em;
  pointer-events: none;
}
.awb-thesis__shell { width: var(--hero-shell); margin-inline: auto; }
.awb-thesis__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
}
.awb-thesis__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hero-gold);
  font: 700 9px/1.2 var(--hero-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.awb-thesis__eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.awb-thesis__heading {
  margin: 22px 0 0;
  max-width: 11ch;
  font: 400 clamp(58px, 7.1vw, 122px)/.88 var(--hero-display);
  letter-spacing: -.06em;
  text-wrap: balance;
}
.awb-thesis__heading em { color: var(--hero-clay); font-weight: 400; }
.awb-thesis__lead {
  margin: 0;
  max-width: 53ch;
  color: rgba(243,238,229,.62);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
}
.awb-thesis__experience {
  margin-top: clamp(54px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(370px, .82fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}
.awb-thesis-stage {
  position: sticky;
  top: 132px;
  min-height: min(690px, calc(100svh - 160px));
  padding: clamp(28px, 3.2vw, 52px);
  border: 1px solid rgba(243,238,229,.13);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 78% 22%, rgba(184,79,47,.28), transparent 30%),
    radial-gradient(circle at 28% 86%, rgba(22,55,47,.55), transparent 37%),
    linear-gradient(145deg, rgba(16,18,16,.94), rgba(7,8,7,.74));
  box-shadow: 0 38px 110px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}
.awb-thesis-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.awb-thesis-stage__top,
.awb-thesis-stage__body,
.awb-thesis-stage__foot { position: relative; z-index: 3; }
.awb-thesis-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.awb-thesis-stage__counter,
.awb-thesis-stage__mode {
  color: rgba(243,238,229,.48);
  font: 700 9px/1.2 var(--hero-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.awb-thesis-stage__counter b { color: var(--hero-gold); font-weight: 700; }
.awb-thesis-stage__mode { display: inline-flex; align-items: center; gap: 8px; }
.awb-thesis-stage__mode::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hero-clay); box-shadow: 0 0 0 6px rgba(184,79,47,.10); }
.awb-thesis-stage__body { max-width: 710px; padding: clamp(40px, 7vh, 90px) 0 34px; }
.awb-thesis-stage__title {
  margin: 0;
  max-width: 10.5ch;
  font: 400 clamp(48px, 5.4vw, 90px)/.92 var(--hero-display);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.awb-thesis-stage__copy {
  margin: 26px 0 0;
  max-width: 48ch;
  color: rgba(243,238,229,.61);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.72;
}
.awb-thesis-stage__principle {
  display: inline-flex;
  margin-top: 30px;
  padding: 10px 14px;
  border: 1px solid rgba(200,164,106,.22);
  border-radius: 999px;
  color: var(--hero-gold);
  background: rgba(200,164,106,.05);
  font: 700 8px/1 var(--hero-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.awb-thesis-stage__visual {
  position: absolute;
  z-index: 1;
  width: min(44vw, 520px);
  aspect-ratio: 1;
  right: clamp(-180px, -8vw, -80px);
  top: 50%;
  transform: translateY(-48%) rotate(calc(var(--thesis-progress) * 18deg));
  border: 1px solid rgba(200,164,106,.26);
  border-radius: 50%;
  transition: transform 900ms var(--hero-ease);
}
.awb-thesis-stage__visual::before,
.awb-thesis-stage__visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(200,164,106,.17);
  border-radius: 50%;
}
.awb-thesis-stage__visual::before { inset: 13%; }
.awb-thesis-stage__visual::after { inset: 28%; border-color: rgba(184,79,47,.27); }
.awb-thesis-stage__axis { position: absolute; inset: 50% -15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,164,106,.2), transparent); transform: rotate(-18deg); }
.awb-thesis-stage__blocks { position: absolute; inset: 29%; transform: rotate(-18deg); }
.awb-thesis-stage__blocks i {
  position: absolute;
  display: block;
  border: 1px solid rgba(243,238,229,.24);
  background: linear-gradient(145deg, rgba(243,238,229,.18), rgba(184,79,47,.08));
  box-shadow: 12px 18px 42px rgba(0,0,0,.25);
  transition: transform 650ms var(--hero-ease), background 650ms ease;
}
.awb-thesis-stage__blocks i:nth-child(1){left:3%;top:12%;width:28%;height:22%}
.awb-thesis-stage__blocks i:nth-child(2){left:38%;top:2%;width:19%;height:34%}
.awb-thesis-stage__blocks i:nth-child(3){left:66%;top:18%;width:29%;height:19%}
.awb-thesis-stage__blocks i:nth-child(4){left:14%;top:55%;width:23%;height:29%}
.awb-thesis-stage__blocks i:nth-child(5){left:47%;top:48%;width:39%;height:31%;background:linear-gradient(145deg,rgba(184,79,47,.52),rgba(125,47,32,.16))}
.awb-thesis[data-active-chapter="1"] .awb-thesis-stage__blocks i:nth-child(2),
.awb-thesis[data-active-chapter="2"] .awb-thesis-stage__blocks i:nth-child(3),
.awb-thesis[data-active-chapter="3"] .awb-thesis-stage__blocks i:nth-child(4),
.awb-thesis[data-active-chapter="4"] .awb-thesis-stage__blocks i:nth-child(5) { transform: translateY(-18px); background: linear-gradient(145deg, rgba(200,164,106,.62), rgba(184,79,47,.18)); }
.awb-thesis-stage__foot { display: grid; gap: 18px; }
.awb-thesis-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.awb-thesis-progress button {
  position: relative;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(243,238,229,.34);
  cursor: pointer;
  font: 700 8px/1 var(--hero-mono);
}
.awb-thesis-progress button::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(243,238,229,.18); }
.awb-thesis-progress button::after { content: ""; position: absolute; left: 0; top: 4px; width: 0; height: 1px; background: var(--hero-clay); box-shadow: 0 0 12px rgba(184,79,47,.55); transition: width 420ms var(--hero-ease); }
.awb-thesis-progress button.is-active { color: var(--hero-gold); }
.awb-thesis-progress button.is-active::after { width: 100%; }
.awb-thesis-stage__disclosure { color: rgba(243,238,229,.38); font: 650 8px/1.55 var(--hero-mono); letter-spacing: .07em; text-transform: uppercase; }
.awb-thesis__chapters { display: grid; gap: 14px; }
.awb-thesis-card {
  position: relative;
  width: 100%;
  min-height: 196px;
  padding: 28px 28px 26px;
  overflow: hidden;
  border: 1px solid rgba(243,238,229,.12);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 18px;
  align-items: start;
  text-align: left;
  color: var(--hero-ivory);
  background: linear-gradient(145deg, rgba(243,238,229,.045), rgba(16,18,16,.58));
  cursor: pointer;
  transition: transform 380ms var(--hero-ease), border-color 380ms ease, background 380ms ease, box-shadow 380ms ease;
}
.awb-thesis-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 86% 18%, rgba(184,79,47,.20), transparent 32%);
  transition: opacity 380ms ease;
  pointer-events: none;
}
.awb-thesis-card:hover,
.awb-thesis-card:focus-visible { transform: translateX(-9px); border-color: rgba(200,164,106,.34); outline: none; }
.awb-thesis-card:focus-visible { box-shadow: 0 0 0 3px rgba(200,164,106,.16); }
.awb-thesis-card.is-active {
  transform: translateX(-15px);
  border-color: rgba(200,164,106,.42);
  background: linear-gradient(145deg, rgba(22,55,47,.74), rgba(16,18,16,.76));
  box-shadow: 0 24px 65px rgba(0,0,0,.20);
}
.awb-thesis-card.is-active::after { opacity: 1; }
.awb-thesis-card__num { position: relative; z-index: 2; padding-top: 4px; color: var(--hero-gold); font: 700 10px/1 var(--hero-mono); letter-spacing: .1em; }
.awb-thesis-card__body { position: relative; z-index: 2; }
.awb-thesis-card h3 { margin: 0; font: 400 clamp(27px, 2.4vw, 40px)/1 var(--hero-display); letter-spacing: -.035em; }
.awb-thesis-card p { margin: 14px 0 0; max-width: 48ch; color: rgba(243,238,229,.57); font: 400 14px/1.62 var(--hero-ui); }
.awb-thesis-card__principle { display: inline-flex; margin-top: 20px; color: rgba(243,238,229,.38); font: 700 8px/1 var(--hero-mono); letter-spacing: .11em; text-transform: uppercase; }
.awb-thesis-card__arrow { position: relative; z-index: 2; width: 34px; height: 34px; border: 1px solid rgba(243,238,229,.13); border-radius: 50%; display: grid; place-items: center; color: rgba(243,238,229,.5); transition: transform 380ms var(--hero-ease), color 380ms ease, border-color 380ms ease; }
.awb-thesis-card.is-active .awb-thesis-card__arrow { transform: rotate(45deg); color: var(--hero-gold); border-color: rgba(200,164,106,.34); }
.awb-thesis__closing {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 26px;
  border-top: 1px solid rgba(243,238,229,.13);
  display: flex;
  justify-content: space-between;
  gap: 28px;
  color: rgba(243,238,229,.42);
  font: 650 9px/1.55 var(--hero-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.awb-thesis__closing strong { color: var(--hero-gold); font-weight: 700; }

@media (max-width: 1099px) {
  .awb-thesis__intro { grid-template-columns: 1fr; }
  .awb-thesis__lead { max-width: 65ch; }
  .awb-thesis__experience { grid-template-columns: 1fr; }
  .awb-thesis-stage { position: relative; top: auto; min-height: 620px; }
  .awb-thesis__chapters { grid-template-columns: 1fr 1fr; }
  .awb-thesis-card:last-child { grid-column: 1 / -1; }
  .awb-thesis-card:hover, .awb-thesis-card:focus-visible, .awb-thesis-card.is-active { transform: none; }
}

@media (max-width: 720px) {
  .awb-thesis { padding: 94px 0 108px; }
  .awb-thesis::after { top: 40px; font-size: 34vw; }
  .awb-thesis__heading { font-size: clamp(52px, 15vw, 76px); max-width: 10ch; }
  .awb-thesis__lead { font-size: 15px; }
  .awb-thesis__experience { margin-top: 44px; }
  .awb-thesis-stage { min-height: 535px; padding: 24px 20px; border-radius: 26px; }
  .awb-thesis-stage__body { padding: 50px 0 30px; }
  .awb-thesis-stage__title { font-size: clamp(44px, 13vw, 64px); max-width: 9.5ch; }
  .awb-thesis-stage__copy { margin-top: 20px; font-size: 14px; }
  .awb-thesis-stage__visual { width: 410px; right: -235px; top: 53%; opacity: .62; }
  .awb-thesis-stage__mode { display: none; }
  .awb-thesis-progress { gap: 4px; }
  .awb-thesis-progress button { font-size: 7px; }
  .awb-thesis__chapters { grid-template-columns: 1fr; }
  .awb-thesis-card, .awb-thesis-card:last-child { grid-column: auto; min-height: 0; padding: 23px 20px; grid-template-columns: 34px 1fr auto; gap: 12px; border-radius: 20px; }
  .awb-thesis-card h3 { font-size: 30px; }
  .awb-thesis-card p { font-size: 13px; }
  .awb-thesis-card__arrow { width: 30px; height: 30px; }
  .awb-thesis__closing { display: grid; gap: 12px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .awb-thesis-stage__visual,
  .awb-thesis-stage__blocks i,
  .awb-thesis-card,
  .awb-thesis-card__arrow,
  .awb-thesis-progress button::after { transition: none !important; transform: none !important; }
}