/* Koodjal Booka: static site styles (rebuilt from the WordPress/Elementor build, Nov 2026) */

:root {
  --black: #000;
  --white: #fff;
  --teal: #5b838c;
  --olive: #677858;
  --rust: #9f4d2e;
  --navy: #1f285a;
  --pad: 40px;
  --font-display: "Manrope", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
body.no-scroll { overflow: hidden; }

/* Type */
.display { font-family: var(--font-display); font-size: 64px; line-height: 64px; word-spacing: 3px; }
.display--upper { text-transform: uppercase; }
.lead p { font-family: var(--font-body); font-size: 25px; line-height: 28px; }
.lead p + p { margin-top: 28px; }
.small p { font-family: var(--font-display); font-size: 18px; line-height: 18px; }
.small p + p { margin-top: 18px; }
.subhead { font-family: var(--font-body); font-size: 36px; line-height: 36px; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: stretch;
  min-height: 10vh; padding: 20px var(--pad);
  transition: transform 0.4s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header--dark { background: var(--black); }
.site-header__logo {
  width: 10%; min-height: 100px;
  background: url(../media/logo-white.svg) no-repeat left center / contain;
}
.site-header--light .site-header__logo { background-image: url(../media/logo-black.webp); }
.site-header__menu {
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.site-header__menu img { width: 80px; height: 80px; transition: transform 0.3s; }
.site-header__menu:hover img { transform: scale(1.1); }
.page-home main { padding-top: 0; }
.header-spacer { height: var(--header-h, 140px); }

/* Menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu nav { display: flex; flex-direction: column; align-items: center; }
.menu a { font-family: var(--font-display); font-size: 64px; line-height: 64px; word-spacing: 3px; color: var(--white); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--white); opacity: 0.7; }
.close-btn {
  position: absolute; background: none; border: 0; cursor: pointer; color: var(--white);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.close-btn svg { width: 23px; height: 23px; fill: currentColor; }
.close-btn:hover { color: var(--rust); }
.menu .close-btn { top: 8%; right: 10%; }

/* Acknowledgement of Country pop-up (home page, once per session) */
.ack {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px;
  padding: var(--pad); color: var(--white); background: var(--black);
  opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s;
}
.ack.is-open { opacity: 1; visibility: visible; }
.ack__video, .ack::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.ack__video { object-fit: cover; }
.ack::after { content: ""; background: var(--black); opacity: 0.82; }
.ack__col { position: relative; z-index: 1; width: 50%; }
.ack h2 { font-size: 36px; line-height: 36px; }
.ack .small p + p { margin-top: 18px; }
.ack .close-btn { z-index: 2; top: 60px; right: 110px; opacity: 0; transition: opacity 0.3s; }
.ack .close-btn.is-ready { opacity: 1; }
.ack .close-btn svg { width: 35px; height: 35px; }

/* Shared section layouts */
.split {
  display: flex; gap: 50px; align-items: flex-start;
  padding: 100px var(--pad) 0;
}
.split__head { flex: 0 1 35%; }
.split__body { flex: 0 1 65%; display: flex; flex-direction: column; gap: 50px; min-width: 0; }
.split--30 .split__head { flex-basis: 30%; }
.split--30 .split__body { flex-basis: 70%; }

.graphic img { width: 100%; object-fit: contain; object-position: left center; }
.mono img, img.mono { filter: saturate(0); transition: filter 0.5s; }
.mono:hover img, img.mono:hover { filter: saturate(1); }

.feature { padding: 200px var(--pad) 100px; }
.feature__frame { position: relative; }
.feature__frame img { width: 100%; height: 90vh; object-fit: cover; }
.feature__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: transparent; mix-blend-mode: multiply; transition: background 0.5s;
}

/* Hero with background video */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 85vh; padding: var(--pad); color: var(--white); overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--black); opacity: 0.52; z-index: 1; }
.hero > :not(video) { position: relative; z-index: 2; }

.page-end { min-height: 200px; }

/* Section headings stay in view while their text scrolls (desktop and tablet) */
@media (min-width: 768px) {
  .split__head { position: sticky; top: 300px; }
}
[id] { scroll-margin-top: 160px; }

/* Inner-page header: white bar with black logo and hairline */
.site-header--light { background: var(--white); border-bottom: 1px solid var(--black); }

