:root{
  --bg:#0B0F14;
  --bg-alt:#111820;
  --bg-alt-2:#1E242C;
  --bg-deep:#08111C;
  --gold:#C6A55A;
  --gold-light:#E4C98A;
  --gold-deep:#B86A32;
  --emerald:#0F6B5C;
  --cream:#F5F3EF;
  --muted:#9C9690;
  --line: rgba(198,165,90,0.22);
  --ivory:#F8F8F6;
  --warm-white:#FFFFFF;
  --stone:#E8E4DA;
  --text-dark:#101418;
  --text-secondary:#5C6470;
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Inter', sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.serif{
  font-family:'Playfair Display', serif;
  font-weight:600;
  letter-spacing:0.005em;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
::selection{background:var(--gold); color:#0a0a0b;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(to bottom, rgba(10,10,11,0.92), rgba(10,10,11,0.85) 60%, rgba(10,10,11,0));
  padding:22px 0 40px;
}
nav{
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:flex; justify-content:space-between; align-items:center;
}
.logomark{display:flex; align-items:center; gap:10px;}
.nav-logo-img{height:32px; width:auto; display:block;}
.footer-logo-img{height:56px; width:auto; display:block;}
.logomark .name{
  font-size:14px; letter-spacing:0.22em; color:var(--cream); font-weight:500;
}
.navlinks{display:flex; gap:36px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase;}
.navlinks a{color:var(--muted); transition:color 0.25s; padding-bottom:4px; border-bottom:1px solid transparent;}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--gold-light); outline:none;}
.navlinks a:focus-visible{text-decoration:underline;}
.navlinks a.active{color:var(--gold-light); border-bottom-color:var(--gold);}
@media (max-width:720px){ .navlinks{gap:18px; font-size:11px;} .logomark .name{display:none;} }
@media (max-width:480px){ .navlinks{gap:12px; font-size:10px;} }

/* ---------- PAGE HERO (non-home) ---------- */
.page-hero{
  padding:150px 0 70px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:clamp(38px, 6vw, 64px);
  margin-top:14px;
  color:var(--cream);
}
.page-hero p{
  margin-top:18px; max-width:560px; color:var(--muted); font-size:16px;
}

