/* ==========================================================================
   KELBRIRIT Oil And Gas Ltd
   Built by Khronotek
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Shared components (gold divider, buttons, wordmark)
   4. Hero
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --black:      #0D0D0D;
  --gold:       #C9A227;
  --navy:       #1B3A6B;
  --white:      #FFFFFF;

  --black-soft: #141414;
  --ink-muted:  rgba(255, 255, 255, 0.72);
  --hairline:   rgba(255, 255, 255, 0.12);

  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --header-h: 76px;
  --pad:  clamp(1.25rem, 5vw, 4rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

p { margin: 0; }

img { max-width: 100%; display: block; }

a { color: inherit; }

/* 3. Shared components -------------------------------------------------- */

/* Signature motif: horizontal gold divider, used as the section-break rule
   site-wide. Modifier --wide is for full section breaks. */
.gold-rule {
  width: 72px;
  height: 3px;
  background: var(--gold);
  border: 0;
  border-radius: 2px;
  margin: 0;
}

/* Wordmark — placeholder lockup standing in for the official logo file.
   Swap the .wordmark block for <img src="assets/img/logo.png"> when the
   real asset lands; surrounding layout does not change. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15em;
  text-decoration: none;
  line-height: 1;
}
.wordmark__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.wordmark__sub {
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease),
              color 0.25s var(--ease),
              border-color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--gold);
  color: var(--black);
}
.btn--primary:hover {
  background: #dcb432;
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* 4. Hero --------------------------------------------------------------- */
.hero {
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: calc(94vh - var(--header-h));
  position: relative;
  background: var(--black);
}

/* Left: copy panel */
.hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 8vw, 7rem) var(--pad) clamp(3rem, 7vw, 6rem);
  position: relative;
  /* soft navy lift behind the copy so the black never reads flat */
  background:
    radial-gradient(120% 90% at 0% 30%, rgba(27, 58, 107, 0.38) 0%, transparent 62%),
    var(--black);
}

.hero__inner {
  max-width: 34rem;
  margin-left: auto;
  width: 100%;
}

.hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
}

.hero__title {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
}
.hero__title .accent { color: var(--gold); }

.hero__rule { margin: 2rem 0; }

.hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-muted);
  max-width: 30rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* Right: photograph */
.hero__media {
  position: relative;
  min-height: 20rem;
  border-left: 3px solid var(--gold);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% center;
}
/* feather the seam so the photo meets the panel instead of butting against it */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.55) 0%, transparent 28%);
  pointer-events: none;
}

/* Stack on narrow screens: photo above, copy below */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-left: 0;
    border-bottom: 3px solid var(--gold);
  }
  .hero__media img { object-position: 34% center; }
  .hero__media::after {
    background: linear-gradient(180deg, transparent 55%, rgba(13, 13, 13, 0.85) 100%);
  }
  .hero__inner { margin-left: 0; max-width: none; }
  .hero__panel { padding-block: clamp(2.5rem, 9vw, 4rem); }
}

@media (max-width: 460px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* 5. Site header / navigation -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid, not translucent: a backdrop-filter here made Chrome drop
     repaints of content directly beneath the bar during scroll, leaving
     the page blank until the next paint. */
  background: var(--black);
  border-bottom: 1px solid rgba(201, 162, 39, 0.26);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Brand lockup: K emblem + name. The emblem is decorative; the adjacent
   text supplies the link's accessible name. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark {
  height: 42px;
  width: auto;
}
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.brand__sub {
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
/* gold underline — the section-break motif, reused as the nav indicator */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-current { color: var(--gold); }
.nav__link.is-current::after { transform: scaleX(1); }

.nav__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.btn--sm {
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--pad);
    background: var(--black);
    border-bottom: 1px solid rgba(201, 162, 39, 0.26);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.34s var(--ease), padding 0.34s var(--ease),
                visibility 0s linear 0.34s;
  }
  .nav.is-open {
    max-height: 26rem;
    padding-block: 1rem 1.75rem;
    visibility: visible;
    transition: max-height 0.34s var(--ease), padding 0.34s var(--ease),
                visibility 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding-block: 0.95rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--hairline);
  }
  .nav__link::after { display: none; }
  .nav__link.is-current { color: var(--gold); }

  .nav__cta { margin-top: 1.25rem; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .nav-toggle__bar, .nav { transition: none; }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ==========================================================================
   6. Layout primitives — shared by every page below the hero
   ========================================================================== */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--alt { background: var(--black-soft); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Section heading cluster: eyebrow / title / gold rule */
.section-head { max-width: 44rem; }
.section-head__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.section-head__title { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
.section-head .gold-rule { margin: 1.75rem 0; }

.lede {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  color: var(--ink-muted);
  max-width: 38rem;
}
.lede + .lede { margin-top: 1.25rem; }

/* Two-column split with a photograph */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__body > .btn { margin-top: 2rem; }

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* gold corner accent — the divider motif turned into a frame detail */
.media-frame::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 3px;
  background: var(--gold);
}
.media-frame--portrait img { aspect-ratio: 4 / 5; object-position: center 32%; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: -1; }
}

/* Trust indicator strip */
.trust {
  border-block: 1px solid rgba(201, 162, 39, 0.3);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust__item {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 1.25rem;
  text-align: center;
  border-left: 1px solid var(--hairline);
}
.trust__item:first-child { border-left: 0; }
.trust__item span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 1rem;
}
.trust__item strong {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  letter-spacing: 0.01em;
  color: var(--white);
}
@media (max-width: 700px) {
  .trust__list { grid-template-columns: 1fr; }
  .trust__item { border-left: 0; border-top: 1px solid var(--hairline); }
  .trust__item:first-child { border-top: 0; }
}

/* Interior page header */
.page-head {
  padding-block: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(27, 58, 107, 0.4) 0%, transparent 60%),
    var(--black);
  border-bottom: 1px solid var(--hairline);
}
.page-head__title { font-size: clamp(2rem, 4vw, 3rem); }
.page-head .gold-rule { margin: 1.5rem 0 0; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--black-soft);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card__title {
  font-size: 1.25rem;
  font-family: var(--font-head);
  font-weight: 600;
}
.card .gold-rule { margin: 1.125rem 0 1.25rem; width: 48px; }
.card p { color: var(--ink-muted); font-size: 0.9375rem; }

