/* ===========================================================
   styles-minimal.css
   i2C-Global — Site-wide Minimal Design System
   -----------------------------------------------------------
   Loads AFTER styles.css. Inherits color tokens, dark mode,
   fonts, reset, nav/footer/button structure from styles.css.
   Powers all seven pages: Home, About, Services, Projects,
   Countries, Careers, Contact.
   
   FONT SYSTEM:
   - Montserrat: UI text, labels, eyebrows, navigation, buttons
   - Playfair Display: Display text, all headings (h1-h6), hero titles
   - Monospace: Technical elements only (coordinates, data points)
   =========================================================== */

/* ─── TYPOGRAPHY FOUNDATION ─── */
body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All headings use Playfair Display */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* UI elements explicitly use Montserrat */
button, input, select, textarea, .btn, .nav-links, .footer {
  font-family: 'Montserrat', sans-serif;
}

/* ─── 7-ITEM NAV FIT (Home/About/Services/Projects/Countries/Careers/Contact) ─── */
.nav-links a { padding: .5rem .85rem; }
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-links a { padding: .5rem .65rem; font-size: .76rem; }
}

/* ─── TWO-TONE WORDMARK (used sparingly in running text, not the logo itself) ─── */
.brand-mark { font-weight: 700; }
.brand-mark .g { color: var(--accent); }

/* ─── RHYTHM TOKENS ─── */
:root {
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 7rem;
  --content-max: 1140px;
  --content-narrow: 760px;
  --ease-out-q: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-base: 480ms;
}

/* ─── REMOVE CINEMATIC-ONLY CHROME ─── */

/* No custom cursor on the redesigned pages */
body { cursor: auto !important; }
.c-cursor { display: none !important; }

/* No animated SVG logo draw-in — show the static mark instead */
/* The animated SVG wordmark (logo-draw / logo-fill, defined in styles.css)
   is restored here. minimal.js triggers the .logo-animated class on load
   in place of the old loader-driven trigger. */

/* Loader is not used on these pages at all (no #loader in the markup) */

/* ─── LAYOUT PRIMITIVES ─── */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 6%;
}
.wrap-narrow { max-width: var(--content-narrow); margin: 0 auto; }

.sec { padding: var(--space-8) 0; }
.sec-tight { padding: var(--space-6) 0; }
.sec-alt { background: var(--bg-alt); }
.sec-border-top { border-top: 1px solid var(--border); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: .6rem 1rem; border-radius: 8px; z-index: 10000;
  font-size: .85rem; font-weight: 700;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* ─── EYEBROW / HEADER (plain label, no numbering, no dot chains) ─── */
.head { max-width: 640px; margin-bottom: var(--space-5); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head-eyebrow {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
.head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700; line-height: 1.18; color: var(--text);
  letter-spacing: -.01em;
}
.head p {
  margin-top: .9rem; font-size: 1rem; color: var(--text-muted);
  line-height: 1.75; max-width: 56ch;
}
.head.center p { margin-left: auto; margin-right: auto; }

/* ─── HERO ─── */
.hero-min {
  padding: calc(var(--nav-h) + var(--space-7)) 0 var(--space-7);
}
.hero-min .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-eyebrow-min {
  display: inline-block;
  font-size: .72rem; 
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; 
  letter-spacing: .1em;
  text-transform: uppercase; 
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-3);
}
.hero-min h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight: 700; line-height: 1.1; color: var(--text);
  letter-spacing: -.02em;
}
.hero-min .lead {
  margin-top: var(--space-3);
  font-size: 1.08rem; line-height: 1.7; color: var(--text-muted);
  max-width: 46ch;
}
.hero-min .cta-row {
  display: flex; gap: 1rem; margin-top: var(--space-4); flex-wrap: wrap;
}
.hero-min .cta-row .btn-accent { padding: .85rem 1.7rem; }

.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3.1;
  box-shadow: var(--shadow);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-min--text-only .wrap { grid-template-columns: 1fr; max-width: 760px; }
.hero-min--text-only h1 { max-width: 18ch; }
.hero-min--text-only .lead { max-width: 56ch; }