/* ---------- HOME HERO ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding:140px 0 80px;
}
.hero .wrap{position:relative; z-index:2;}
.hero-eyebrow{margin-bottom:22px; opacity:0; animation:rise 0.9s 0.15s ease forwards;}
.hero h1{
  font-size:clamp(44px, 8vw, 92px);
  line-height:1.02;
  color:var(--cream);
  max-width:920px;
  opacity:0; animation:rise 0.9s 0.3s ease forwards;
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg, var(--gold-deep), var(--gold-light) 45%, var(--gold) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  margin-top:26px; max-width:480px; color:var(--muted); font-size:17px;
  opacity:0; animation:rise 0.9s 0.45s ease forwards;
}
.hero .actions{
  margin-top:40px; display:flex; gap:18px; flex-wrap:wrap;
  opacity:0; animation:rise 0.9s 0.6s ease forwards;
}
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  border-radius:2px; transition:all 0.3s ease;
}
.btn-primary{background:var(--gold); color:#0a0a0b; font-weight:500;}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--gold-light); transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line); color:var(--cream);}
.btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--gold); color:var(--gold-light);}
.btn:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}

/* trade route line — signature element */
.route-line{
  position:absolute; left:0; right:0; bottom:60px; height:120px; z-index:1;
  opacity:0.5;
}
.route-line svg{width:100%; height:100%;}
.route-line path{
  fill:none; stroke:url(#routeGrad); stroke-width:1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.6s 0.4s ease forwards;
}
.route-line circle{ fill:var(--gold-light); opacity:0; animation:dot 0.6s ease forwards; }
@keyframes draw{ to{stroke-dashoffset:0;} }
@keyframes dot{ to{opacity:1;} }

/* ---------- SECTION SHELL ---------- */
section{padding:120px 0;}
.page-hero + section{padding-top:90px;}
.section-head{margin-bottom:64px; max-width:640px;}
.section-head h2{font-size:clamp(30px,4vw,46px); margin-top:14px; color:var(--cream);}
.hairline{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- HOME TEASERS ---------- */
.teasers{background:var(--bg-alt);}
.teaser-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.teaser-card{background:var(--bg); padding:44px 34px; transition:background 0.3s ease;}
.teaser-card:hover{background:var(--bg-alt-2);}
.teaser-card .eyebrow{margin-bottom:14px;}
.teaser-card h3{font-size:26px; margin-bottom:12px; color:var(--cream);}
.teaser-card p{font-size:14.5px; color:var(--muted); margin-bottom:18px;}
.teaser-card .link{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
.teaser-card .link:hover{color:var(--gold-light);}
@media (max-width:860px){ .teaser-grid{grid-template-columns:1fr;} }

/* ---------- ABOUT ---------- */
.about{background:var(--bg-alt);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.about p{color:var(--muted); font-size:16px; margin-bottom:18px;}
.founder-photo{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; object-position:top center;
  border:2px solid var(--gold); padding:4px;
  margin-bottom:6px;
}
.about-figure{
  border:1px solid var(--line); padding:36px;
  font-family:'Playfair Display', serif; font-style:italic; font-size:22px; color:var(--gold-light);
  display:flex; align-items:center; height:100%;
}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--bg); padding:40px 34px; transition:background 0.3s ease;
}
.service-card:hover{background:var(--bg-alt-2);}
.service-card .tag{font-size:11px; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase;}
.service-card h3{font-size:26px; margin-top:14px; margin-bottom:12px; color:var(--cream);}
.service-card p{font-size:14.5px; color:var(--muted);}
@media (max-width:860px){ .services-grid{grid-template-columns:1fr;} }

/* ---------- MANIFEST (trading) ---------- */
.manifest{background:var(--bg-alt);}
.manifest-list{border-top:1px solid var(--line);}
.manifest-row{
  display:grid; grid-template-columns:100px 1fr 180px; gap:24px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.manifest-row .code{font-size:12px; letter-spacing:0.16em; color:var(--gold); text-transform:uppercase;}
.manifest-row h3{font-size:24px; color:var(--cream); font-weight:500;}
.manifest-row .route{font-size:13px; color:var(--muted); text-align:right; letter-spacing:0.05em;}
@media (max-width:700px){
  .manifest-row{grid-template-columns:1fr; gap:6px;}
  .manifest-row .route{text-align:left;}
}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px;}
.info-block{margin-bottom:30px;}
.info-block .eyebrow{margin-bottom:8px;}
.info-block div{color:var(--cream); font-size:17px;}
.info-block div + div{margin-top:4px; font-size:14px; color:var(--muted);}
form{display:flex; flex-direction:column; gap:18px;}
label{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block;}
input, textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--cream); font-family:'Inter',sans-serif; font-size:15px; padding:10px 2px;
}
input:focus, textarea:focus{outline:none; border-color:var(--gold);}
textarea{resize:vertical; min-height:90px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }

/* ---------- FOOTER ---------- */
footer{padding:48px 0; border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .foot-note{font-size:12.5px; color:var(--muted); letter-spacing:0.03em;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--bg-alt-2); border:2px solid var(--bg);}

/* ---------- CHECKLIST ---------- */
.checklist{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;}
.checklist li{font-size:15px; color:var(--muted); display:flex; gap:10px; align-items:flex-start;}
.checklist li::before{content:"✓"; color:var(--gold); font-weight:600;}
@media (max-width:700px){ .checklist{grid-template-columns:1fr;} }

/* ---------- PROCESS FLOW ---------- */
.flow{border-top:1px solid var(--line);}
.flow-step{
  padding:20px 0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px;
}
.flow-step .num{font-size:12px; color:var(--gold); letter-spacing:0.14em; text-transform:uppercase; width:32px; flex-shrink:0;}
.flow-step .label{font-family:'Playfair Display', serif; font-size:21px; color:var(--cream);}

/* ---------- QUICKLINKS (contact enquiry routing) ---------- */
.quicklinks{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.quicklinks a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:11px 18px; border-radius:3px; transition:all 0.25s;
}
.quicklinks a svg{width:16px; height:16px; flex-shrink:0; color:var(--gold);}
.quicklinks a:hover{color:var(--gold-light); border-color:var(--gold); background:rgba(198,165,90,0.06);}
.wa-btn{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.45);
  transition:transform 0.25s ease, background 0.25s ease;
}
.wa-btn:hover, .wa-btn:focus-visible{background:var(--gold-light); transform:translateY(-2px);}
.wa-btn:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
.wa-btn svg{width:28px; height:28px;}
@media (max-width:480px){
  .wa-btn{right:16px; bottom:16px; width:52px; height:52px;}
  .wa-btn svg{width:24px; height:24px;}
}

