/* ========================================================================== 
   SUNARROW V15 — spiral-sun identity, financial literacy, project alignment
   ========================================================================== */

/* Brand mark: the custom SVG is the source of truth, not the old CSS sketch. */
.brand-mark,
.brand-mark.has-custom-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 17px rgba(213, 109, 36, .22));
}
html[data-theme="dark"] .brand-mark img {
  filter: drop-shadow(0 0 15px rgba(241, 132, 53, .30));
}
.brand-logo-fallback { display: none !important; }
.brand-copy { gap: 5px; }
.brand-copy strong { letter-spacing: .18em; }
.brand-copy small { color: var(--muted); font-size: 10px; letter-spacing: .16em; }

/* Hero machine: keep the result card and the caption in separate visual zones. */
.hero-machine { isolation: isolate; }
.signal-card { z-index: 11; }
.signal-card-b {
  right: 2.5%;
  bottom: 25%;
  width: min(235px, 38%);
}
.machine-caption {
  bottom: 2.2%;
  width: calc(100% - 116px);
  max-width: 690px;
  min-height: 72px;
  padding: 14px 26px 22px;
  z-index: 10;
}
.machine-caption::after { bottom: 9px; }

/* Project navigation: no native horizontal scrollbar on desktop and no clipped copy. */
.project-console { overflow: hidden; }
.project-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 244, 221, .12);
  background: rgba(4, 22, 13, .30);
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tab {
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 15px 17px;
  align-items: flex-start;
  gap: 10px;
  border-right: 1px solid rgba(255, 244, 221, .10);
  border-bottom: 1px solid rgba(255, 244, 221, .08);
  overflow: hidden;
}
.project-tab:nth-child(4n) { border-right: 0; }
.project-tab > b { flex: 0 0 auto; padding-top: 2px; }
.project-tab span {
  min-width: 0;
  width: 100%;
  gap: 7px;
}
.project-tab strong {
  display: block;
  min-width: 0;
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
}
.project-tab small {
  display: block;
  color: rgba(255, 246, 228, .56);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .045em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.project-tab.active strong { color: #fff7e8; }
.project-tab.active small { color: rgba(255, 244, 221, .72); }

.project-view {
  grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr);
  min-height: 720px;
}
.project-copy {
  min-width: 0;
  padding: 44px 42px 36px;
  align-items: stretch;
}
.project-type,
.project-copy h3,
.project-description,
.project-facts,
.project-case-grid,
.project-links { width: 100%; min-width: 0; }
.project-copy h3 { margin-top: 22px; }
.project-description {
  color: rgba(255, 246, 228, .78) !important;
  font-size: 16px;
  line-height: 1.62;
}
.project-facts div {
  grid-template-columns: minmax(96px, 118px) minmax(0, 1fr);
  gap: 20px;
}
.project-facts dt { color: rgba(255, 246, 228, .52) !important; }
.project-facts dd {
  color: rgba(255, 246, 228, .84) !important;
  font-size: 14.5px;
  line-height: 1.58;
}
.project-case-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.project-case-grid article {
  min-height: 0;
  padding: 22px;
  border: 1px solid rgba(255, 244, 221, .11);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.project-case-grid small {
  color: var(--orange-soft) !important;
  font-size: 10px;
  letter-spacing: .10em;
}
.project-case-grid p {
  color: rgba(255, 246, 228, .80) !important;
  font-size: 14px;
  line-height: 1.62;
}
/* Eliminate the sideways text jump that looked like a layout shift. */
.project-console.project-shift .project-copy > * { animation: none !important; }

/* Financial literacy: a distinct, credible educational direction. */
.finance-education { padding-top: clamp(86px, 9vw, 142px); }
.finance-education-panel {
  position: relative;
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid color-mix(in srgb, var(--orange) 18%, var(--line));
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--sun-core) 28%, transparent), transparent 28%),
    radial-gradient(circle at 8% 96%, color-mix(in srgb, var(--green) 14%, transparent), transparent 35%),
    color-mix(in srgb, var(--panel) 88%, var(--bg));
  box-shadow: var(--cinematic-shadow);
}
.finance-education-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 63%, color-mix(in srgb, var(--orange) 7%, transparent) 64% 66%, transparent 67%),
    repeating-radial-gradient(circle at 91% 5%, transparent 0 46px, color-mix(in srgb, var(--orange) 10%, transparent) 47px 48px, transparent 49px 88px);
  opacity: .72;
}
.finance-education-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: end;
}
.finance-education-copy .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.finance-education-copy h2 {
  margin: 0;
  color: var(--cream);
  font: 720 clamp(40px, 5.2vw, 76px)/1.02 var(--display);
  letter-spacing: -.045em;
}
.finance-education-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}
.finance-topic-grid {
  position: relative;
  z-index: 2;
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.finance-topic {
  min-width: 0;
  min-height: 205px;
  padding: 25px 23px;
  border-right: 1px solid var(--line);
}
.finance-topic:last-child { border-right: 0; }
.finance-topic b {
  display: block;
  color: var(--orange-soft);
  font: 800 11px/1 var(--display);
  letter-spacing: .11em;
}
.finance-topic h3 {
  margin: 34px 0 12px;
  color: var(--cream);
  font: 710 23px/1.12 var(--display);
  letter-spacing: -.025em;
}
.finance-topic p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}
.finance-disclaimer {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border-radius: 18px;
  color: #fff5df;
  background: linear-gradient(125deg, #123724, #071d12);
  box-shadow: 0 20px 44px rgba(0,0,0,.16);
}
.finance-disclaimer-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 202, 128, .50);
  border-radius: 50%;
  color: #ffc078;
  font: 800 18px/1 var(--display);
}
.finance-disclaimer strong {
  display: block;
  color: #ffc078;
  font: 760 13px/1.2 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.finance-disclaimer p {
  margin: 8px 0 0;
  color: rgba(255, 246, 228, .83);
  font-size: 14px;
  line-height: 1.62;
}
.finance-disclaimer small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 246, 228, .58);
  font-size: 12px;
  line-height: 1.55;
}
.finance-sun {
  position: absolute;
  right: clamp(28px, 5vw, 84px);
  top: clamp(24px, 4vw, 62px);
  width: 105px;
  height: 105px;
  opacity: .22;
  pointer-events: none;
}
.finance-sun i { position: absolute; inset: 0; border: 1px solid var(--orange); border-radius: 50%; }
.finance-sun i:nth-child(2) { inset: 17px; }
.finance-sun i:nth-child(3) { inset: 35px; background: var(--orange); box-shadow: 0 0 36px var(--glow-orange); }

