:root{
  --bg:#f7fbff;         /* page background */
  --bg-accent:#eef6ff;  /* subtle card/hero accent */
  --text:#0f172a;
  --muted:#475569;
  --brand:#0077B6;      /* brand accent (tune as needed) */
  --brand-2:#005D8E;
  --surface:#ffffff;
  --border:#e5e7eb;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg) 0%, #ffffff 80%);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1240px,92%);margin:0 auto}

/* Desktop topbar: logo + name (left), nav + quote (right) */
.topbar{display:none;border-bottom:1px solid var(--border);background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand-inline{display:flex;align-items:center;gap:12px}
.brand-inline img{height:56px;width:auto} /* laptop-friendly */
.brand-inline .name{font-weight:800;font-size:28px;letter-spacing:.2px;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:18px;color:#334155;flex-wrap:wrap}
.navlinks a{padding:8px 10px;border-radius:10px}
.button{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:700}
.button.cta{background:var(--brand);border-color:var(--brand);color:#fff}
.button.cta:hover{background:var(--brand-2)}

/* Mobile header: big logo + name + hamburger + (quote only on home) */
.header{display:block;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg-accent) 0%, #fff 100%)}
.header-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.brand img{height:112px;width:auto} /* big logo on mobile */
.brand .name{font-weight:900;font-size:clamp(22px,6vw,30px)}
.brand .tagline{color:var(--muted);font-size:14px}
.hambox{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
.hambtn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.hambtn span{display:block;height:2px;background:#0f172a;border-radius:2px;margin:0 8px}
.hambox .label{font-size:14px;color:#334155}

/* Switch up to desktop nav */
@media(min-width:980px){
  .topbar{display:block}
  .header{display:none}  /* Hide mobile header on large screens */
}

/* Pop menu (mobile) */
.menu{display:none;position:fixed;inset:0;z-index:80}
.menu.active{display:block}
.menu .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.menu .sheet{position:absolute;left:50%;top:10%;transform:translateX(-50%);width:min(520px,92%);background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 40px rgba(2,8,23,.18);padding:14px}
.menu .sheet .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.menu a{flex:1 1 calc(50% - 10px);background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;text-align:center;font-weight:600;color:#0f172a}
.menu a:hover{border-color:#cbd5e1;background:#f8fafc}
.menu .close{position:absolute;right:12px;top:10px;background:transparent;border:0;font-size:24px;color:#64748b;cursor:pointer}

/* Hero + Sections */
.hero{padding:36px 0}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.1;margin:6px 0 10px;text-align:center}
.hero .lead{color:#475569;max-width:900px;margin:0 auto;text-align:center}
.cta-wrap{display:flex;justify-content:center;margin-top:14px}

.section{padding:56px 0}
.section h2{font-size:clamp(24px,3.5vw,36px);margin:0 0 8px;text-align:center}
.section p.sub{color:#64748b;text-align:center}

/* Cards grid (interior + home highlights) */
.grid{display:grid;gap:18px}
.cards-3{grid-template-columns:1fr}
@media(min-width:820px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(2,8,23,.06)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{color:#334155}

/* Forms (modals/contact) */
form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(2,8,23,.06)}
label{font-size:13px;color:#475569;display:block;margin:12px 0 8px}
.input{width:100%;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--border);color:#0f172a}

/* Footer */
footer{border-top:1px solid var(--border);padding:26px 0;color:#64748b;text-align:center}

/* Quote Modal (Home only) */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal .sheet{position:relative;width:min(680px,92%);background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 40px rgba(2,8,23,.18);padding:20px}
.modal .close{position:absolute;right:12px;top:10px;background:transparent;border:0;color:#64748b;font-size:24px;cursor:pointer}