/* ---------- LIGHT (EDITORIAL) SECTIONS — placed last for cascade priority ---------- */
.section-light{background:var(--ivory) !important; color:var(--text-dark);}
.section-light h1, .section-light h2, .section-light h3{color:var(--text-dark);}
.section-light p{color:var(--text-secondary);}
.section-light .eyebrow{color:var(--gold-deep);}
.section-light .hairline{border-top-color:rgba(16,20,24,0.12);}
.section-light .checklist li{color:var(--text-secondary);}
.section-light .checklist li::before{color:var(--gold-deep);}
.section-light .about-figure{border-color:rgba(16,20,24,0.14); color:var(--gold-deep);}

/* ---------- METHODOLOGY (clickable/expandable steps) ---------- */
.method-card{cursor:pointer;}
.method-card summary{list-style:none; cursor:pointer;}
.method-card summary::-webkit-details-marker{display:none;}
.method-card summary::after{
  content:"+"; float:right; font-size:20px; color:var(--gold);
  margin-top:-4px;
}
.method-card[open] summary::after{content:"–";}
.method-card .method-more{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px;
}

/* ---------- ADVISORY STORY CARDS (image + hover reveal) ---------- */
.story-card{position:relative; overflow:hidden; min-height:300px; padding:0 !important; cursor:pointer;}
.story-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(0.38) saturate(0.9);
  transition:filter 0.45s ease, transform 0.6s ease;
}
.story-card:hover .story-img{filter:brightness(0.24) saturate(1); transform:scale(1.06);}
.story-overlay{
  position:relative; z-index:2; padding:28px 30px; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:300px;
}
.story-overlay .tag{color:var(--gold-light);}
.story-overlay h3{color:#fff; margin:10px 0 8px;}
.story-text{
  color:rgba(255,255,255,0.88); font-size:14px; line-height:1.6;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height 0.45s ease, opacity 0.4s ease;
}
.story-card:hover .story-text, .story-card:focus-within .story-text{max-height:140px; opacity:1;}

/* ---------- QUICKLINKS MAGNIFY ON HOVER ---------- */
.quicklinks a{transform:scale(1); transition:all 0.25s ease;}
.quicklinks a:hover{
  color:var(--gold-light); border-color:var(--gold);
  background:rgba(198,165,90,0.08); transform:scale(1.06);
  box-shadow:0 6px 18px rgba(198,165,90,0.18);
}

/* ---------- SLIDE-OUT SIDEBAR NAVIGATION ---------- */
.menu-toggle{display:none;}
nav{justify-content:space-between;}
.hamburger-btn{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream);
}
.hamburger-btn .bars{width:24px; height:14px; position:relative; flex-shrink:0;}
.hamburger-btn .bars span{position:absolute; left:0; right:0; height:2px; background:var(--gold); transition:all 0.25s;}
.hamburger-btn .bars span:nth-child(1){top:0;}
.hamburger-btn .bars span:nth-child(2){top:6px;}
.hamburger-btn .bars span:nth-child(3){top:12px;}

.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(5,5,6,0.68); z-index:80; cursor:pointer;}
.menu-toggle:checked ~ .sidebar-overlay{display:block;}

