@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;450;500;600;700;800&display=swap');
:root { --paper:#efeee8; --ink:#242b26; --green:#234a3b; --text:#616c60; --font:'Manrope',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid currentColor; outline-offset:7px; }
::selection { background:#b8cbaa; color:#242b26; }
.wrap { width:calc(100% - 112px); max-width:1440px; margin-inline:auto; }
.header { height:112px; display:flex; align-items:center; position:absolute; inset:0 0 auto; z-index:3; }
.brand { display:inline-flex; align-items:center; gap:14px; font-size:22px; font-weight:800; letter-spacing:-1px; }
.brand-mark { height:28px; width:29px; display:flex; align-items:flex-end; gap:3px; transform:skewY(-17deg); margin-right:3px; }
.brand-mark i { width:7px; background:var(--green); height:22px; }
.brand-mark i:nth-child(2) { height:28px; }
.brand-mark i:last-child { height:16px; }
.journey { display:grid; grid-template-columns:1fr 1fr; position:relative; }
.scene { grid-column:2; grid-row:1 / 5; position:sticky; top:0; height:100svh; min-height:540px; max-height:1100px; align-self:start; overflow:hidden; }
canvas { position:absolute; width:100%; height:100%; inset:0; }
.scene-halo { position:absolute; inset:20% 4% 8%; border-radius:50%; background:radial-gradient(ellipse,#a2b78a22,transparent 70%); transform:scale(var(--halo-scale,1)); }
.scene-progress { position:absolute; right:1px; top:42%; width:2px; height:90px; background:color-mix(in srgb,var(--text) 18%,transparent); }
.scene-progress span { display:block; width:100%; height:100%; background:var(--green); transform:scaleY(var(--progress,0)); transform-origin:top; }
.chapter { grid-column:1; display:flex; align-items:center; min-height:100svh; padding:120px 30px 90px 0; position:relative; }
.chapter:nth-of-type(1) { grid-row:1; }
.chapter:nth-of-type(2) { grid-row:2; }
.chapter:nth-of-type(3) { grid-row:3; }
.chapter:nth-of-type(4) { grid-row:4; }
.chapter-copy { width:100%; }
h1 { font-size:clamp(70px,7.3vw,113px); line-height:1.03; letter-spacing:-6px; font-weight:500; margin:0; }
em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--green); }
h1 em { letter-spacing:-5px; line-height:1.06; }
h2 { font-size:clamp(34px,4.3vw,66px); line-height:1.18; font-weight:450; letter-spacing:-2.5px; margin:0 0 30px; }
h2 em { font-size:1.05em; }
p { font-size:16px; line-height:1.9; color:var(--text); }
.chapter p { max-width:420px; margin:20px 0 0; }
.hero p { max-width:385px; margin-top:32px; }
.contact { min-height:85svh; padding-top:120px; padding-bottom:100px; display:flex; flex-direction:column; justify-content:center; }
.contact h2 { font-size:clamp(36px,5.3vw,78px); }
.contact-intro p { margin-top:26px; }
.contact-details { margin-top:35px; display:flex; flex-direction:column; align-items:flex-start; gap:19px; font-style:normal; }
.contact-details a { font-size:clamp(23px,2.6vw,38px); letter-spacing:-1px; color:var(--green); transition:color .2s; }
.contact-details a span { display:inline-block; margin-left:22px; transition:transform .2s; }
.contact-details a:hover { color:#608250; }
.contact-details a:hover span { transform:translate(3px,-3px); }
.phone { font-size:23px; letter-spacing:-.5px; }
.contact-details p { margin:8px 0 0; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:28px; color:var(--text); font-size:12px; }
.footer p { font-size:12px; margin:0; color:inherit; }
.motion .chapter-copy { opacity:1; transform:none; }
.motion .contact-intro { opacity:1; transform:none; }
@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  h1 { font-size:clamp(65px,8.1vw,85px); letter-spacing:-5px; }
  h2 { font-size:clamp(34px,4.5vw,49px); letter-spacing:-1.7px; }
  .chapter { padding-right:20px; }
  p { font-size:15px; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 40px); }
  .header { position:relative; height:78px; }
  .brand { font-size:20px; }
  .journey { display:block; }
  .scene { height:32svh; min-height:180px; max-height:290px; z-index:2; margin:0 -20px; width:calc(100% + 40px); background:linear-gradient(var(--paper) 82%,transparent); }
  .scene-progress { right:20px; top:32%; height:65px; }
  .chapter { min-height:72svh; padding:38px 0 65px; align-items:center; }
  h1 { font-size:clamp(61px,13vw,85px); letter-spacing:-4px; }
  h1 em { letter-spacing:-3px; }
  h2 { font-size:clamp(33px,8.7vw,48px); letter-spacing:-1.5px; margin-bottom:24px; }
  .chapter p { font-size:15px; line-height:1.8; margin-top:18px; }
  .hero p { margin-top:24px; }
  .contact { padding-top:80px; padding-bottom:65px; min-height:85svh; }
  .contact h2 { font-size:clamp(34px,8.7vw,48px); }
  .contact-intro p { margin-top:23px; }
  .contact-details { margin-top:25px; gap:18px; }
  .contact-details a { font-size:clamp(19px,5.4vw,29px); letter-spacing:-.7px; }
  .contact-details a span { margin-left:6px; }
  .phone { font-size:22px; }
  .footer { display:block; padding-block:24px; font-size:11px; }
  .footer p { font-size:11px; line-height:1.7; margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { transition:none!important; animation:none!important; }
  .motion .chapter-copy,.motion .contact-intro { opacity:1; transform:none; }
}


/* Keep the reading surface steady; motion belongs to the illustration and headings. */
body { background:#efeee8; color:#242b26; }
.chapter-copy,.motion .chapter-copy,.motion .contact-intro { opacity:1; }
.chapter p,.contact p { color:#536052; }
.chapter h2 { font-size:clamp(31px,3.7vw,57px); letter-spacing:-1.8px; }
.chapter h2 em { display:inline-block; white-space:nowrap; }
.scene-halo { inset:22% 2% 12%; background:radial-gradient(ellipse,#c7d3b960,transparent 70%); transform:scale(var(--halo-scale,1)); }
.scene-progress { display:none; }
.motion .chapter h2 em { clip-path:none; }
.mobile-motif { display:none; }
.contact-details a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:9px; text-decoration-color:#a6b29a; }
@media(max-width:1100px) and (min-width:701px) {
  .journey { grid-template-columns:1.08fr 1fr; }
  .chapter h2 { font-size:clamp(30px,3.8vw,42px); letter-spacing:-1.3px; }
}
@media(max-width:700px) {
  .journey { display:flex; flex-direction:column; }
  .hero { order:0; padding:24px 0 0; }
  .scene { order:1; position:relative; top:auto; height:220px; min-height:0; max-height:none; width:100%; margin:12px 0 4px; z-index:0; background:none; }
  #about { order:2; }
  #investment { order:3; }
  #operations { order:4; }
  .chapter { min-height:0; padding:42px 0 16px; display:block; }
  .chapter h2 { font-size:clamp(29px,8.3vw,43px); letter-spacing:-1.2px; }
  h1 { font-size:clamp(61px,15vw,80px); }
  .chapter p { font-size:15px; line-height:1.8; }
  .motion .chapter-copy { transform:none; }
  .mobile-motif { display:block; width:100%; height:130px; margin:25px auto 0; overflow:visible; color:#476643; }
  .mobile-motif .connection { stroke-dasharray:400; stroke-dashoffset:calc(400 * (1 - var(--motif-progress,1))); }
  .mobile-motif .bar { transform:scaleY(var(--motif-progress,1)); transform-box:fill-box; transform-origin:bottom; }
  .mobile-motif .tile { transform:translateX(calc(var(--offset,0px) * (1 - var(--motif-progress,1)))); }
  .contact { min-height:0; padding-top:60px; padding-bottom:55px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion .chapter h2 em { clip-path:none; }
  .mobile-motif .connection { stroke-dashoffset:0; }
  .mobile-motif .bar,.mobile-motif .tile { transform:none; }
}
/* A soft mask also protects against clipping during perspective changes. */
.scene canvas { mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent); mask-composite:intersect; }
@media(max-width:700px) {
  .powerup-motif { height:150px; }
  .powerup { transform:translateY(calc(35px * (1 - var(--motif-progress,1)))); opacity:var(--motif-progress,1); }
}
@media(prefers-reduced-motion:reduce) { .powerup { transform:none; opacity:1; } }
.scene-halo { display:none; }
@media(max-width:700px) {
  .powerup-motif { height:165px; }
  .powerup { transform:translateY(calc(110px * (1 - var(--motif-progress,1)))); }
}
@media(prefers-reduced-motion:reduce) { .powerup { transform:none; } }
@media(max-width:700px) {
  .powerup-motif { height:180px; }
  .coin-slot { opacity:var(--slot-opacity,1); }
}
@media(max-width:700px) { .powerup-motif { height:240px; } }

/* Persistent contact bar. */
:root { --header-height:84px; }
html { scroll-padding-top:calc(var(--header-height) + 20px); }
body { padding-top:var(--header-height); }
.header { position:fixed; inset:0 0 auto; width:100%; height:var(--header-height); z-index:20; background:#efeee8f5; backdrop-filter:blur(14px); border-bottom:1px solid #234a3b16; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header .brand { flex-shrink:0; }
.header-contacts { display:flex; align-items:center; gap:32px; font-size:13px; color:#405843; }
.header-contacts a { padding-block:10px; transition:color .2s; }
.header-contacts a:hover { color:#779064; }
.header-phone { white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(min-width:701px) {
  .scene { top:var(--header-height); height:calc(100svh - var(--header-height)); min-height:420px; }
  .chapter { min-height:calc(100svh - var(--header-height)); padding-top:85px; padding-bottom:75px; }
}
@media(max-width:900px) and (min-width:701px) {
  .header-contacts { gap:20px; font-size:11px; }
  .header .brand { font-size:20px; }
}
@media(max-width:700px) {
  :root { --header-height:108px; }
  .header-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; }
  .header-contacts { width:100%; justify-content:space-between; gap:12px; font-size:11px; }
  .header-contacts a { padding-block:3px; }
}
@media(max-width:380px) {
  :root { --header-height:128px; }
  .header-contacts { flex-direction:column; align-items:flex-start; gap:4px; font-size:12px; }
}
/* One shared scroll-driven scene on mobile, below the reading area. */
@media(max-width:700px) {
  :root { --mobile-scene-height:200px; }
  .journey { display:grid; grid-template-columns:minmax(0,1fr); }
  .scene { grid-column:1; grid-row:1 / 5; order:0; position:sticky; top:auto; bottom:0; align-self:end; height:var(--mobile-scene-height); min-height:0; width:calc(100% + 40px); margin:0 -20px; z-index:3; background:linear-gradient(to bottom,#efeee800,#efeee8 16%); pointer-events:none; }
  .chapter,#about,#investment,#operations { order:0; grid-column:1; min-height:calc(100svh - var(--header-height)); padding:30px 0 calc(var(--mobile-scene-height) + 36px); }
  .hero { padding-top:24px; }
  .chapter-copy { position:relative; z-index:1; }
  .motion .chapter h2 em { clip-path:none; }
}
@media(max-width:700px) and (max-height:650px) { :root { --mobile-scene-height:155px; } }
/* Compact reading rhythm on all screens. */
@media(min-width:701px) {
  .chapter { min-height:clamp(480px,75svh,700px); padding-top:55px; padding-bottom:55px; }
  .contact { min-height:0; padding-top:70px; padding-bottom:65px; }
  .contact-details { margin-top:24px; }
}
@media(max-width:700px) {
  :root { --mobile-scene-height:180px; }
  .chapter,#about,#investment,#operations { min-height:0; padding:24px 0 90px; }
  #operations { padding-bottom:calc(var(--mobile-scene-height) + 30px); }
  .chapter h2 { margin-bottom:18px; }
  .chapter p { margin-top:14px; line-height:1.7; }
  .hero p { margin-top:20px; }
  .scene canvas { mask-image:none; }
  .contact { padding-top:40px; padding-bottom:40px; }
}
@media(max-width:700px) and (max-height:650px) { :root { --mobile-scene-height:155px; } }
@media(max-width:700px) { .scene { background:#efeee8; } }

.company-details { max-width:720px; display:grid; gap:18px; }
.company-details p { font-size:15px; line-height:1.7; margin:0; }
.company-details strong { font-weight:500; color:var(--ink); }