/*
  J Y & CO website identity — aligned to the UAE build
  Palette: process-yellow #FFED00 + charcoal, with Jost (display) + Poppins (body).
  This sheet loads last on every page and overrides the per-page inline styles.
  Content, markup and functionality are untouched — this is styling only.
*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --display:"Century Gothic","Jost","Futura",ui-sans-serif,system-ui,sans-serif;
  --body:"Poppins",ui-sans-serif,system-ui,sans-serif;

  --jy-yellow:#ffed00;
  --jy-yellow-dark:#e6d500;
  --jy-yellow-hover:#e6d500;
  --jy-yellow-soft:#fffbe0;
  --jy-logo-grey:#6e6e6e;
  --jy-grey:#6e6e6e;
  --jy-grey-dark:#606060;

  --jy-charcoal:#26261f;
  --jy-black:#1a1a18;
  --jy-ink:#1a1a18;
  --jy-ink-soft:#26261f;

  --jy-gold:#ffed00;
  --jy-gold-dark:#e6d500;
  --jy-gold-hover:#e6d500;
  --jy-gold-soft:#fffbe0;

  --text:#242628;
  --muted:#6e7278;
  --bg:#f5f4f0;
  --surface:#ffffff;
  --border:#e3e2dd;
}

html{accent-color:var(--jy-yellow)}
body{
  font-family:var(--body) !important;
  color:var(--text);
  background:var(--bg);
  font-weight:400;
}

/* ===== Typography: geometric display + Poppins body (UAE build) ===== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--display) !important;
  font-weight:500 !important;
  letter-spacing:-.01em;
}
.hero-kicker,
.eyebrow,
.page-hero .page-subtitle,
.hero-badge{
  font-family:var(--display) !important;
}
.btn,.btn-primary,.btn-ghost,
button,input,select,textarea{
  font-family:var(--body) !important;
}

/* Original logo in a restrained white box (kept for dark headers) */
.nav-logo,
.navbar_logo{
  display:flex !important;
  align-items:center !important;
}

.logo-link,
.navbar_logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 12px !important;
  margin:0 !important;
  background:#ffffff !important;
  border:1px solid rgba(110,110,110,.18) !important;
  border-radius:10px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.14) !important;
  text-decoration:none !important;
}

.logo-link picture{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.logo-image,
.navbar_logo img{
  display:block !important;
  width:auto !important;
  height:62px !important;
  max-width:100% !important;
  max-height:68px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

/* ===== Dark branded bands: UAE charcoal (was logo-grey) ===== */
.hero{
  background:#1a1a18 !important;
}
.hero::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,#26261f 0%,#1a1a18 55%,#141412 100%) !important;
  opacity:1 !important;
  z-index:0 !important;
}
.hero::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  mask:none !important;
  -webkit-mask:none !important;
}

.page-hero,
.expertise,
.home-cta-card{
  background:linear-gradient(135deg,#26261f 0%,#1a1a18 55%,#141412 100%) !important;
  color:#ffffff !important;
}

.hero-kicker,
.page-hero h1,
.page-hero h2,
.page-hero p,
.page-hero .page-subtitle,
.page-hero .hero-badge,
.expertise h2,
.expertise .intro,
.home-cta-card h2,
.home-cta-card p{
  color:#ffffff !important;
}

.jy-rail{
  background:rgba(26,26,24,.92) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Brand interaction palette */
a{text-decoration-color:var(--jy-yellow-dark)}
a:hover{text-decoration-color:var(--jy-yellow)}
*:focus-visible{
  outline:3px solid rgba(255,237,0,.70) !important;
  outline-offset:3px;
}

/* ===== Buttons: UAE shape (8px radius, medium weight, darken on hover) ===== */
.btn,
.btn-primary,
.btn-ghost,
button[type="submit"],
input[type="submit"],
input[type="button"]{
  border-radius:8px !important;
  font-weight:500 !important;
}
.btn-primary,
button[type="submit"],
input[type="submit"],
input[type="button"]{
  background:var(--jy-yellow) !important;
  color:var(--jy-black) !important;
  border-color:var(--jy-yellow) !important;
}
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background:var(--jy-yellow-dark) !important;
  color:var(--jy-black) !important;
}

.rail-link:hover,
.jy-mobile-menu a:hover{
  background:rgba(255,237,0,.14) !important;
  border-color:rgba(255,237,0,.44) !important;
}
.rail-link.active,
.jy-mobile-menu a.active{
  background:var(--jy-yellow) !important;
  color:var(--jy-black) !important;
  border-color:var(--jy-yellow) !important;
}
.nav-toggle span{background:#ffffff !important}

/* Do not impose a global box on forms */
form{background:inherit}
form > div{background:inherit}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--jy-yellow-dark) !important;
  box-shadow:0 0 0 3px rgba(255,237,0,.16) !important;
  outline:none;
}

/* ===== Light section tints aligned to UAE paper ===== */
.soft{background:#efeee8 !important}
.tint{background:#f5f4f0 !important}

.feature{border-left-color:var(--jy-yellow) !important}
footer,.site-footer,.footer{border-top-color:var(--jy-yellow) !important}

@media(max-width:768px){
  .logo-link,
  .navbar_logo a{
    padding:6px 9px !important;
    border-radius:8px !important;
    box-shadow:0 4px 12px rgba(0,0,0,.12) !important;
  }
  .logo-image,
  .navbar_logo img{
    height:44px !important;
    max-height:48px !important;
  }
}