/* ============================================================
   Yungu Pty Ltd - landing site (v29)
   "Pilbara editorial, cinematic and grounded"
   Brand: Variation 8 "Bold Regeneration". Poppins / Lora / Lato.
   Fonts self-hosted (assets/fonts) - no runtime CDN dependency.
   ============================================================ */
@font-face{font-family:"Poppins";src:url("fonts/poppins-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-800.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-500.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-600.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F4EEE1; --paper2:#EBE2D0; --cream:#FBF5E8;
  --ink:#241E17; --ink2:#4A4030;
  --olive:#3E3414; --olive2:#5A4C22;
  --ochre:#AE4B23; --ochre2:#C0603A;
  --sand:#D8AE76; --gold:#E7C489; --soft:#E7D8BD;
  --blue:#7C9392;
  --line:rgba(62,52,20,.16);
  --maxw:1280px; --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:"Lato",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ochre);color:#fff}

h1,h2,h3,h4{font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.02;color:var(--olive)}
.serif{font-family:"Lora",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:"Poppins";font-weight:700;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ochre)}
.eyebrow.on-dark{color:var(--sand)}
section{position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Poppins";font-weight:600;font-size:.9rem;
  letter-spacing:.01em;padding:.85rem 1.5rem;border-radius:100px;background:var(--ochre);color:#fff;
  border:1.5px solid var(--ochre);transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:var(--olive);border-color:var(--olive);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:#fff;color:var(--olive);border-color:#fff}
.btn.dark{background:var(--olive);border-color:var(--olive)}
.btn svg{width:17px;height:17px}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ochre),var(--sand));z-index:200}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);padding:1.1rem 0}
/* top scrim so the white logo + nav read over bright hero sky (fades out once solid) */
header::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,12,5,.6) 0%,rgba(18,12,5,.28) 45%,transparent 100%);transition:opacity .45s var(--ease)}
header.solid::before{opacity:0}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header .logo{height:34px;transition:opacity .4s var(--ease)}
header .logo.white{filter:drop-shadow(0 1px 7px rgba(0,0,0,.6))}
header nav a.nl{text-shadow:0 1px 8px rgba(0,0,0,.4)}
header.solid nav a.nl{text-shadow:none}
header .logo.olive{position:absolute;opacity:0}
header nav{display:flex;align-items:center;gap:2rem}
header nav a.nl{font-family:"Poppins";font-weight:600;font-size:.86rem;color:#fff;opacity:.9;transition:opacity .25s,color .25s;position:relative}
header nav a.nl::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--ochre);transition:width .3s var(--ease)}
header nav a.nl:hover{opacity:1}header nav a.nl:hover::after{width:100%}
header.solid{background:rgba(244,238,225,.92);backdrop-filter:saturate(1.1) blur(8px);box-shadow:0 1px 0 var(--line);padding:.7rem 0}
header.solid .logo.white{opacity:0}
header.solid .logo.olive{opacity:1}
header.solid nav a.nl{color:var(--olive)}
.brand{position:relative;display:flex;align-items:center}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:24px;height:2px;background:#fff;transition:.3s var(--ease)}
header.solid .burger span{background:var(--olive)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;color:#fff}
.hero .bg{position:absolute;inset:0;background:url('img/hero.jpg') center 42%/cover no-repeat;transform:scale(1.06);animation:kb 22s var(--ease) infinite alternate;will-change:transform}
@keyframes kb{to{transform:scale(1.14)}}
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,14,6,.55) 0%,rgba(20,14,6,.05) 26%,rgba(20,14,6,.12) 55%,rgba(20,14,6,.78) 100%),
  radial-gradient(120% 90% at 15% 100%,rgba(20,14,6,.6),transparent 60%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,120px);padding-top:140px;width:100%}
.hero .kicker{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.6rem}
.hero .kicker span{font-family:"Poppins";font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  position:relative;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .kicker span+span::before{content:"";position:absolute;left:-.85rem;top:50%;width:4px;height:4px;border-radius:50%;background:var(--ochre);transform:translateY(-50%)}
.hero h1{color:#fff;font-weight:800;font-size:clamp(3rem,9vw,7.4rem);line-height:.92;letter-spacing:-.02em;text-shadow:0 3px 40px rgba(0,0,0,.4)}
.hero h1 em{font-family:"Lora";font-style:italic;font-weight:600;color:var(--gold);letter-spacing:0}
.hero .sub{max-width:46ch;margin-top:1.6rem;font-size:1.12rem;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.scroll-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;font-family:"Poppins";font-weight:600;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.3);transform-origin:bottom}}

/* ---------- section rhythm ---------- */
.section{padding:clamp(70px,11vh,150px) 0}
.section .lead{font-family:"Lora";font-style:italic;font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.4;color:var(--olive2);max-width:24ch}
.head-h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;margin:.5rem 0 0}
.intro-max{max-width:60ch;margin-top:1.4rem;color:var(--ink2);font-size:1.06rem}

