/* =========================================================
   TEJI INTERNATIONAL P.L.C. — Corporate Website
   Design tokens
   ---------------------------------------------------------
   Display type : "Fraunces"  (elegant, has real personality)
   Body type    : "Inter"     (clean, highly readable)
   Util/eyebrow : "Inter" upper-case, tracked
   Signature element: the "ledger line" — a thin gold rule that
   draws itself in on scroll, used as a section marker and as
   the underline motif throughout (a nod to trade ledgers and
   the horizon line of a trading floor / warehouse yard).
   ========================================================= */

:root{
  --navy:        #0B2436;
  --navy-2:      #0F2E44;
  --charcoal:    #15202B;
  --gold:        #C8983E;
  --gold-soft:   #E4C081;
  --red:         #9A2B2B;
  --off-white:   #FAF7F2;
  --paper:       #F4EFE6;
  --gray-bg:     #F1EEE9;
  --border:      #E2DCD0;
  --border-dark: rgba(255,255,255,0.12);
  --text:        #1B232B;
  --text-soft:   #51606B;
  --text-on-dark:#EFEAE0;
  --text-on-dark-soft: #AFC0CC;

  --radius: 2px;
  --maxw: 1180px;

  --shadow-soft: 0 18px 40px -20px rgba(11,36,54,0.25);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color: var(--text);
  background: var(--off-white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; background: #0F2E44; }

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  color: var(--navy);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
}

a{ color: inherit; text-decoration: none; }
p{ margin: 0 0 1em 0; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 28px; height: 1px;
  background: var(--gold);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--gold-soft); }