/* Intro row: heading 30%, text 70%, 20px gap */
.intro { display: flex; gap: 20px; align-items: flex-start; }
.intro__head { flex: 0 1 30%; }
.intro__body { flex: 0 1 70%; }
.hero .intro { width: 100%; }
.modules-top .intro__body { flex-basis: 100%; }

/* Modules: slider */
.modules-top { display: flex; flex-direction: column; gap: 100px; min-height: 85vh; padding: var(--pad); }
.slider { position: relative; overflow: hidden; padding: 30px 0; cursor: grab; user-select: none; }
.slider:active { cursor: grabbing; }
.slider__track { display: flex; align-items: flex-start; will-change: transform; }
.slide { flex: 0 0 36%; max-width: 36%; padding: 0 16px; display: flex; flex-direction: column; align-items: center; opacity: 0.25; transform: scale(0.7); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.slide.is-center { opacity: 1; transform: scale(1); }
.slide.is-center:hover { transform: scale(1.1); }
.slide a { display: flex; flex-direction: column; align-items: center; width: 100%; pointer-events: none; }
.slide.is-center a { pointer-events: auto; }
.slide img { width: 100%; height: 440px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.slide__title { margin-top: 36px; font-family: var(--font-display); font-size: 18px; line-height: 18px; text-align: center; }
.slide__sub { margin-top: 5px; font-family: var(--font-display); font-size: 12px; line-height: 12px; text-align: center; }

/* Image tile grids (background images, optional hover swap) */
.tiles { display: grid; gap: 20px; }
.tiles--6 { grid-template-columns: repeat(6, 1fr); min-height: 194px; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); min-height: 231px; }
.tiles--2 { grid-template-columns: repeat(2, 1fr); min-height: 328px; }
.tile { display: block; position: relative; }

/* Artwork panel: background image, contain; optional hover image cross-fades in */
.art { position: relative; }
.art::before, .art::after { content: ""; position: absolute; inset: 0; background: var(--img) no-repeat var(--pos, left center) / contain; transition: opacity 1s; }
.art::after { background-image: var(--hover, none); opacity: 0; }
.art[style*="--hover"]:hover::before { opacity: 0; }
.art[style*="--hover"]:hover::after { opacity: 1; }
.tile.art { --pos: center; }

/* Example plans */
.plans { padding: 150px var(--pad) var(--pad); }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 10px; }
.plans figure { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.plans img { width: 100%; height: auto; }
.plans figcaption { font-family: var(--font-display); font-size: 18px; line-height: 18px; text-align: center; }

/* Skins */
.elements { display: flex; flex-direction: column; gap: 100px; padding: 100px var(--pad) var(--pad); }
.video-panel { position: relative; min-height: 58vh; overflow: hidden; }
.video-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps { margin: 0; padding-left: 40px; font-family: var(--font-display); font-size: 25px; line-height: 30px; }
.banner { padding-top: 100px; }
.banner__inner {
  position: relative; overflow: hidden; min-height: 50vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  color: var(--white); text-align: center; background: var(--poster) center / cover no-repeat;
}
.banner__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__inner > :not(video) { position: relative; z-index: 1; }
.banner__sub { font-family: var(--font-display); font-size: 18px; line-height: 18px; }
.envision { display: flex; flex-direction: column; gap: 50px; padding: 100px var(--pad) 0; }
.envision__row { display: flex; align-items: flex-start; gap: 30px; padding: 10px; }
.envision__row h2 { flex: 0 1 30%; }
.envision__row .copy { flex: 0 1 70%; }
.copy p { font-family: var(--font-display); font-size: 25px; line-height: 30px; }
.copy p + p { margin-top: 14px; }
.reveal { opacity: 0; transition: opacity 2s ease; }
.reveal.is-visible { opacity: 1; }

/* Community */
.community { padding: 0 var(--pad) var(--pad); }
.community__diagram { width: 100%; height: 75vh; object-fit: contain; }
.community .intro { margin-top: 50px; }
.community__scales { display: flex; justify-content: center; padding-top: 50px; }
.community__scales img { height: 46vh; width: auto; max-width: 100%; object-fit: contain; }

/* Contact */
.contact { padding: var(--pad); }
.contact__col { width: 40%; display: flex; flex-direction: column; gap: 15px; }
.contact__visit { display: flex; flex-direction: column; gap: 15px; }
.address p { font-family: var(--font-display); font-size: 18px; line-height: 25px; }
.map iframe { display: block; width: 100%; height: 845px; border: 0; filter: brightness(0.95) contrast(1.07) saturate(0.05); }

/* Footer */
.site-footer {
  display: flex; justify-content: center; align-items: stretch; gap: 20px;
  min-height: 30vh; padding: 20px;
  background: var(--black); color: var(--white);
}
.site-footer__contact { width: 29.328%; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; padding: 0 20px 0 0; }
.site-footer__contact h2 { font-size: 36px; line-height: 36px; }
.site-footer__contact p { font-family: var(--font-display); font-size: 18px; line-height: 18px; }
.site-footer__contact p + p { margin-top: 18px; }
.site-footer__ack { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.site-footer__ack p { font-family: var(--font-display); font-size: 12px; line-height: 14px; }
.site-footer__ack p + p { margin-top: 14px; }
.site-footer__ack img { width: 100%; height: 200px; object-fit: contain; object-position: left center; }
.site-footer__address { width: 25.73%; flex-shrink: 0; }
.site-footer__address p { font-size: 14px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.site-footer__address p + p { margin-top: 14px; }

/* Tablet */
@media (max-width: 1024px) {
  .site-header__logo { width: 20%; }
  .hero { padding: 20px; }
  .ack .close-btn { top: 5%; right: 7%; }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --pad: 10px; }
  .display, .menu a { font-size: 35px; line-height: 35px; }
  .subhead { font-size: 28px; line-height: 30px; }
  .lead p, .small p { font-size: 16px; line-height: 16px; }
  .lead p + p, .small p + p { margin-top: 16px; }
  .site-header { min-height: 70px; padding: 10px 20px; }
  .site-header__logo { width: 25%; min-height: 50px; }
  .site-header__menu img { width: 40px; height: 40px; }
  .hero { min-height: calc(100vh - var(--header-h, 70px)); padding: 10px; }
  .split { flex-direction: column; gap: 50px; padding-top: 60px; }
  .split__head, .split__body, .split--30 .split__head, .split--30 .split__body { flex-basis: auto; width: 100%; }
  .split__body .graphic img { height: auto !important; max-height: 50vh; }
  .feature { padding: 60px var(--pad) 0; }
  .feature__frame img { height: 50vh; }
  .ack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; overflow-y: auto; }
  .ack__col { width: 100%; }
  .ack__col:first-child { justify-content: flex-start; }
  .ack .close-btn { top: 20px; right: 25px; }
  .ack .close-btn svg { width: 27px; height: 27px; }
  .menu .close-btn { top: 20px; right: 20px; }
  .site-footer { flex-direction: column; padding: 30px 20px; gap: 40px; }
  .site-footer__contact, .site-footer__address { width: 100%; padding: 0; }

  /* Inner pages */
  .intro, .envision__row { flex-direction: column; gap: 20px; }
  .intro__head, .intro__body, .envision__row h2, .envision__row .copy { flex-basis: auto; width: 100%; }
  .subhead { font-size: 36px; line-height: 36px; }
  .modules-top { gap: 40px; padding: 10px; min-height: 0; }
  .slider { padding: 30px 0 10px; }
  .slide { flex-basis: 51%; max-width: 51%; padding: 0 8px; }
  .slide img { height: 205px; }
  .slide__title { margin-top: 36px; }
  .tiles--6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 127px; min-height: 0; }
  .tiles--3 { min-height: 89px; }
  .tiles--2 { min-height: 180px; }
  .split[style*="padding-top"] { padding-top: 60px !important; }
  .split .art { min-height: 40vh !important; }
  .video-panel { min-height: 37vh; }
  .steps { font-size: 16px; line-height: 18px; }
  .banner { padding-top: 60px; }
  .banner__inner { min-height: 37vh; }
  .banner__inner h2 { width: 100% !important; }
  .envision { gap: 30px; padding-top: 30px; }
  .copy p { font-size: 16px; line-height: 16px; }
  .plans { padding: 60px var(--pad) var(--pad); }
  .plans__grid { grid-template-columns: 1fr; padding: 0; }
  .community { padding: 0 40px 40px; }
  .community__scales img { height: auto; }
  .contact__col { width: 100%; }
  .contact .display { font-size: 25px; line-height: 25px; }
  .contact .small p, .address p { font-size: 14px; line-height: 14px; }
  .contact .small p + p { margin-top: 14px; }
  .address p { line-height: 16px; }
  .contact .subhead { font-size: 20px; line-height: 20px; }
  .map iframe { height: 392px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}