/* TVB CI — Corporate Website */

:root {
  --black: #090a0d;
  --dark: #121318;
  --gold: #d5ad5a;
  --white: #ffffff;
  --muted: #b8b8bd;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Navigation */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 6%;
  background: #0c0d10;
  border-bottom: 1px solid #29251d;
}

.brand {
  color: var(--gold);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 2px;
}

.site-header nav {
  display: flex;
  gap: 22px;
}

.site-header nav a {
  font-size: 14px;
  font-weight: 600;
}

.site-header nav a:hover {
  color: var(--gold);
}

/* Hero */

.hero {
  min-height: 75vh;
  display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
padding: 70px 6% 90px;
  text-align: center;
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.48),
      rgba(0, 0, 0, 0.65)
    ),
    url("assets/tvbci-hero.jpg") center center / cover no-repeat;
}
.hero-content {
  max-width: 850px;
  margin: 0 auto;
  transform: none;
}

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
}

.hero h1 {
  font-size: clamp(22px, 5vw, 42px);
  line-height: 1.12;
  margin: 24px 0;
  letter-spacing: -0.5px;
}

.hero-text {
  color: var(--muted);
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.2s ease;
}

.btn-gold {
  background: var(--gold);
  color: #111;
}

.btn-gold:hover {
  background: #edca81;
}

.btn-outline {
  border: 1px solid var(--gold);
  color: var(--gold);
}

.btn-outline:hover {
  background: var(--gold);
  color: #111;
}

/* Departments */

.departments {
  padding: 85px 6%;
  background: var(--dark);
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-heading h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin: 12px 0;
}

.section-heading > p:last-child {
  color: var(--muted);
}

/* Future department cards */

.department-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.department-card {
  padding: 30px;
  border: 1px solid #34302a;
  border-radius: 16px;
  background: #1a1b20;
  transition: 0.2s ease;
}

.department-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.department-card h3 {
  color: var(--gold);
  margin: 12px 0;
}

.department-card p {
  color: var(--muted);
}

.department-card a {
  color: var(--gold);
  font-weight: 700;
}

/* Mobile */

@media (max-width: 768px) {
  .site-header {
    padding: 18px 5%;
  }

  .brand {
    font-size: 21px;
  }

  .site-header nav {
    gap: 12px;
  }

  .site-header nav a {
    font-size: 12px;
  }

  .hero {
    min-height: 70vh;
    padding: 75px 22px;
  }

.hero h1 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

  .hero-text {
    font-size: 15px;
  }

  .department-grid {
    grid-template-columns: 1fr;
  }

  .departments {
    padding: 65px 20px;
  }
}


@media (max-width: 768px) {
  
.hero-text {
  color: #ffffff;
  transform: translateY(190px);
}


.hero .eyebrow {
  transform: translateY(-70px);
}

.hero h1 {
  transform: translateY(-70px);
}
  
  .hero-actions {
    transform: translateY(190px);
  }
}

/* TVB CI — Côte d’Ivoire identity, 23 October 2026.
   Orange lettering, white surfaces, green accents: matched to Marketplace. */
