/* ============================================================
   Kivara Group Ltd — components
   ============================================================ */

/* ---- Signature circular mark, built from the real logo's icon ---- */
.mark{display:block;}
.mark .ring-outer{transform-origin:center;animation:spin-slow 40s linear infinite;}
.mark .ring-inner{transform-origin:center;animation:spin-slow-rev 32s linear infinite;}
@keyframes spin-slow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spin-slow-rev{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@media (prefers-reduced-motion: reduce){
  .mark .ring-outer, .mark .ring-inner{animation:none;}
}

/* ---- Hero: crisp split — image contained to one side, text
   on a clean dark field, rather than a full-bleed wash. ---- */
.hero{
  background:var(--ink);color:var(--paper);
  overflow:hidden;position:relative;
}
.hero-inner{
  display:grid;grid-template-columns:1.05fr 1fr;
  min-height:min(84vh, 700px);
}
.hero-visual{
  position:relative;
  background-image:url('../images/hero-globe.jpg');
  background-size:cover;
  background-position:center;
}
.hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 55%, var(--ink) 100%);
}
.hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px);
}
.hero-kicker{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1.2em;}
.hero h1{font-size:clamp(2.1rem,4vw,3.4rem);color:var(--paper);}
.hero p.lede{font-size:1.1rem;color:var(--text-on-dark-soft);max-width:480px;margin-bottom:1.6em;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{min-height:280px;}
  .hero-visual::after{background:linear-gradient(0deg, var(--ink) 8%, transparent 65%);}
  .hero-text{padding-top:36px;}
}

/* ---- Interior page banner ---- */
.page-banner{
  position:relative;background:var(--ink);color:var(--paper);
  padding-block:70px 54px;overflow:hidden;
}
.page-banner .mark-bg{position:absolute;right:-40px;top:-60px;width:280px;height:280px;opacity:.1;}
.page-banner h1{color:var(--paper);font-size:clamp(2rem,4vw,3rem);margin:0;position:relative;z-index:1;}
.page-banner .eyebrow{position:relative;z-index:1;}
.breadcrumb{font-family:var(--font-mono);font-size:.76rem;color:var(--text-on-dark-soft);margin-top:10px;position:relative;z-index:1;}
.breadcrumb a{color:var(--teal);}

/* ---- Two-column feature block (About/Platform detail pages) ---- */
.feature-block{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.feature-block.reverse{direction:rtl;}
.feature-block.reverse > *{direction:ltr;}
.feature-block img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media (max-width:860px){
  .feature-block{grid-template-columns:1fr;}
  .feature-block.reverse{direction:ltr;}
}

/* ---- Leadership / bio card ---- */
.bio-card{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;}
.bio-photo{
  aspect-ratio:4/5;background:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.bio-photo .mark{width:56%;opacity:.5;}
.bio-photo .initials{
  font-family:var(--font-display);font-size:4rem;font-weight:700;
  color:var(--teal);opacity:.35;
}
.bio-name{font-size:1.5rem;margin-bottom:.2em;}
.bio-role{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-deep);margin-bottom:1.1em;}
@media (max-width:760px){.bio-card{grid-template-columns:1fr;}.bio-photo{max-width:240px;}}

/* ---- Numbered detail rows (Focus Areas detail page) ---- */
.detail-rows{display:grid;gap:0;border-top:1px solid var(--line);}
.detail-row{
  display:grid;grid-template-columns:80px 1fr;gap:28px;
  padding:40px 0;border-bottom:1px solid var(--line);
}
.detail-row .num{font-family:var(--font-display);font-size:1.6rem;color:var(--teal-deep);opacity:.6;}
.detail-row h3{font-size:1.3rem;margin-bottom:.5em;}
.detail-row p{color:var(--text-soft);max-width:640px;margin-bottom:1em;}
.detail-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.detail-row li{
  font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;
  padding:.5em 1em;border:1px solid var(--line);color:var(--text-soft);
}
@media (max-width:640px){.detail-row{grid-template-columns:1fr;}}

/* ---- Stat callout row ---- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat-block{background:var(--paper);padding:32px 28px;text-align:center;}
.stat-block .num{font-family:var(--font-display);font-size:2.2rem;color:var(--teal-deep);}
.stat-block .label{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-top:.4em;}
@media (max-width:640px){.stat-row{grid-template-columns:1fr;}}

/* ---- Fact strip ---- */
.facts-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-on-dark);
}
.fact{padding:28px 26px;border-right:1px solid var(--line-on-dark);}
.fact:last-child{border-right:none;}
.fact .k{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:.6em;}
.fact .v{font-family:var(--font-display);font-size:1.2rem;}
@media (max-width:800px){.facts-strip{grid-template-columns:1fr 1fr;}.fact{border-bottom:1px solid var(--line-on-dark);}}
@media (max-width:480px){.facts-strip{grid-template-columns:1fr;}}

