/* Noble Steed public landing experience v34.1 */

:root{
  --ix-surface:rgba(255,255,255,.86);
  --ix-shadow:0 22px 54px -32px rgba(75,28,19,.38);
  --ix-shadow-strong:0 28px 64px -30px rgba(75,28,19,.48);
}

html{scroll-padding-top:96px;}
body{min-width:320px;}

.index-skip-link{
  position:fixed;
  top:12px;
  right:12px;
  z-index:200;
  transform:translateY(-180%);
  padding:10px 14px;
  border-radius:12px;
  color:#fff;
  background:var(--copper);
  box-shadow:var(--shadow-copper);
  transition:transform .2s var(--ease);
}
.index-skip-link:focus{transform:translateY(0);color:#fff;}

header.site{isolation:isolate;}
header.site.scrolled{box-shadow:0 12px 28px -22px rgba(75,28,19,.46)!important;}
.brand:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid rgba(156,109,69,.48);
  outline-offset:3px;
}

/* The desktop dropdown is also genuinely usable by keyboard and touch. */
#clientLoginMenu.is-open{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;}
#clientLoginToggle[aria-expanded="true"]{border-color:var(--copper)!important;color:var(--copper);background:var(--copper-tint);}

.mobile-menu-trigger{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.mobile-menu-trigger .material-symbols-outlined{font-size:23px;}
.mobile-menu-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  opacity:0;
  visibility:hidden;
  background:rgba(38,16,13,.42);
  backdrop-filter:blur(5px);
  transition:opacity .24s var(--ease),visibility .24s var(--ease);
}
.mobile-nav-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:90;
  width:min(88vw,360px);
  height:100dvh;
  padding:24px 20px max(24px,env(safe-area-inset-bottom));
  overflow:auto;
  transform:translateX(105%);
  background:rgba(255,253,250,.98);
  box-shadow:-18px 0 50px -24px rgba(38,16,13,.55);
  transition:transform .28s var(--ease-out);
}
.mobile-nav-drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);}
.mobile-nav-drawer .drawer-title{font-family:'El Messiri',sans-serif;font-weight:700;font-size:19px;color:var(--ink);}
.mobile-nav-drawer .drawer-close{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.mobile-nav-drawer nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:18px 0;}
.mobile-nav-drawer nav a{padding:12px 13px;border-radius:12px;font-weight:700;color:var(--ink-2);}
.mobile-nav-drawer nav a:hover{background:var(--copper-tint);color:var(--copper);}
.mobile-nav-drawer .drawer-actions{display:grid;gap:9px;padding-top:12px;border-top:1px solid var(--line);}
.mobile-nav-drawer .drawer-actions .btn{width:100%;min-height:48px;}
body.index-menu-open{overflow:hidden;}
body.index-menu-open .mobile-menu-overlay{opacity:1;visibility:visible;}
body.index-menu-open .mobile-nav-drawer{transform:translateX(0);}

/* Hero: a clear primary action and trust details without overloading the headline. */
.hero{padding-bottom:42px;}
.hero .hero-cta a{min-height:56px;text-decoration:none;}
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  color:var(--ink-2);
  font-size:12px;
  font-weight:700;
}
.hero-proof span{display:inline-flex;align-items:center;gap:6px;}
.hero-proof span::before{content:'✓';width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--copper);background:var(--copper-tint);font-size:10px;}
.hero-visual .animate-bounce{animation-duration:3.2s!important;}

/* A short path chooser catches the three main audiences before the long page. */
.journey-section{padding:0 0 76px!important;background:transparent;}
.journey-shell{
  padding:26px;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(253,248,242,.87));
  box-shadow:var(--ix-shadow);
}
.journey-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;}
.journey-intro h2{font-size:clamp(22px,2.5vw,31px);margin:0;color:var(--ink);}
.journey-intro p{max-width:470px;margin:0;color:var(--ink-2);font-size:14px;line-height:1.8;}
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.journey-card{
  display:flex;
  flex-direction:column;
  min-height:192px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.74);
  color:var(--ink);
  box-shadow:0 12px 26px -24px rgba(75,28,19,.44);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.journey-card:hover{transform:translateY(-4px);border-color:rgba(119,14,19,.24);box-shadow:var(--ix-shadow-strong);color:var(--ink);}
