:root{--bg:#ffffff;--fg:#0f172a;--muted:#475569;--brand:#0ea5e9;--brand-2:#22c55e;--surface:#f1f5f9;--border:#e2e8f0}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block;border-radius:16px}
a{color:var(--brand);text-decoration:none}
.container{max-width:1360px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{font-weight:800;font-family:'Playfair Display',serif;font-size:1.5rem;color:#0b1324}
.brand span{color:var(--brand)}
#nav-toggle{display:none}
.burger{display:none;font-size:1.6rem;cursor:pointer;line-height:1}
.nav ul{list-style:none;padding:0;margin:0;display:flex;gap:18px;align-items:center}
.nav a{display:block;padding:10px 12px;border-radius:10px;color:#0b1324}
.nav a:hover,.nav li:focus-within>a{background:var(--surface)}
.has-sub{position:relative}
.has-sub>.sub{position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px;display:none;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
.has-sub .right{left:100%;top:0}
.sub li a{padding:8px 10px;border-radius:8px;color:var(--fg)}
.sub li a:hover{background:#f8fafc}
.sub-toggle{display:none}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-img{width:100%;height:44vh;object-fit:cover;border-radius:0}
.hero-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:24px}
.hero h1{font-size:clamp(26px,4vw,54px);margin:0}
.hero h2{font-size:clamp(13px,4vw,20px);margin:0}
.hero p{max-width:800px;margin:12px auto 0;font-weight:300}
.content .section{padding:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin-top:12px}
.lead{font-size:.9rem;color:var(--muted);margin-left: 10px;margin-top: 10px; font-weight:600;}
.kv{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.kv dt{font-weight:600;color:#334155}
.kv dd{margin:0 0 4px 0}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 16px;border-radius:12px;font-weight:600}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn-row{gap:12px;flex-wrap:wrap}
.cta{background:linear-gradient(90deg,#eff6ff,#ecfeff);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-inner{padding:36px 0;text-align:center}
.section h2{font-family:'Playfair Display',serif;font-size:2rem;margin:0 0 12px}
.bullets{list-style:disc;margin-left:1.25rem}
blockquote{background:#f8fafc;border-left:4px solid var(--brand-2);padding:12px 16px;border-radius:12px}
.blockquote-right{background:#f8fafc;border-left: 0px; border-right:4px solid var(--brand-2);padding:12px 16px;border-radius:12px}
.blockquote-both{background:#f8fafc; border-right:4px solid var(--brand-2); border-right:4px solid var(--brand-2);padding:12px 16px;border-radius:12px}

.site-footer{margin-top:32px;background:#0b1324;color:#cbd5e1}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;flex-wrap:wrap}
.site-footer a{color:#cbd5e1;margin-right:12px}
.copyright{border-top:1px solid #1f2937;padding:12px 0;text-align:center;font-size:.9rem;color:#94a3b8}

/* Mobile */
@media (max-width: 960px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-img{height:40vh}
  .burger{display:block}
  .nav ul{display:none;position:absolute;right:16px;top:64px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;flex-direction:column;min-width:300px;max-height:70vh;overflow:auto}
  #nav-toggle:checked ~ .burger + .nav ul{display:flex}
  /* Make submenus openable with taps by stacking them inline under parent */
  .has-sub>.sub{position:static;border:none;box-shadow:none;padding:6px 0;display:none}
  .has-sub .right{left:auto}
  .has-sub:focus-within>.sub,
  .has-sub:hover>.sub{display:block}
}


/* --- Responsive single-line nav tweaks --- */
.header-inner{gap:12px}
.nav ul{gap:12px; white-space:nowrap; flex-wrap:nowrap}
.nav a{padding:8px 10px}

/* Slightly smaller nav text to fit better on wide but dense menus */
@media (min-width: 961px) and (max-width: 1200px){
  .nav a{font-size:0.96rem; padding:8px 8px}
  .nav ul{gap:10px}
  .brand{font-size:1.4rem}
}

/* Extra-wide desktops: keep everything comfortable */
@media (min-width: 1440px){
  .container{max-width:1440px}
  .nav a{font-size:1rem}
}

/* Ensure brand doesn't shrink too much and nav uses remaining space */
.header-inner{display:flex}
.brand{flex-shrink:0}
.nav{flex:1; display:flex; justify-content:flex-end}


/* Home hero cards: 4-up on desktop, 2-up on tablets, 1-up on phones */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width: 1200px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .grid-4{grid-template-columns:1fr}
}

.angttext {
	
	font-size: 20px;  line-height: 1.2; color: orange;
}

@media (max-width: 991px) {
  header { position: relative; }
  
  .brand {
    display: block;
    position: absolute;
    left: 5%;
    transform: translateX(-50%);
    text-align: center;
	padding: 40px;
  }
  .brand img {
	 width: 64px;
	  
  }
  .hero h2 {
	 margin-top:-100px;
	  
  }

  .burger {
    display: block;
        position: relative;
        left: 38%;
  }
  
  .angttext {
	font-size: 20px;  line-height: 1.2; color: orange; margin-left: 38%;
}

}




@media (max-width: 860px) {
  header { position: relative; }
  
  .brand {
    display: block;
    position: absolute;
    left: 11%;
    transform: translateX(-50%);
    text-align: center;
	padding: 40px;
  }
  .brand img {
	 width: 64px;
	  
  }
  .hero h2 {
	 margin-top:-100px;
	  
  }

  .burger {
    display: block;
        position: relative;
        left: 35%;
  }
  
  .angttext {
	font-size: 20px;  line-height: 1.2; color: orange; margin-left: 32%;
}

}


@media (max-width: 550px) {
  header { position: relative; }
  
  .brand {
    display: block;
    position: absolute;
    left: 11%;
    transform: translateX(-50%);
    text-align: center;
	padding: 40px;
  }
  .brand img {
	 width: 64px;
	  
  }
  .hero h2 {
	 margin-top:-100px;
	  
  }

  .burger {
    display: block;
        position: relative;
        left: 23%;
  }
  
  .angttext {
	font-size: 20px;  line-height: 1.2; color: orange; margin-left: 32%;
}

}

@media (max-width: 450px) {
  header { position: relative; }
  
  .brand {
    display: block;
    position: absolute;
    left: 11%;
    transform: translateX(-50%);
    text-align: center;
	padding: 40px;
  }
  .brand img {
	 width: 64px;
	  
  }
  .hero h2 {
	 margin-top:-100px;
	  
  }

  .burger {
    display: block;
        position: relative;
        left: 14%;
  }
  
  .angttext {
	font-size: 16px;  line-height: 1.2; color: orange; margin-left: 32%;
}

}

@media (max-width: 380px) {
  header { position: relative; }
  
  .brand {
    display: block;
    position: absolute;
    left: 11%;
    transform: translateX(-50%);
    text-align: center;
	padding: 40px;
  }
  .brand img {
	 width: 64px;
	  
  }
  .hero h2 {
	 margin-top:-100px;
	  
  }

  .burger {
    display: block;
        position: relative;
        left: 8%;
  }
  
  .angttext {
	font-size: 14px;  line-height: 1.2; color: orange; margin-left: 32%;
}

}


.red-underline {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-width: 20px;
  text-decoration-thickness: 2px;   /* optional */
  text-underline-offset: 7px;       /* optional: gap below text */
}