/* ---- Focus area cards ---- */
.focus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.focus-card{
  background:var(--paper);padding:32px 28px;position:relative;
  transition:background .25s ease;
}
.focus-card:hover{background:var(--paper-2);}
.focus-card .quad{width:34px;height:34px;margin-bottom:20px;}
.focus-card h3{font-size:1.12rem;margin-bottom:.5em;}
.focus-card p{font-size:.92rem;color:var(--text-soft);margin-bottom:0;}

/* ---- Platform panel (JoinBeUs) ---- */
.platform-panel{
  background:var(--ink);color:var(--paper);
  border:1px solid var(--line-on-dark);
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.platform-copy{padding:clamp(32px,5vw,56px);}
.platform-copy h2{color:var(--paper);}
.platform-features{list-style:none;margin:1.4em 0 1.8em;padding:0;display:grid;gap:10px;}
.platform-features li{
  font-size:.92rem;color:var(--text-on-dark-soft);
  padding-left:1.5em;position:relative;
}
.platform-features li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border:1px solid var(--teal);border-radius:50%;
}
.platform-visual{
  position:relative;background:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  padding:40px;border-left:1px solid var(--line-on-dark);
}
.waveform{width:100%;max-width:320px;}
@media (max-width:860px){
  .platform-panel{grid-template-columns:1fr;}
  .platform-visual{border-left:none;border-top:1px solid var(--line-on-dark);}
}

/* ---- Pillars (corporate structure) ---- */
.pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:36px;margin-top:44px;
}
.pillar{border-top:2px solid var(--teal);padding-top:20px;}
.pillar h4{font-size:1.05rem;margin-bottom:.5em;}
.pillar p{font-size:.92rem;color:var(--text-soft);margin-bottom:0;}

/* ---- Vision ---- */
.vision-statement{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.3;
  max-width:820px;
}
.vision-words{
  display:flex;gap:0;flex-wrap:wrap;margin-top:56px;
  border-top:1px solid var(--line-on-dark);
}
.vision-word{
  flex:1 1 200px;padding:26px 8px 0;text-align:center;
  border-right:1px solid var(--line-on-dark);
}
.vision-word:last-child{border-right:none;}
.vision-word .mark-small{width:30px;height:30px;margin:0 auto 14px;opacity:.85;}
.vision-word .label{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--line);}
.contact-info{background:var(--ink);color:var(--paper);padding:clamp(32px,5vw,52px);position:relative;overflow:hidden;}
.contact-info .mark-bg{position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;opacity:.14;}
.contact-info h3{color:var(--paper);position:relative;z-index:1;}
.info-row{padding:16px 0;border-top:1px solid var(--line-on-dark);position:relative;z-index:1;}
.info-row:first-of-type{border-top:none;}
.info-row .k{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:.4em;}
.info-row .v{font-size:.95rem;}
.contact-form{padding:clamp(32px,5vw,52px);background:var(--paper-2);}
form.kv-form{display:grid;gap:18px;}
.field{display:grid;gap:8px;}
.field label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);}
.field input, .field textarea{
  font-family:var(--font-body);font-size:.98rem;
  padding:.85em 1em;border:1px solid var(--line);background:var(--paper);color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--teal-deep);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-status{font-family:var(--font-mono);font-size:.84rem;display:none;}
.form-status.show{display:block;}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}

/* ---- Footer ---- */
.site-footer{background:var(--ink);color:var(--text-on-dark-soft);padding-block:56px 30px;border-top:1px solid var(--line-on-dark);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-on-dark);}
.footer-grid h4{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);margin-bottom:1em;}
.footer-grid a{display:block;margin-bottom:.6em;font-size:.9rem;}
.footer-grid a:hover{color:var(--teal);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:.8rem;flex-wrap:wrap;gap:10px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}