.journey-card .journey-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-radius:14px;color:var(--copper);background:var(--copper-tint);}
.journey-card:nth-child(2) .journey-icon{color:var(--gold-deep);background:var(--cream-3);}
.journey-card:nth-child(3) .journey-icon{color:#1d6b5a;background:#e9f4ef;}
.journey-card h3{font-size:18px;margin-bottom:6px;}
.journey-card p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.7;}
.journey-card .journey-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:17px;color:var(--copper);font-size:12px;font-weight:800;}
.journey-card .journey-link .material-symbols-outlined{font-size:17px;transition:transform .2s var(--ease);}
.journey-card:hover .journey-link .material-symbols-outlined{transform:translateX(-4px);}

/* Give the long landing page a calmer rhythm and stable targets under the fixed header. */
main section[id]{scroll-margin-top:104px;}
.trust-bar{background:linear-gradient(90deg,var(--cream-2),#fff,var(--cream-2));}
.prod-card,.faq-item,[data-landing-about-detail]{box-shadow:var(--shadow-sm);}
.prod-card:hover,.faq-item:hover{border-color:rgba(119,14,19,.18);}

/* Testimonial controls are made functional by index-experience.js. */
#testimonialSlider{overflow:hidden;border-radius:var(--radius-lg);}
#testimonialSlider .slider-track{direction:ltr;}
#testimonialSlider .testimonial-card{direction:rtl;}
#testimonialSlider .btn-nav{transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease)!important;}
#testimonialSlider .btn-nav:hover{transform:translateY(-2px);background:var(--copper)!important;color:#fff!important;}
#testimonialSlider .dots button{width:10px;height:10px;padding:0;border-radius:50%;background:var(--line-2);transition:transform .2s var(--ease),background .2s var(--ease);}
#testimonialSlider .dots button[aria-current="true"]{background:var(--copper);transform:scale(1.25);}

/* The two floating controls cannot obscure each other on small screens. */
.floating-cta{display:inline-flex;align-items:center;gap:7px;animation:none!important;border-radius:16px!important;}
.whatsapp-bubble{bottom:28px;left:28px;}

@media (max-width:1024px){
  .journey-section{padding-bottom:58px!important;}
  .journey-intro{align-items:flex-start;flex-direction:column;}
}

@media (max-width:900px){
  header.site{padding:13px 0!important;}
  header.site .header-left{gap:6px;}
  header.site .header-left > .flex{display:none;}
  header.site #clientLoginToggle{min-height:40px;padding:8px 11px!important;}
  header.site #clientLoginToggle span:nth-child(2){display:none;}
  header.site .brand-mark{width:44px;height:44px;border-radius:13px;}
  header.site .brand-mark img{width:38px;height:38px;}
  header.site .brand-text .sub{display:none;}
  .mobile-menu-trigger{display:inline-flex;}
  .hero{padding-top:104px;}
  .hero-grid{min-height:auto;}
  .journey-grid{grid-template-columns:1fr;}
  .journey-card{min-height:154px;}
}

@media (max-width:640px){
  .wrap{padding-inline:18px;}
  .hero{padding-top:96px;padding-bottom:28px;}
  .hero-visual{height:340px!important;}
  .gate-scene{max-width:300px;}
  .hero-logo-wrap{width:150px;height:150px;}
  .hero-logo-wrap img{width:132px;height:132px;}
  .hero-text{padding:0;}
  .hero h1{font-size:clamp(33px,10vw,42px)!important;margin-bottom:18px;}
  .hero p.lead{font-size:15px!important;margin-bottom:22px;}
  .hero .hero-cta{display:grid;grid-template-columns:1fr;gap:9px;}
  .hero .hero-cta .btn{width:100%;}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;font-size:10.5px;}
  .hero-text .mt-12{margin-top:28px!important;padding-top:24px!important;}
  .journey-section{padding-bottom:38px!important;}
  .journey-shell{padding:18px;border-radius:22px;}
  .journey-intro h2{font-size:22px;}
  .journey-intro p{font-size:12.5px;}
  .journey-card{padding:18px;border-radius:16px;}
  .journey-card .journey-icon{margin-bottom:10px;}
  .floating-cta{right:12px;bottom:14px;padding:11px 14px!important;font-size:12px!important;}
  .whatsapp-bubble{left:12px;bottom:14px;width:48px;height:48px;font-size:24px;}
  #testimonialSlider .testimonial-card{grid-template-columns:1fr!important;padding:26px!important;gap:20px!important;}
  #testimonialSlider .testimonial-metric{border-right:0!important;border-top:1px solid var(--line);padding:18px 0 0!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}