/* ─── PAGE-LOAD ENTRANCE (CSS only — works even if JS never runs) ─── */
.enter-1, .enter-2, .enter-3, .enter-4 {
  animation: enterUp var(--dur-base) var(--ease-out-q) both;
}
.enter-1 { animation-delay: .02s; }
.enter-2 { animation-delay: .10s; }
.enter-3 { animation-delay: .18s; }
.enter-4 { animation-delay: .26s; }
@keyframes enterUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL REVEAL (safe default: visible unless JS adds .pre first) ─── */
[data-reveal] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out-q),
              transform var(--dur-base) var(--ease-out-q);
}
[data-reveal].pre { opacity: 0; transform: translateY(14px); }

/* ─── SPLIT (text + photo) ─── */
.split-min {
  display: grid; grid-template-columns: 1fr .9fr; gap: var(--space-6);
  align-items: center;
}
.split-min.flip { grid-template-columns: .9fr 1fr; }
.split-min.flip .split-min-media { order: -1; }
.split-min-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); display: block;
  margin-bottom: .9rem;
}
.split-min h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700;
  line-height: 1.2; color: var(--text); margin-bottom: 1.1rem;
  letter-spacing: -.01em;
}
.split-min p {
  font-size: .98rem; line-height: 1.8; color: var(--text-muted);
  margin-bottom: 1rem;
}
.split-min .link-min { margin-top: .5rem; }
.split-min-media {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/4.4; box-shadow: var(--shadow);
}
.split-min-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ─── INLINE TEXT LINK (replaces decorative buttons where a link will do) ─── */
.link-min {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 700; color: var(--accent);
  text-decoration: none; border-bottom: 1.5px solid transparent;
  transition: border-color .2s, gap .2s;
}
.link-min:hover { border-color: var(--accent); gap: .7rem; }
.link-min i { font-size: .85rem; transition: transform .2s; }
.link-min:hover i { transform: translateX(2px); }

/* ─── ROW LIST (services / projects — replaces the generic 3-card row) ─── */
.row-list { border-top: 1px solid var(--border); }
.row-list-item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: start; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.row-list-item .row-num {
  font-size: 1rem; color: var(--text-muted); font-weight: 700;
  margin-bottom: .6rem; display: block;
  letter-spacing: -0.01em;
}
.row-list-item h3 {
  font-size: 1.18rem; font-weight: 700; color: var(--text);
  margin-bottom: .55rem; letter-spacing: -.005em;
}
.row-list-item p {
  font-size: .94rem; color: var(--text-muted); line-height: 1.75;
  max-width: 58ch;
}
.row-list-item .row-list-meta {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; display:block;
}
.row-list-item .row-action { justify-self: end; align-self: center; white-space: nowrap; }

@media (max-width: 640px) {
  .row-list-item { grid-template-columns: 1fr; }
  .row-list-item .row-action { justify-self: start; }
}

/* ─── STAT ROW (reuses .stat-strip from styles.css) ─── */
/* Override sec-alt background to preserve orange accent on stat strips */
.stat-strip.sec-alt { background: var(--accent); }

/* ─── VALUE GRID (plain text, hairline divider — no icon cards) ─── */
.value-grid-min {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-5);
}
.value-grid-min .value-item {
  border-top: 2px solid var(--border); padding-top: var(--space-3);
}
.value-grid-min .value-item h4 {
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem;
}
.value-grid-min .value-item p {
  font-size: .9rem; color: var(--text-muted); line-height: 1.7;
}
@media (max-width: 880px) { .value-grid-min { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .value-grid-min { grid-template-columns: 1fr; } }

/* ─── MISSION / VISION (balanced, equal weight, no gradient drama) ─── */
.pillars-min {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.pillar-min {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-5);
}
.pillar-min .pillar-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; display: block;
}
.pillar-min h3 {
  font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: .8rem;
}
.pillar-min p { font-size: .95rem; color: var(--text-muted); line-height: 1.8; }
@media (max-width: 720px) { .pillars-min { grid-template-columns: 1fr; } }

/* ─── TIMELINE (plain vertical list — no pinned scroll-jacking) ─── */
.timeline-min { border-top: 1px solid var(--border); max-width: 760px; }
.timeline-row {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border);
}
.timeline-row .tl-year {
  font-weight: 700;
  font-size: 1.6rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.01em;
}
.timeline-row h4 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .45rem; }
.timeline-row p { font-size: .92rem; color: var(--text-muted); line-height: 1.7; max-width: 52ch; }
.timeline-row .tl-tag {
  display: inline-block; margin-top: .65rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 560px) {
  .timeline-row { grid-template-columns: 1fr; }
  .timeline-row .tl-year { font-size: 1.3rem; }
}