/* ---------- the signature "ledger line" ---------- */
.ledger{
  position: relative;
  width: 64px;
  height: 2px;
  background: var(--border);
  margin: 22px 0 26px 0;
  overflow: hidden;
}
.ledger::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 0%;
  background: var(--gold);
  transition: width 1.1s var(--ease);
}
.in-view .ledger::after{ width: 100%; }
.ledger.on-dark{ background: rgba(255,255,255,0.18); }

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 14px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
button.btn{ font: inherit; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-primary, button.btn-primary{ background: var(--gold); color: var(--navy); }
.btn-primary:hover, button.btn-primary:hover{ background: var(--gold-soft); transform: translateY(-1px); }
.btn-outline{ border-color: rgba(255,255,255,0.5); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.btn-outline-dark{ border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover{ background: var(--navy); color:#fff; }
.btn-block{ width:100%; justify-content:center; }

/* ============== HEADER / NAV ============== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:38px; height:38px; flex:0 0 38px; }
.brand-text{ font-family:'Fraunces',serif; font-weight:600; font-size: 16.5px; color: var(--navy); line-height:1.15; }
.brand-text small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size: 9.5px; letter-spacing:0.12em; color: var(--text-soft); text-transform:uppercase; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{
  font-size: 13.5px; font-weight: 600; letter-spacing:.02em;
  color: var(--text); position:relative; padding: 6px 0; white-space: nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--navy); }

.nav-cta{ display:flex; align-items:center; gap:22px; }
.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.hamburger span{ width:24px; height:2px; background: var(--navy); display:block; transition: all .3s var(--ease); }

.mobile-menu{
  position: fixed; inset: 84px 0 0 0; background: var(--off-white);
  transform: translateX(100%); transition: transform .4s var(--ease);
  z-index: 480; overflow-y:auto;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu .container{ padding-top: 28px; padding-bottom: 40px; }
.mobile-menu a{
  display:block; font-family:'Fraunces',serif; font-size: 26px; font-weight:600;
  padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--navy);
}
.mobile-menu .btn{ margin-top: 26px; }

body.menu-open{ overflow:hidden; }

@media (max-width: 920px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* ============== HERO ============== */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:center;
  color: #fff;
  background: #0a1c29;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,20,30,0.78) 0%, rgba(8,20,30,0.55) 45%, rgba(8,20,30,0.9) 100%);
}
.hero-content{ position:relative; z-index:2; padding: 120px 0 90px; }
.hero-content .eyebrow{ color: var(--gold-soft); }
.hero h1{
  color:#fff; font-size: clamp(34px, 5.4vw, 60px); font-weight:600;
  max-width: 820px;
}
.hero p.lede{
  margin-top: 22px; max-width: 560px; font-size: 17px;
  color: rgba(255,255,255,0.82); font-weight:400;
}
.hero-buttons{ display:flex; gap:16px; margin-top: 38px; flex-wrap:wrap; }
.hero-tagline{
  margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform:uppercase; color: rgba(255,255,255,0.65);
}

.page-hero{
  position:relative; color:#fff; background:#0a1c29; min-height: 46vh; display:flex; align-items:center;
}
.page-hero .hero-media img{ width:100%;height:100%;object-fit:cover; }
.page-hero-content{ position:relative; z-index:2; padding: 130px 0 56px; }
.page-hero h1{ color:#fff; font-size: clamp(30px,4.6vw,46px); }
.page-hero p{ color: rgba(255,255,255,0.8); max-width: 600px; margin-top:14px; font-size:16px; }
.crumb{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:14px; display:block; }

/* ============== SECTIONS (generic) ============== */
section{ padding: 100px 0; }
@media (max-width: 720px){ section{ padding: 64px 0; } }

.section-head{ max-width: 680px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 38px); }
.section-head p{ margin-top: 16px; color: var(--text-soft); font-size: 16px; }

.bg-light{ background: var(--off-white); }
.bg-gray{ background: var(--gray-bg); }
.bg-navy{ background: var(--navy); color: var(--text-on-dark); }
.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.bg-navy p{ color: var(--text-on-dark-soft); }

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

/* ============== STATS ============== */
.stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat-item{
  padding: 40px 24px; text-align:center; border-left:1px solid var(--border);
}
.stat-item:first-child{ border-left:none; }
.stat-num{ font-family:'Fraunces',serif; font-size: clamp(28px,4vw,40px); font-weight:600; color: var(--navy); }
.stat-lbl{ margin-top:8px; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color: var(--text-soft); }
@media (max-width: 760px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(3){ border-left:none; }
  .stat-item{ border-bottom:1px solid var(--border); }
}

/* ============== CARDS: business areas ============== */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

.area-card{
  position:relative; overflow:hidden; border-radius: var(--radius);
  background: var(--navy-2); min-height: 270px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 26px; isolation:isolate;
  transition: transform .5s var(--ease);
}
.area-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .7s var(--ease); }
.area-card::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,36,54,0.15) 0%, rgba(8,17,25,0.92) 88%); }
.area-card:hover{ transform: translateY(-5px); }
.area-card:hover img{ transform: scale(1.06); }
.area-card .ac-num{ font-size:11px; letter-spacing:.12em; color: var(--gold-soft); text-transform:uppercase; margin-bottom:10px; }
.area-card h3{ color:#fff; font-size:19px; }

/* ============== STORY / SPLIT ============== */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
@media (max-width: 880px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split-media{ position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/5; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split.reverse .split-media{ order:2; }
.split h2{ font-size: clamp(26px,3.2vw,36px); margin-bottom: 4px; }
.split p{ color: var(--text-soft); }

/* ============== FEATURE CARDS (experience) ============== */
.feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 980px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-card{
  padding: 30px 24px; background:#fff; border:1px solid var(--border);
  transition: border-color .3s, transform .3s var(--ease);
}
.feature-card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.feature-icon{ width:40px; height:40px; margin-bottom: 18px; }
.feature-card h4{ font-size:16px; margin-bottom:8px; }
.feature-card p{ font-size: 14px; color: var(--text-soft); margin:0; }

/* ============== ROUTE / SOURCING MAP ============== */
.route-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px; margin: 44px 0 8px 0; flex-wrap: wrap;
}
.route-node{ text-align:center; flex:1; min-width: 90px; }
.route-dot{
  width:54px; height:54px; border-radius:50%; margin:0 auto 12px auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--navy); color:#fff; font-weight:700; font-size:12.5px;
  border: 1px solid rgba(255,255,255,0.12);
}
.route-dot.dest{ background: var(--gold); color: var(--navy); }
.route-line-svg{ flex: 1 1 60px; min-width:40px; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); }
.route-name{ font-size: 13px; font-weight:600; color: var(--navy); }

.flow-row{
  display:flex; align-items:stretch; gap: 18px; margin-top: 50px; flex-wrap:wrap;
}
.flow-box{
  flex:1; min-width: 220px; background:#fff; border:1px solid var(--border); padding: 26px 22px; text-align:center;
}
.flow-box.mid{ background: var(--navy); color:#fff; border-color: var(--navy); }
.flow-box .fb-lbl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); margin-bottom:8px; }
.flow-box.mid .fb-lbl{ color: var(--gold-soft); }
.flow-box h4{ font-size:15.5px; }
.flow-arrow{ display:flex; align-items:center; justify-content:center; color: var(--gold); font-size: 20px; }
@media (max-width: 780px){ .flow-row{ flex-direction:column; } .flow-arrow{ transform: rotate(90deg); } }

.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 20px; }
.tag{ border:1px solid var(--border); padding: 8px 16px; font-size:13px; font-weight:600; border-radius: 20px; color: var(--navy); }