/* ---------- statement band ---------- */
.statement{background:var(--olive);color:var(--cream);overflow:hidden}
.statement .wrap{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(70px,10vh,120px);position:relative;z-index:2}
.statement q{quotes:none}
.statement p.big{font-family:"Lora";font-style:italic;font-weight:500;font-size:clamp(1.9rem,5.2vw,4rem);line-height:1.24;color:#fff;max-width:26ch}
.statement p.big b{color:var(--gold);font-weight:600}
.statement .river{margin-top:2.8rem;width:100%;opacity:.95}
.statement::after{content:"";position:absolute;right:-8%;top:-30%;width:60%;height:160%;
  background:radial-gradient(circle at center,rgba(174,75,35,.20),transparent 62%)}

/* ---------- about split ---------- */
.about-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,6vw,88px);align-items:stretch}
.about-grid>div:first-child{align-self:center}
.about-grid .fig{position:relative;display:flex}
.about-grid .fig img{width:100%;height:100%;min-height:440px;object-fit:cover;border-radius:var(--r);box-shadow:0 34px 80px rgba(36,24,8,.26)}
.about-grid .fig .tag{position:absolute;left:-14px;bottom:26px;background:var(--gold);color:var(--olive);
  font-family:"Poppins";font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:.7rem 1.1rem;border-radius:10px;box-shadow:0 16px 34px rgba(36,24,8,.25)}
.about-grid p{margin-top:1.1rem;color:var(--ink2)}
.about-grid .lead+p{margin-top:1.5rem}

/* ---------- pillars: editorial index ---------- */
.pillars{background:var(--paper2)}
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;
  padding:clamp(44px,7vh,90px) 0;border-top:1px solid var(--line)}
.pillar:first-of-type{border-top:0}
.pillar .fig{overflow:hidden;border-radius:var(--r);box-shadow:0 30px 70px rgba(36,24,8,.22)}
.pillar .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pillar:hover .fig img{transform:scale(1.05)}
.pillar .txt .num{font-family:"Poppins";font-weight:800;font-size:clamp(3.4rem,7vw,6rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--sand);letter-spacing:-.02em;display:block;margin-bottom:.4rem}
.pillar .txt h3{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;color:var(--olive)}
.pillar .txt .desc{margin-top:.9rem;color:var(--ink2);max-width:44ch}
.pillar .txt ul{list-style:none;margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.pillar .txt li{position:relative;padding-left:20px;font-size:.92rem;color:var(--olive2);font-weight:500}
.pillar .txt li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;border:2px solid var(--ochre)}
.pillar.flip .fig{order:1}
.pillar.flip .txt{order:2}

/* sectors strip */
.sectors{border-top:1px solid var(--line);margin-top:clamp(30px,5vh,60px);padding-top:clamp(30px,5vh,54px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.sectors .s h4{font-family:"Poppins";font-weight:700;font-size:1.02rem;color:var(--ochre)}
.sectors .s p{margin-top:.3rem;font-size:.86rem;color:var(--ink2);line-height:1.4}
.sectors .lbl{grid-column:1/-1;margin-bottom:-.4rem}

/* ---------- culture: immersive dark ---------- */
.culture{color:#fff;overflow:hidden;isolation:isolate}
.culture .bg{position:absolute;inset:0;background:url('img/culture.jpg') center 38%/cover no-repeat;z-index:-2;transform:scale(1.04)}
.culture .veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(24,18,8,.94) 0%,rgba(24,18,8,.78) 42%,rgba(24,18,8,.5) 100%),
  linear-gradient(0deg,rgba(24,18,8,.7),transparent 55%)}
.culture .wrap{padding-top:clamp(80px,12vh,150px);padding-bottom:clamp(80px,12vh,150px)}
.culture h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;margin:.5rem 0 0;max-width:16ch}
.culture .body{max-width:56ch;margin-top:1.4rem;color:rgba(255,255,255,.9)}
.culture .river{margin:2rem 0 .5rem;max-width:520px}
.culture .snote{display:inline-flex;flex-direction:column;gap:.4rem;margin-top:1.8rem;padding:1.3rem 1.5rem;
  border:1px solid rgba(216,174,118,.5);border-radius:var(--r);background:rgba(62,52,20,.4);max-width:52ch}
.culture .snote b{font-family:"Poppins";font-weight:700;color:var(--gold);font-size:1.08rem;display:flex;align-items:center;gap:.5rem}
.culture .snote span{font-size:.92rem;color:rgba(255,255,255,.85)}
.culture blockquote{font-family:"Lora";font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.42;
  color:#fff;margin-top:2rem;max-width:30ch;border-left:3px solid var(--ochre);padding-left:1.3rem}

/* ---------- stats band ---------- */
.stats{background:var(--gold)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,50px)}
.stats .stat b{font-family:"Poppins";font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:.9;color:var(--olive);display:block;letter-spacing:-.03em}
.stats .stat span{display:block;margin-top:.6rem;font-family:"Poppins";font-weight:600;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--olive2);line-height:1.4}
.stats .stat{border-left:2px solid rgba(62,52,20,.22);padding-left:1.3rem}

