/* modern reset + tokens + light UI primitives ===== */

/* Reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%; padding:0 !important; margin:0 !important; }
body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}

/* Tokens */
:root{
  --page-max: 1432px;
  --radius: 12px;
  --radius-sm: 8px;
  --border: rgba(2,6,23,.10);
  --ink: #0f172a;
  --ink-2: #1f2937;
  --muted: #667085;
  --bg: #F5F5F5;
  --bg-soft: #f8fafc;
  --text-color: #3e3e3e;
  --text-title: #1f1f1f;
  --text-meta: #0f172a;
  --primary-color: #F6A91B;

  --step--1: clamp(.86rem,.78rem + .2vw,.95rem);
  --step-0:  clamp(1rem,.96rem + .3vw,1.0625rem);
  --step-1:  clamp(1.125rem,1.05rem + .6vw,1.25rem);
  --step-2:  clamp(1.35rem,1.2rem + 1vw,1.5rem);
  --step-3:  clamp(1.6rem,1.35rem + 1.8vw,2rem);
  --step-4:  clamp(2rem,1.7rem + 2.4vw,2.6rem);

  --header-offset: 70px;
}

/* Base typography */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  font-size:var(--step-0);
  color:var(--ink);
  background:var(--bg);
  padding-top:var(--header-offset);
}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.15}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
h4{font-size:var(--step-0)}
p{font-size:var(--step-0)}
.muted,.kicker{color:var(--muted)}
.kicker{font-size:var(--step--1)}

/* Links and buttons */
.button{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.button.small{padding:8px 16px;font-size:16px;font-weight:400;line-height:1.5}
.button.secondary{background:var(--bg-soft)}

/* Layout helpers */
.container{max-width:var(--page-max);margin-inline:auto;padding-inline:1rem}
.grid{display:grid;gap:1rem}
.flex{display:flex;gap:1rem}
.center{display:grid;place-items:center}

/* Card primitives */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pad{padding:.9rem 1rem 1.1rem}

/* Images with fixed ratio */
.ratio{position:relative;overflow:hidden}
.ratio > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio-16x9{aspect-ratio:16/9}
.ratio-739x332{aspect-ratio:739/332}

/* Headroom for sections */
section{margin-block:1rem}

/* Controls */
.nav-circle{width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer}

/* Ghost dropdown nav */
.ghost-nav{
  position: static;
  z-index: 50;
  padding: .5rem 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ghost-menu{
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ghost-item{position:relative}
.ghost-link{
  font-size: 16px;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .75rem;
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  line-height: 1.5;
  border:1px solid transparent;
}

.ghost-link:hover,
.ghost-item:focus-within > .ghost-link{
  background:rgba(15,23,42,.06);
  border-color:rgba(0,0,0,.08);
}

/* Dropdown */
.ghost-dd{
  position:absolute;
  left:0;
  top:calc(100% + .25rem);
  min-width:260px;
  padding: 10px 16px 16px 24px;
  border-radius:12px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  display:none;
  z-index:10001;
}

.ghost-dd-list{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
  align-items:stretch; /* ensures children do not shrink and centre */
}

.ghost-dd-list a{
  display:block;
  padding:4px 5px;
  border-radius:10px; 
  width:100%;
  box-sizing:border-box;
  text-decoration:none;
  font-size: 15px;
  line-height: 1.5;
  font-weight:500;
  color:var(--ink);
  text-align:left;
  justify-content: flex-start;
}
.ghost-dd-list li {
  width:100%;
  margin-right: 0;
}

.ghost-dd-list a:hover{background:rgba(15,23,42,.06)}

/* Open behaviour */
.ghost-has-sub:hover > .ghost-dd,
.ghost-has-sub:focus-within > .ghost-dd{display:block}

/* Hover bridge */
.ghost-has-sub > .ghost-dd::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

/* Caret */
.ghost-has-sub > .ghost-link::after{
  content:"";
  width:.45rem;
  height:.45rem;
  border-right:2px solid rgba(15,23,42,.55);
  border-bottom:2px solid rgba(15,23,42,.55);
  transform:rotate(45deg);
  margin-left:.2rem;
  translate:0 -1px;
}

/* Responsive tweaks */
@media (max-width:900px){
  .ghost-menu{flex-wrap:wrap;gap:.35rem}
  .ghost-dd{max-width:min(92vw,420px)}
}

@media (max-width:520px){
  .ghost-link{padding:.5rem .65rem}
}

@media (max-width:48rem){
  :root{--header-offset:110px}
}

/* Theme header unclipping (desktop) */
@media only screen and (min-width:48rem){
  .m-header .m-nav,
  .m-header .m-nav__left,
  .m-header .m-nav__left > ul,
  .m-header .m-nav__left > ul > li{
    overflow:visible !important;
    height:auto !important;
  }

  .m-header .m-nav__left{
    white-space:normal !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}
/* Desktop: hover works as normal */
.ghost-has-sub:hover > .ghost-dd{
  display:block;
}

/* Mobile: tap (focus) opens flyout */
@media (hover: none){
  .ghost-has-sub:hover > .ghost-dd{
    display:none; /* disable hover on touch devices */
  }

  .ghost-has-sub:focus-within > .ghost-dd{
    display:block;
  }
}