:root{--ci-orange:#b6410b;--ci-button:#b6410b;--ci-green:#087a48;--ci-ink:#15342a;--ci-muted:#52685d;--ci-line:#cfdfd3;--ci-soft:#e8f5ec;--black:#f7faf7;--dark:#f7faf7;--panel:#fff;--gold:#b6410b;--gold-light:#b6410b;--white:#fff;--muted:#52685d;--line:#cfdfd3}
body{background:#f7faf7;color:var(--ci-ink)}
.site-header,.immo-header{background:#fff!important;border-top:5px solid transparent;border-bottom:1px solid var(--ci-line);border-image:linear-gradient(to right,#d9510b 0 33.333%,#fff 33.333% 66.666%,#087a48 66.666% 100%) 1}
.brand,.brand span,.immo-brand{color:var(--ci-orange)!important}
.site-header nav a,.nav a,.immo-header a{color:var(--ci-orange)!important}
.site-header nav a:hover,.nav a:hover,.immo-header a:hover{color:var(--ci-green)!important}
.menu-toggle{color:var(--ci-orange)}
h1,h2,h3{color:var(--ci-orange)}
.eyebrow{color:var(--ci-green)}
.btn-gold{background:var(--ci-button);color:#fff;border:1px solid var(--ci-button)}
.btn-gold:hover{background:#943408;color:#fff}
.btn-outline,.dark-outline{background:#fff;border:1px solid var(--ci-green);color:var(--ci-orange)}
.btn-outline:hover,.dark-outline:hover{background:var(--ci-soft);color:var(--ci-orange)}
.btn:focus-visible,nav a:focus-visible,.immo-btn:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--ci-green);outline-offset:4px}
.hero h1,.hero h2,.hero .hero-title{color:#fff}
.hero .eyebrow,.hero .hero-text{color:#fff}
.hero .btn-outline{background:#fff;color:var(--ci-orange)}
.department-card,.vehicle-card,.service{background:#fff;border-color:var(--ci-line);box-shadow:0 8px 24px rgb(21 52 42 / 4%)}
.department-card:hover{border-color:var(--ci-green)}
.department-card h3,.department-card a,.service span{color:var(--ci-orange)}
.department-card p,.section-note,.muted,.vehicle-year,.negotiable,.disclaimer,.service p,.contact-section p{color:var(--ci-muted)}
.department-card,.vehicle-card,.service,.vehicle-info,.section-heading{min-width:0}
.price{display:block;max-width:100%;padding:12px 16px;background:var(--ci-soft);border:1px solid var(--ci-green);border-radius:12px;color:var(--ci-orange)!important;text-align:center;overflow-wrap:anywhere}
.price small{display:block;margin-top:4px;font-size:.85rem;letter-spacing:.06em}
.hero-badge,.pill{border-color:var(--ci-green);background:var(--ci-soft);color:var(--ci-green)}
.hero-panel{background:var(--ci-soft);border-color:var(--ci-line);box-shadow:none}
.hero-panel p{color:var(--ci-muted)}
.spec-grid div{border-color:var(--ci-line)}
.spec-grid span{color:var(--ci-muted)}
.thumb.active{border-color:var(--ci-green)}
.vehicle-gallery .main-photo{background:var(--ci-soft)!important}
.footer,.immo-footer{background:#fff;color:var(--ci-muted);border-top:1px solid var(--ci-line)}
.footer a{color:var(--ci-orange)}
@media(max-width:850px){.nav{background:#fff;border-color:var(--ci-line)}}

/* Main site and all Immobilier pages. Specific selectors override their older inline style blocks. */
.departments{background:#f7faf7}
body:not(.immo-page)>.site-header{flex-wrap:wrap}
body:not(.immo-page) .hero{background:linear-gradient(rgba(5,58,36,.68),rgba(5,58,36,.82)),url("assets/tvbci-hero.jpg") center center/cover no-repeat}
.immo-page{background:#f7faf7!important;color:var(--ci-ink)!important}
.immo-page .immo-brand,.immo-page .immo-header a{color:var(--ci-orange)!important}
.immo-page .immo-card{background:#fff!important;border-color:var(--ci-line)!important;box-shadow:0 8px 24px rgb(21 52 42 / 4%)}
.immo-page .immo-detail,.immo-page .rental-option{background:var(--ci-soft)!important;border-color:var(--ci-line)!important;color:var(--ci-ink)}
.immo-page .immo-label,.immo-page .immo-detail strong{color:var(--ci-green)!important}
.immo-page .immo-card h1,.immo-page .immo-card h2,.immo-page .immo-card h3,.immo-page .rental-table th{color:var(--ci-orange)!important}
.immo-page .immo-price{color:var(--ci-orange)!important;background:var(--ci-soft);border:1px solid var(--ci-green);border-radius:12px;padding:12px 16px;text-align:center;overflow-wrap:anywhere}
.immo-page .immo-note,.immo-page .immo-footer{color:var(--ci-muted)!important}
.immo-page .immo-btn{background:var(--ci-button)!important;color:#fff!important;border:1px solid var(--ci-button)}
.immo-page .immo-btn:hover{background:#943408!important}
.immo-page .immo-hero{background:linear-gradient(rgba(5,58,36,.66),rgba(5,58,36,.80)),url("assets/immobilier-hero.jpg") center center/cover no-repeat!important}
.immo-page .immo-hero h1,.immo-page .immo-hero p,.immo-page .immo-hero .immo-label{color:#fff!important}
.immo-page .rental-table th,.immo-page .rental-table td{border-color:var(--ci-line)!important}
@media(max-width:600px){.immo-header{gap:14px;flex-wrap:wrap}.immo-brand{overflow-wrap:anywhere}.immo-page .immo-price{font-size:clamp(22px,6vw,29px)}.site-header nav{flex-wrap:wrap}}

/* Clear main-site hero: show the photograph at its natural ratio instead of
   enlarging a landscape image to fill a tall mobile text banner. */
body:not(.immo-page) .hero{display:block;min-height:0;padding:0;text-align:center;background:var(--ci-green,#087a48)}
body:not(.immo-page) .hero-content{max-width:none;width:100%;margin:0;transform:none}
body:not(.immo-page) .ci-hero-visual{position:relative;width:100%;overflow:hidden}
body:not(.immo-page) .ci-hero-photo{display:block;width:100%;height:auto;max-height:720px;object-fit:cover;object-position:center}
body:not(.immo-page) .ci-hero-heading{position:absolute;inset:0 0 auto;padding:30px 20px 65px;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.75)}
body:not(.immo-page) .hero .eyebrow,body:not(.immo-page) .hero h1,body:not(.immo-page) .hero .hero-text,body:not(.immo-page) .hero .hero-actions{transform:none}
body:not(.immo-page) .hero .eyebrow{color:#fff;margin:0 0 12px;font-size:clamp(10px,1.4vw,13px);letter-spacing:2px}
body:not(.immo-page) .hero h1{color:#fff;margin:0 auto;font-size:clamp(24px,4.2vw,42px);line-height:1.18;max-width:850px}
body:not(.immo-page) .hero .hero-text{color:#fff;max-width:850px;margin:0 auto;padding:26px 24px 0;font-size:16px;line-height:1.7}
body:not(.immo-page) .hero .hero-actions{margin:0;padding:24px 16px 32px}
@media(max-width:600px){body:not(.immo-page) .ci-hero-heading{padding:18px 16px 35px}body:not(.immo-page) .hero .eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:9px}body:not(.immo-page) .hero h1{font-size:clamp(22px,6vw,30px)}body:not(.immo-page) .hero .hero-text{font-size:15px;padding:22px 20px 0}body:not(.immo-page) .hero .hero-actions{gap:10px}body:not(.immo-page) .hero .btn{padding:12px 16px}}

/* Keep the skyline clear; center the slogan over the foreground water. */
body:not(.immo-page) .ci-hero-heading{inset:auto 0 6%;padding:0 16px;background:none;text-align:center;text-shadow:0 2px 5px #000,0 0 12px rgba(0,0,0,.7)}
body:not(.immo-page) .ci-hero-photo{max-height:none;object-fit:contain}
@media(max-width:600px){body:not(.immo-page) .ci-hero-heading{inset:auto 0 6%;padding:0 12px}body:not(.immo-page) .ci-hero-heading h1{font-size:clamp(18px,5.5vw,30px);line-height:1.2}}

/* Visible department actions: green buttons with a slow floating pulse. */
body:not(.immo-page) .department-grid .department-card > a{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:48px;max-width:100%;padding:12px 18px;margin-top:8px;
 border:2px solid #087a48;border-radius:12px;background:#087a48;
 color:#fff;text-decoration:none;font-weight:800;line-height:1.4;text-align:center;
 overflow-wrap:anywhere;animation:ci-department-pulse 2.8s ease-in-out infinite;
}
@keyframes ci-department-pulse{
 0%,100%{transform:translateY(0);background-color:#087a48;box-shadow:0 3px 10px rgba(8,122,72,.18),0 0 0 0 rgba(8,122,72,.24)}
 50%{transform:translateY(-3px);background-color:#096d42;box-shadow:0 7px 16px rgba(8,122,72,.25),0 0 0 7px rgba(8,122,72,.06)}
}
body:not(.immo-page) .department-grid .department-card > a:hover,
body:not(.immo-page) .department-grid .department-card > a:focus-visible{
 animation-play-state:paused;background:#075f39;color:#fff;
 outline:3px solid #b6410b;outline-offset:4px;
}
@media(prefers-reduced-motion:reduce){
 body:not(.immo-page) .department-grid .department-card > a{animation:none;transform:none;box-shadow:0 3px 10px rgba(8,122,72,.18)}
}