/* ─── TEAM (simplified card — no 3D tilt, no gradient hover overlay) ─── */
.team-grid-min {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.team-card-min {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg);
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.team-card-min:hover, .team-card-min:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); }
.team-card-min .tc-img { aspect-ratio: 3/3.6; overflow: hidden; }
.team-card-min .tc-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .4s var(--ease-out-q);
}
.team-card-min:hover .tc-img img { transform: scale(1.03); }
.team-card-min .tc-body { padding: 1.1rem 1.2rem 1.3rem; }
.team-card-min .tc-role {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .35rem;
}
.team-card-min .tc-name { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .55rem; }
.team-card-min .tc-link {
  font-size: .8rem; font-weight: 700; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .4rem;
}
.team-card-min:hover .tc-link { color: var(--accent); }

/* ─── TEAM MODAL (simplified visual treatment, same content depth) ─── */
.team-modal-min { position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(15,13,11,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.team-modal-min.open { opacity: 1; pointer-events: all; }
.team-modal-min .tm-box {
  background: var(--bg); border-radius: 20px; max-width: 640px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: var(--space-5);
  transform: translateY(16px); transition: transform .25s var(--ease-out-q);
}
.team-modal-min.open .tm-box { transform: none; }
.team-modal-min .tm-close {
  float: right; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: 1rem; line-height: 1;
}
.team-modal-min .tm-close:hover { border-color: var(--accent); color: var(--accent); }
.team-modal-min .tm-role {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-top: var(--space-3);
}
.team-modal-min h3 {
  font-size: 1.5rem; margin: .4rem 0 .8rem; color: var(--text);
  font-weight: 700; letter-spacing: -.01em;
}
.team-modal-min .tm-lead { color: var(--text-muted); line-height: 1.75; margin-bottom: 1.1rem; }
.team-modal-min .tm-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; }
.team-modal-min .tm-competencies { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.team-modal-min .tm-competencies div h5 { font-size: .85rem; font-weight: 700; margin-bottom: .3rem; color: var(--text); }
.team-modal-min .tm-competencies div p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 520px) { .team-modal-min .tm-competencies { grid-template-columns: 1fr; } }

/* ─── CTA BAND ─── */
.cta-band {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--space-7) 0; text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--text); margin-bottom: .9rem; letter-spacing: -.01em;
}
.cta-band p { color: var(--text-muted); margin-bottom: var(--space-4); max-width: 48ch; margin-left: auto; margin-right: auto; }

/* ─── SERVICE BLOCK (category + its sub-services, no boxed cards) ─── */
.service-block { padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.service-block:first-child { padding-top: 0; }
.service-block:last-child { border-bottom: none; }
.service-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.service-block-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.service-block-head span {
  font-size: .76rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}
.service-block > p.intro { color: var(--text-muted); max-width: 64ch; margin-bottom: 1.6rem; line-height: 1.75; }

.sub-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; }
.sub-list .sub-item { border-top: 2px solid var(--border); padding-top: .9rem; }
.sub-list .sub-item h4 { font-size: .96rem; font-weight: 700; color: var(--text); margin-bottom: .45rem; }
.sub-list .sub-item p { font-size: .87rem; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 640px) { .sub-list { grid-template-columns: 1fr; } }

/* ─── STEP LIST (a real ordered process — numbering is earned here) ─── */
.step-list { max-width: 760px; border-top: 1px solid var(--border); }
.step-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 1.2rem;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.step-num {
  font-weight: 700; font-size: 1.3rem; color: var(--accent);
  letter-spacing: -0.01em;
}
.step-row h4 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.step-row p { font-size: .9rem; color: var(--text-muted); line-height: 1.7; }