/* CV closes the page cleanly with only the PDF actions. */
.resume-download-actions { align-self: center; }
.resume-contact-link { display: none !important; }

/* The new section participates in browser rendering optimisation. */
.finance-education { content-visibility: auto; contain-intrinsic-size: 820px; }

@media (max-width: 1180px) {
  .signal-card-b { right: 1%; bottom: 24%; }
  .project-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-tab:nth-child(4n) { border-right: 1px solid rgba(255, 244, 221, .10); }
  .project-tab:nth-child(3n) { border-right: 0; }
  .project-view { grid-template-columns: 1fr 1fr; }
  .finance-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-topic:nth-child(2n) { border-right: 0; }
  .finance-topic:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .brand-mark,
  .brand-mark.has-custom-logo { width: 46px; height: 46px; flex-basis: 46px; }
  .hero-machine { min-height: 650px; }
  .signal-card-a { left: 1.5%; top: 15%; }
  .signal-card-b { right: 1.5%; bottom: 20%; width: min(215px, 42%); }
  .machine-caption { width: calc(100% - 72px); min-height: 76px; bottom: 2%; }
  .project-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-tab:nth-child(3n) { border-right: 1px solid rgba(255, 244, 221, .10); }
  .project-tab:nth-child(2n) { border-right: 0; }
  .project-view { grid-template-columns: 1fr; min-height: 0; }
  .project-copy { padding: 34px 28px 30px; }
  .finance-education-copy { grid-template-columns: 1fr; gap: 20px; }
  .finance-education-copy .eyebrow { grid-column: auto; }
  .finance-sun { width: 82px; height: 82px; opacity: .16; }
}

@media (max-width: 640px) {
  .brand-mark,
  .brand-mark.has-custom-logo { width: 40px; height: 40px; flex-basis: 40px; }
  .project-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 74vw);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .project-tab,
  .project-tab:nth-child(n) {
    min-height: 86px;
    border-right: 1px solid rgba(255, 244, 221, .10);
    border-bottom: 0;
    scroll-snap-align: start;
  }
  .project-copy { padding: 30px 22px 26px; }
  .project-copy h3 { font-size: 40px; }
  .project-facts div { grid-template-columns: 1fr; gap: 8px; }
  .project-case-grid { grid-template-columns: 1fr; }
  .finance-education-panel { padding: 30px 20px; border-radius: 22px; }
  .finance-education-copy h2 { font-size: 38px; }
  .finance-education-copy > p { font-size: 15.5px; }
  .finance-topic-grid { grid-template-columns: 1fr; }
  .finance-topic,
  .finance-topic:nth-child(n) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .finance-topic:last-child { border-bottom: 0; }
  .finance-topic h3 { margin-top: 20px; }
  .finance-disclaimer { grid-template-columns: 1fr; }
  .finance-disclaimer-mark { width: 36px; height: 36px; }
}

/* V16: project logos and trusted brands cleanup */
.project-tab span {
  display: grid;
  align-content: start;
}
.project-tab-logo {
  width: 100%;
  min-height: 44px;
  margin-bottom: 4px;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 221, .10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.project-tab-logo img {
  max-width: 100%;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.project-brandline {
  margin-bottom: 10px;
}
.project-brand-badge {
  min-height: 56px;
  padding: 10px 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 221, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  max-width: min(320px, 100%);
}
.project-brand-badge img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.project-tab-logo.mode-light,
.project-brand-badge.mode-light {
  background: #fffaf0;
}
.project-tab-logo.mode-dark,
.project-brand-badge.mode-dark {
  background: #0a1b11;
}
.project-tab-logo.mode-transparent,
.project-brand-badge.mode-transparent {
  background: transparent;
}
.project-tab-logo.mode-plate,
.project-brand-badge.mode-plate {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.trust-logo-visual img {
  max-height: 66px;
}
@media (max-width: 860px) {
  .project-tab-logo { min-height: 40px; padding: 7px 9px; }
  .project-tab-logo img { max-height: 23px; }
  .project-brand-badge { min-height: 52px; }
  .project-brand-badge img { max-height: 30px; }
}
@media (max-width: 640px) {
  .project-tab-logo { display: none; }
  .project-brandline { margin-bottom: 8px; }
}