/* Marker list */
.marker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}
.marker-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-muted);
}
.marker-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--gold);
}

/* Fact rows */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--hairline);
}
.facts li:last-child { border-bottom: 1px solid var(--hairline); }
.facts dt, .facts .facts__key {
  min-width: 9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2em;
}
.facts .facts__val { color: var(--white); }

/* Emphasis panel — used for the compliance statement */
.panel {
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(27, 58, 107, 0.32) 0%, rgba(27, 58, 107, 0.06) 100%);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  max-width: 52rem;
}
.panel h2 { font-size: 1.25rem; margin-bottom: 0.875rem; }
.panel p { color: var(--ink-muted); }

/* Person credit */
.person__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--white);
  margin-top: 1.25rem;
}
.person__role {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.35rem;
}

/* ==========================================================================
   7. Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-block {
  background: var(--black-soft);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
.whatsapp-link svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: #25D366;
}
.whatsapp-link:hover { color: var(--gold); }
.whatsapp-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-block__note { margin-top: 1.5rem; }
.contact-block__title { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
.contact-block .gold-rule { margin: 1.125rem 0 1.25rem; }
.contact-block .btn { margin-top: 1.75rem; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer {
  background: var(--black-soft);
  border-top: 1px solid rgba(201, 162, 39, 0.26);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}
.site-footer__tagline {
  margin-top: 1.1rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}

.site-footer__heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.85rem;
}
.site-footer__note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 0.9rem;
  max-width: 15rem;
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.site-footer__list a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
.site-footer__list a:hover { color: var(--gold); }
.site-footer__list a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer__divider {
  height: 1px;
  border: 0;
  background: var(--hairline);
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
}
.site-footer__copy {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   9. Prose — legal / long-form pages
   ========================================================================== */
.prose { max-width: 44rem; }

.prose__meta {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}

.prose h2 {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}
.prose h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.75rem;
}

.prose p {
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}
.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: #dcb432; }
.prose a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.prose__list { margin-bottom: 1.35rem; }
.prose__contact { margin-top: 1.25rem; }
.prose__contact .facts__val a { text-decoration: none; }
.prose__contact .facts__val a:hover { text-decoration: underline; }

/* Email line on the Contact page */
.contact-block__email {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.contact-block__email a {
  color: var(--gold);
  text-decoration: none;
}
.contact-block__email a:hover { text-decoration: underline; }
.contact-block__email a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   10. Responsive pass — narrow-screen corrections
   ========================================================================== */

/* Fact rows: the 9rem key column left short values inline and forced long
   ones onto their own line, so rows read ragged on phones. Stack every row
   below 560px so they are consistent. Affects About and the Privacy
   Policy contact block. */
@media (max-width: 560px) {
  .facts li {
    flex-direction: column;
    gap: 0.3rem;
    padding-block: 0.8rem;
  }
  .facts dt,
  .facts .facts__key {
    min-width: 0;
    padding-top: 0;
  }
}

/* Footer links sat at an 18px hit area — under the ~44px touch guideline.
   Pad the anchor and pull the margin back so spacing stays visually the same. */
@media (max-width: 760px) {
  .site-footer__list { gap: 0.85rem; }
  .site-footer__list a {
    display: inline-block;
    padding-block: 0.7rem;
    margin-block: -0.55rem;
  }
}