/* ============== VALUES ============== */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 880px){ .value-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }
.value-card{ padding: 30px; border-top: 2px solid var(--gold); background:#fff; }
.value-card h4{ font-size:17px; margin-bottom:8px; }
.value-card p{ font-size:14px; color:var(--text-soft); margin:0; }

/* ============== WHY WORK WITH (numbered) ============== */
.why-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border-dark); border:1px solid var(--border-dark); }
@media (max-width:760px){ .why-grid{ grid-template-columns: 1fr; } }
.why-item{ background: var(--navy); padding: 34px 30px; display:flex; gap:20px; }
.why-num{ font-family:'Fraunces',serif; font-size: 30px; color: var(--gold); font-weight:600; line-height:1; flex:0 0 auto; }
.why-item h4{ color:#fff; font-size:16px; margin-bottom:6px; }
.why-item p{ font-size:13.6px; margin:0; color: var(--text-on-dark-soft); }

/* ============== NEWS ============== */
.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width:900px){ .news-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:620px){ .news-grid{ grid-template-columns: 1fr; } }
.news-card{ background:#fff; border:1px solid var(--border); display:flex; flex-direction:column; }
.news-media{ aspect-ratio: 16/10; overflow:hidden; }
.news-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.news-card:hover .news-media img{ transform: scale(1.05); }
.news-body{ padding: 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-cat{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); font-weight:700; }
.news-body h3{ font-size:17px; line-height:1.35; }
.news-body p{ font-size:13.8px; color:var(--text-soft); margin:0; flex:1; }
.news-readmore{ font-size:13px; font-weight:700; color:var(--navy); display:inline-flex; align-items:center; gap:6px; margin-top:8px; }

/* ============== CONTACT CTA ============== */
.cta-band{ text-align:center; padding: 110px 0; }
.cta-band h2{ color:#fff; font-size: clamp(28px,4vw,42px); max-width:680px; margin:0 auto; }
.cta-band p{ max-width: 560px; margin: 20px auto 0 auto; }
.cta-band .btn{ margin-top: 34px; }

/* ============== FOOTER ============== */
footer.site-footer{ background: var(--charcoal); color: var(--text-on-dark-soft); padding-top: 80px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom:1px solid rgba(255,255,255,0.08); }
@media (max-width: 880px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h5{ color:#fff; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; font-family:'Inter',sans-serif; font-weight:700; }
.footer-grid ul li{ margin-bottom: 10px; font-size: 14px; }
.footer-grid ul li a:hover{ color:#fff; }
.footer-brand{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.footer-brand .brand-text{ color:#fff; }
.footer-brand .brand-text small{ color: rgba(255,255,255,0.5); }
.footer-desc{ font-size:14px; max-width: 320px; }
.footer-quote{ font-family:'Fraunces',serif; font-style:italic; color:#fff; font-size:15px; margin-top:18px; }
.footer-bottom{ display:flex; justify-content:space-between; padding: 26px 0; font-size:12.5px; flex-wrap:wrap; gap:10px; }

/* ============== FORM ============== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items:start; }
@media (max-width: 920px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--navy); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 16px; border:1px solid var(--border); background:#fff;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text); border-radius: var(--radius);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--gold); }
.form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row2{ grid-template-columns:1fr; } }

.info-block{ background: var(--gray-bg); padding: 34px; border-left: 2px solid var(--gold); margin-bottom: 22px; }
.info-block h4{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom: 10px; color:var(--navy); }
.info-block p{ margin:0; font-size:15px; color: var(--text-soft); }

.map-placeholder{
  aspect-ratio: 16/9; background: var(--gray-bg); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center; color: var(--text-soft); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
}

.inquiry-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin: 30px 0 10px 0; }
@media (max-width:880px){ .inquiry-grid{ grid-template-columns: repeat(2,1fr); } }
.inquiry-chip{ border:1px solid var(--border); padding: 16px 12px; text-align:center; font-size:12.6px; font-weight:600; color:var(--navy); }

/* ============== TIMELINE (about) ============== */
.timeline{ position:relative; padding-left: 28px; border-left: 1px solid var(--border); }
.timeline-item{ position:relative; padding-bottom: 42px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--gold); }
.timeline-year{ font-family:'Fraunces',serif; font-weight:600; color: var(--navy); font-size:18px; margin-bottom:6px; }
.timeline-item p{ color: var(--text-soft); margin:0; max-width: 540px; }

/* ============== ORG DEPARTMENTS ============== */
.org-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
@media (max-width: 880px){ .org-grid{ grid-template-columns: repeat(2,1fr); } }
.org-chip{ text-align:center; padding: 24px 10px; border:1px solid var(--border); background:#fff; font-weight:700; font-size:13px; color: var(--navy); letter-spacing:.03em; }

/* misc */
.center-text{ text-align:center; }
.mt-lg{ margin-top: 50px; }