/* ---------- approach ---------- */
.approach .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(18px,3vw,40px);margin-top:2.6rem}
.approach .step{padding:1.3rem 0 1.5rem;border-top:1px solid var(--line)}
.approach .step .n{font-family:"Poppins";font-weight:800;font-size:1.7rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px var(--sand);letter-spacing:-.02em}
.approach .step p{margin-top:.55rem;font-size:.94rem;color:var(--olive);font-weight:600;line-height:1.3}
.approach .values{display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin-top:2.4rem;align-items:center}
.approach .values .v{font-family:"Poppins";font-weight:600;font-size:1rem;color:var(--olive);display:inline-flex;align-items:center;gap:.6rem}
.approach .values .v::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ochre)}
.approach .river{margin-top:2.6rem;max-width:100%;opacity:.9}

/* ---------- people ---------- */
.people{padding:0}
.people-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;isolation:isolate}
.people-hero .ph-bg{position:absolute;inset:0;z-index:-2;background:url('img/community.jpg') center 42%/cover no-repeat}
.people-hero .ph-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(20,14,6,.92) 0%,rgba(20,14,6,.3) 55%,rgba(20,14,6,.5) 100%)}
.people-hero .wrap{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(38px,6vh,64px)}
.people-hero h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;margin:.45rem 0 0;max-width:20ch}
.people-body{padding-top:clamp(48px,7vh,84px)}
.people .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:0}
.person{border-top:2px solid var(--olive)}
.person .ini{font-family:"Poppins";font-weight:800;font-size:1.5rem;color:var(--ochre);margin-top:1rem}
.person h3{font-size:1.4rem;font-weight:700;margin-top:.5rem;color:var(--olive)}
.person .role{font-family:"Poppins";font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);margin-top:.35rem}
.person p{margin-top:.9rem;font-size:.94rem;color:var(--ink2);line-height:1.55}

/* ---------- contact ---------- */
.contact{color:#fff;overflow:hidden;isolation:isolate}
.contact .bg{position:absolute;inset:0;z-index:-2;background:url('img/contact.jpg') center 30%/cover no-repeat}
.contact .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,15,7,.96) 0%,rgba(20,15,7,.7) 50%,rgba(20,15,7,.55) 100%)}
.contact .wrap{padding-top:clamp(80px,12vh,150px);padding-bottom:clamp(60px,8vh,110px)}
.contact h2{color:#fff;font-size:clamp(2.1rem,4.8vw,3.8rem);font-weight:800;max-width:16ch}
.contact .cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);margin-top:2.6rem;align-items:start}
.contact .row{display:flex;gap:1rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.16)}
.contact .row small{display:block;font-family:"Poppins";font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sand)}
.contact .row b{font-size:1.06rem;color:#fff;font-weight:700}
.contact .cbox{background:rgba(62,52,20,.5);border:1px solid rgba(216,174,118,.4);border-radius:var(--r);padding:1.8rem}
.contact .cbox h3{color:var(--gold);font-size:1.3rem}
.contact .cbox p{margin:.6rem 0 1.3rem;color:rgba(255,255,255,.85);font-size:.96rem}
.contact .dl{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:"Poppins";font-weight:600;font-size:.9rem;color:var(--sand)}
.contact .dl:hover{color:#fff}
.contact .ack{margin-top:3rem;font-family:"Lora";font-style:italic;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.8);max-width:70ch;
  border-top:1px solid rgba(255,255,255,.16);padding-top:1.6rem}

/* ---------- footer ---------- */
footer{background:#181207;color:rgba(255,255,255,.7)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:2rem;padding-bottom:2rem}
footer .logo{height:30px}
footer small{font-size:.8rem}

/* ---------- riverline svg ---------- */
.river svg{width:100%;height:auto;display:block;overflow:visible}
.river path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s var(--ease)}
.river.draw path{stroke-dashoffset:0}
.river circle{opacity:0;transition:opacity .5s var(--ease)}
.river.draw circle{opacity:1}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  header nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:1.6rem;background:var(--olive);padding:2rem;transform:translateX(100%);transition:transform .4s var(--ease)}
  header nav.open{transform:none}
  header nav a.nl{color:#fff;font-size:1.1rem}
  header.solid nav a.nl{color:#fff}
  .burger{display:flex}
  .about-grid{grid-template-columns:1fr}
  .about-grid .fig{order:-1}
  .pillar{grid-template-columns:1fr;gap:1.6rem}
  .pillar .fig,.pillar.flip .fig{order:-1}
  .pillar .txt,.pillar.flip .txt{order:0}
  .sectors{grid-template-columns:1fr 1fr}
  .stats .grid{grid-template-columns:1fr 1fr;gap:2rem}
  .approach .timeline{grid-template-columns:repeat(2,1fr)}
  .people .grid{grid-template-columns:1fr}
  .contact .cgrid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .sectors{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr}
  .approach .timeline{grid-template-columns:1fr}
  .pillar .txt ul{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .bg{animation:none}
  .river path{stroke-dashoffset:0;transition:none}
  .river circle{opacity:1}
  html{scroll-behavior:auto}
}