/* ─── INFO GRID (contact details — plain, no icon boxes) ─── */
.info-grid-min { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.info-grid-min .info-min { border-top: 2px solid var(--border); padding-top: .9rem; }
.info-grid-min .info-min i { color: var(--accent); font-size: 1.05rem; margin-bottom: .7rem; display: block; }
.info-grid-min .info-min .lab {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .4rem; display: block;
}
.info-grid-min .info-min .val { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.55; }
@media (max-width: 880px) { .info-grid-min { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .info-grid-min { grid-template-columns: 1fr; } }

/* ─── TAG LIST (countries, regions — plain text chips, no flags-as-data) ─── */
.tag-wrap { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-wrap .reach-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .85rem;
}
.tag-wrap .reach-chip img,
.pillar-label img,
.row-list-item h3 img,
.pillar-min h3 img,
.inline-flag {
  width: 18px; height: 13px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  display: inline-block; vertical-align: middle;
  flex-shrink: 0;
}
.inline-flag { margin-right: .4rem; }
.tag-wrap .reach-chip {
  min-height: 2.25rem;
}

/* ─── MAP + FORM (Contact) ─── */
.contact-grid-min { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 880px) { .contact-grid-min { grid-template-columns: 1fr; gap: var(--space-5); } }
.map-min { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); height: 380px; }
.map-min iframe { width: 100%; height: 100%; border: 0; }

.modal-link {
  color: var(--accent);
  text-decoration: underline;
}

.modal-link:hover {
  color: var(--accent-dark);
  text-decoration: none;
}

/* ─── DETAIL MODAL (shared visual system for team profiles + project case studies) ─── */
.detail-modal { position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(15,13,11,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.detail-modal.open { opacity: 1; pointer-events: all; }
.detail-modal .tm-box {
  background: var(--bg); border-radius: 20px; max-width: 640px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: var(--space-5);
  transform: translateY(16px); transition: transform .25s var(--ease-out-q);
}
.detail-modal.open .tm-box { transform: none; }
.detail-modal .tm-close {
  float: right; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: 1rem; line-height: 1;
}
.detail-modal .tm-close:hover { border-color: var(--accent); color: var(--accent); }
.detail-modal .tm-role {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-top: var(--space-3);
}
.detail-modal h3 {
  font-size: 1.5rem; margin: .4rem 0 .8rem; color: var(--text);
  font-weight: 700; letter-spacing: -.01em;
}
.detail-modal .tm-lead { color: var(--text-muted); line-height: 1.75; margin-bottom: 1.1rem; }
.detail-modal .tm-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; }
.detail-modal .tm-competencies { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.detail-modal .tm-competencies div h5 { font-size: .85rem; font-weight: 700; margin-bottom: .3rem; color: var(--text); }
.detail-modal .tm-competencies div p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.detail-modal .modal-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .8rem;
}
@media (max-width: 520px) { .detail-modal .tm-competencies { grid-template-columns: 1fr; } }

/* ─── HEADLINE REVEAL — crisp, blur-up word stagger (used on every hero h1) ─── */
[data-split-words] .w {
  display: inline-block;
  will-change: transform, filter, opacity;
  animation: wordIn 640ms var(--ease-out-q) both;
  filter: blur(6px);
}
@keyframes wordIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ─── HERO VISUAL — abstract, code-built composition (no stock photography) ───
   A quiet "data network" motif: two slow ambient color fields, a faint dot
   grid for texture, and a small orbit graphic that draws in once on load.
   Everything is brand-orange, low-contrast, and either one-time or very
   slow — nothing here competes for attention with the headline. */
.hero-visual {
  position: relative;
  aspect-ratio: 4/3.15;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  isolation: isolate;
}
.hero-visual::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--text-muted) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .06;
  z-index: 1;
}
.hero-blob {
  position: absolute; width: 60%; height: 60%; top: -10%; right: -10%;
  background: radial-gradient(circle, rgba(232,89,12,.32), transparent 70%);
  filter: blur(40px); border-radius: 50%; z-index: 1;
  animation: blobDrift 18s ease-in-out infinite;
}
.hero-blob.two {
  width: 46%; height: 46%; top: auto; right: auto; bottom: -12%; left: -8%;
  background: radial-gradient(circle, rgba(232,89,12,.18), transparent 70%);
  animation-duration: 22s; animation-delay: -4s;
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-4%, 5%) scale(1.08); }
}
.hero-orbit { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-orbit svg { width: 78%; height: 78%; overflow: visible; }
.hero-orbit .orbit-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.hero-orbit .orbit-line {
  fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 600; stroke-dashoffset: 600; opacity: .85;
  animation: orbitDraw 1.7s var(--ease-out-q) .55s both;
}
@keyframes orbitDraw { to { stroke-dashoffset: 0; } }
.hero-orbit .orbit-node { fill: var(--accent); animation: nodePulse 3.4s ease-in-out infinite; }
.hero-orbit .orbit-node.n2 { animation-delay: .5s; fill: var(--text); opacity: .65; }
.hero-orbit .orbit-node.n3 { animation-delay: 1s; }
.hero-orbit .orbit-node.n4 { animation-delay: 1.6s; fill: var(--text); opacity: .45; }
@keyframes nodePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.22); }
}
.hero-chip {
  position: absolute; bottom: var(--space-3); left: var(--space-3); z-index: 3;
  background: rgba(10,9,7,0.85); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: .7rem 1rem; display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  animation: enterUp var(--dur-base) var(--ease-out-q) .5s both;
}
.hero-chip i { color: var(--accent); font-size: 1rem; opacity: 0.9; }
.hero-chip strong { display: block; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,0.95); line-height: 1.2; }
.hero-chip span { display: block; font-size: .7rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.05em; }