.sidebar-panel{
  position:fixed; top:0; right:-340px; width:320px; max-width:86vw; height:100%;
  background:var(--bg-alt); border-left:1px solid var(--line); z-index:90;
  transition:right 0.45s cubic-bezier(.2,.8,.2,1); overflow-y:auto; padding:30px 26px 40px;
}
.menu-toggle:checked ~ .sidebar-panel{right:0;}
.sidebar-close{
  display:flex; justify-content:flex-end; font-size:26px; color:var(--muted);
  cursor:pointer; margin-bottom:26px; line-height:1;
}
.sidebar-close:hover{color:var(--gold-light);}
.sidebar-group{margin-bottom:30px;}
.sidebar-group .group-label{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.sidebar-group a{
  display:block; font-family:'Playfair Display',serif; font-size:19px; color:var(--cream);
  padding:9px 0; border-bottom:1px solid var(--line); transition:color 0.2s, padding-left 0.2s;
}
.sidebar-group a:hover{color:var(--gold-light); padding-left:6px;}
.sidebar-group a.active{color:var(--gold-light);}
.sidebar-cta{margin-top:8px; display:flex; flex-direction:column; gap:10px;}
.sidebar-cta a{font-size:12px; color:var(--muted); letter-spacing:0.04em;}

/* ---------- SOPHISTICATED CONTACT LAYOUT ---------- */
.contact-cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:8px;
}
.contact-card{background:var(--bg); padding:32px 28px;}
.contact-card svg{width:26px; height:26px; color:var(--gold); margin-bottom:16px;}
.contact-card .eyebrow{margin-bottom:12px;}
.contact-line{font-size:14.5px; color:var(--cream); margin-bottom:6px; line-height:1.5;}
.contact-line span{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
@media (max-width:860px){ .contact-cards{grid-template-columns:1fr;} }

.quicklinks-row{margin-top:40px;}
.contact-form-wrap{max-width:560px;}

/* ---------- PAGE LOAD FADE ---------- */
body{animation:pageFadeIn 0.6s ease both;}
@keyframes pageFadeIn{ from{opacity:0;} to{opacity:1;} }

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* Staggered entrance for grouped items within a grid/list */
.teaser-grid .reveal:nth-child(1), .services-grid .reveal:nth-child(1), .manifest-list .reveal:nth-child(1), .contact-cards .reveal:nth-child(1){transition-delay:0s;}
.teaser-grid .reveal:nth-child(2), .services-grid .reveal:nth-child(2), .manifest-list .reveal:nth-child(2), .contact-cards .reveal:nth-child(2){transition-delay:0.1s;}
.teaser-grid .reveal:nth-child(3), .services-grid .reveal:nth-child(3), .manifest-list .reveal:nth-child(3), .contact-cards .reveal:nth-child(3){transition-delay:0.2s;}
.teaser-grid .reveal:nth-child(4), .services-grid .reveal:nth-child(4), .manifest-list .reveal:nth-child(4){transition-delay:0.3s;}
.teaser-grid .reveal:nth-child(5), .services-grid .reveal:nth-child(5), .manifest-list .reveal:nth-child(5){transition-delay:0.4s;}
.teaser-grid .reveal:nth-child(6), .services-grid .reveal:nth-child(6), .manifest-list .reveal:nth-child(6){transition-delay:0.5s;}

@media (prefers-reduced-motion: reduce){
  body{animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- HAMBURGER TO X MORPH ---------- */
.menu-toggle:checked ~ header .hamburger-btn .bars span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.menu-toggle:checked ~ header .hamburger-btn .bars span:nth-child(2){
  opacity:0;
}
.menu-toggle:checked ~ header .hamburger-btn .bars span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* ---------- REFINED NAV UNDERLINE ---------- */
.sidebar-group a{position:relative;}
.sidebar-group a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width 0.35s ease;
}
.sidebar-group a:hover::after, .sidebar-group a.active::after{width:100%;}

/* ---------- FOOTER SOCIAL LINKS ---------- */
.social-links{display:flex; gap:14px;}
.social-links a{
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  transition:all 0.25s ease;
}
.social-links a:hover{color:var(--gold-light); border-color:var(--gold); transform:translateY(-2px);}

/* ---------- PREMIUM PAGE LOADER ---------- */
#jc-loader{
  position:fixed; inset:0; z-index:9999; background:#0B0F14;
  display:flex; align-items:center; justify-content:center;
  animation: jcLoaderFade 0.35s ease 1.15s forwards;
}
#jc-loader img{ height:56px; opacity:0; animation: jcLoaderLogo 0.9s ease 0.1s forwards; }
#jc-loader .jc-sweep{
  position:absolute; top:0; bottom:0; width:120px; left:-140px;
  background:linear-gradient(100deg, transparent, rgba(198,165,90,0.35), transparent);
  animation: jcSweep 1.1s ease 0.15s forwards;
}
@keyframes jcLoaderLogo{ to{opacity:1;} }
@keyframes jcSweep{ to{ left:110%; } }
@keyframes jcLoaderFade{ to{opacity:0; visibility:hidden; pointer-events:none;} }

@media (prefers-reduced-motion: reduce){
  #jc-loader{ display:none; }
}

/* ---------- CUSTOM CURSOR (desktop, fine pointer only) ---------- */
.jc-custom-cursor, .jc-custom-cursor a, .jc-custom-cursor button{ cursor:none; }
.jc-cursor-ring{
  position:fixed; top:0; left:0; width:32px; height:32px; margin:-16px 0 0 -16px;
  border:1.5px solid var(--gold); border-radius:50%; pointer-events:none; z-index:9998;
  transition:width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  mix-blend-mode:difference;
}
.jc-cursor-ring.jc-cursor-active{
  width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(198,165,90,0.12);
}
.jc-cursor-dot{
  position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  background:#F5F3EF; border-radius:50%; pointer-events:none; z-index:9998;
}
@media (hover:none), (pointer:coarse){
  .jc-cursor-ring, .jc-cursor-dot{ display:none; }
}

/* ---------- HERO VIDEO: reduced-motion fallback ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
}