/* Reduced-motion fallback for the wordmark draw-in (see minimal.js) — legacy rules removed, coin-spin handled in styles.css */

@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-orbit .orbit-node { animation: none !important; }
  .hero-orbit .orbit-line { animation: none !important; stroke-dashoffset: 0; }
  [data-split-words] .w { animation: none !important; filter: none; opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .hero-visual { aspect-ratio: 4/2.6; }
}
@media (max-width: 900px) {
  .hero-min .wrap { grid-template-columns: 1fr; }
  .hero-media, .hero-visual { order: -1; max-width: 480px; margin: 0 auto; }
  .split-min, .split-min.flip { grid-template-columns: 1fr; }
  .split-min-media, .split-min.flip .split-min-media { order: -1; max-width: 480px; }
}
@media (max-width: 768px) {
  .hero-min { padding: calc(var(--nav-h) + var(--space-5)) 0 var(--space-5); }
  .sec { padding: var(--space-6) 0; }
}

/* ===========================================================
   HOME HERO — cinematic styles live in home-hero.css
   Button styles used by the home hero CTA row:
   =========================================================== */
.btn-primary-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  transition: transform 0.2s var(--ease-out-q), background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary-premium:hover {
  background: var(--accent-dark);
  box-shadow: 0 8px 24px rgba(232, 89, 12, 0.25);
}

.btn-primary-premium:active { transform: scale(0.97); }

.btn-arrow { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out-q); }
.btn-primary-premium:hover .btn-arrow { transform: translateX(4px); }

.btn-outline-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  transition: transform 0.2s var(--ease-out-q), border-color 0.2s ease, background-color 0.2s ease;
}

.btn-outline-premium:hover {
  border-color: var(--accent);
  background: rgba(232, 89, 12, 0.12);
}

.btn-outline-premium:active { transform: scale(0.97); }

/* ===========================================================
   ABOUT PAGE CINEMATIC REDESIGN STYLES
   =========================================================== */
.about-header {
  height: 100vh;
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg);
  overflow: hidden;
  padding: 0 6%;
}

/* Subtle background grid for cinematic about hero */
.about-header .about-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.about-header::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 60%);
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.about-title {
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 700;
  line-height: 1.05;
  background: linear-gradient(135deg, var(--text) 30%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 2;
}

/* Section styling refinements */
.about-text-content {
  margin-top: var(--space-4);
  text-align: left;
}

.about-text-content p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.about-text-content p.lead-cinematic {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  line-height: 1.7;
  color: var(--text);
  font-weight: 500;
  margin-bottom: var(--space-4);
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
}

/* Pillars grid */
.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.about-pillar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease-out-q), box-shadow 0.3s ease;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pillar-label-mono {
  font-family: monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-3);
}

.about-pillar-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-3);
  color: var(--text);
  letter-spacing: -0.01em;
}

.about-pillar-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Collaboration List styling */
.about-collaboration-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.about-collaboration-list li {
  font-size: 0.98rem;
  color: var(--text);
  padding-left: 1.5rem;
  position: relative;
}

.about-collaboration-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 768px) {
  .about-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .about-pillar-card {
    padding: var(--space-4);
  }
  .about-text-content p.lead-cinematic {
    font-size: 1.15rem;
    padding-left: 1rem;
  }
}