/* ══════════════════════════════════════════
   MyGenHome — Shared Styles
   ══════════════════════════════════════════ */

/* ── RESET & VARIABLES ── */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --blue:#7B9EC9;
  --bd:#5A82B2;
  --deep:#1A3A4A;
  --pale:#EBF1F8;
  --mid:#B8CDE4;
  --teal:#1E8A74;
  --tp:#E2F4F0;
  --teal-dark:#135E50;
  --gc:#2C3A42;
  --gb:#5C6B73;
  --gl:#C5CDD4;
  --gbg:#F4F7FA;
  --w:#fff;
  --gold:#C9A96E;
  --gold-dark:#8A6A3E;
}

html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;color:var(--gc);background:var(--w);overflow-x:hidden}
img{display:block;max-width:100%}

/* ── UTILITY ── */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── NAV ── */
#nav{position:sticky;top:0;z-index:200;height:66px;display:flex;flex-direction:column;background:rgba(255,255,255,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(123,158,201,0.14);transition:box-shadow .3s}
.ni{max-width:1200px;width:100%;margin:0 auto;padding:0 5vw;height:66px;display:flex;align-items:center;justify-content:space-between}
.nl img{height:32px;display:block}
.nm{display:flex;align-items:center;gap:4px}
.nm a{font-size:13.5px;font-weight:400;color:var(--gb);text-decoration:none;padding:8px 14px;border-radius:6px;transition:all .18s;white-space:nowrap}
.nm a:hover{color:var(--deep);background:var(--pale)}
.btob-link,.btoc-link{color:var(--teal)!important;font-weight:500!important}
.btob-link:hover,.btoc-link:hover{background:var(--tp)!important}
.btn-nav{background:var(--deep)!important;color:var(--w)!important;padding:9px 20px!important;border-radius:7px!important;font-weight:600!important;margin-left:8px}
.btn-nav:hover{background:var(--bd)!important}
.btn-nav--teal{background:var(--teal)!important}
.btn-nav--teal:hover{background:var(--teal-dark)!important}

/* Hamburger */
.ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;position:relative;width:30px;height:30px;justify-content:center}
.ham span{width:22px;height:2px;background:var(--gc);border-radius:2px;display:block;transition:transform .3s,opacity .3s}
.ham.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ham.active span:nth-child(2){opacity:0}
.ham.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu */
.mobile-menu{display:none;flex-direction:column;padding:16px 5vw 20px;border-top:1px solid var(--pale);background:var(--w)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:15px;font-weight:400;color:var(--gc);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--pale)}
.btob-link-m,.btoc-link-m{color:var(--teal)!important}
.btn-nav-m{background:var(--deep);color:var(--w)!important;text-align:center;border-radius:8px;padding:14px!important;font-weight:600!important;margin-top:6px;border:none!important}

/* Mobile menu overlay */
.mobile-overlay{display:none;position:fixed;inset:0;top:66px;background:rgba(26,58,74,0.4);z-index:150}
.mobile-overlay.open{display:block}

/* ── HERO (shared base) ── */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(26,58,74,0.88) 0%,rgba(26,58,74,0.55) 55%,rgba(26,58,74,0.2) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:100px 5vw 80px}
.hero-ey{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-ey::before{content:'';width:28px;height:1px;background:var(--mid)}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,6vw,76px);color:var(--w);line-height:1.06;font-weight:300;margin-bottom:24px;max-width:700px}
.hero h1 strong{font-weight:600;display:block}
.hero-desc{font-size:17px;color:rgba(255,255,255,0.6);line-height:1.72;margin-bottom:40px;max-width:480px}

/* ── SECTION BASE ── */
section{padding:96px 5vw}
.si{max-width:1200px;margin:0 auto}
.ey{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:10px}
h2.st{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.5vw,46px);font-weight:300;color:var(--gc);line-height:1.1;margin-bottom:1rem}
h2.st em{font-style:italic;color:var(--bd)}
.ss{font-size:15.5px;color:var(--gb);line-height:1.72;max-width:560px;margin-bottom:2.8rem}
.hdiv{height:1px;background:rgba(123,158,201,0.16);margin-bottom:3rem}

/* ── CONTACT (shared) ── */
.contact-sec{background:var(--pale)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.ci{display:flex;gap:14px;align-items:start;margin-bottom:20px}
.ci-icon{width:40px;height:40px;border-radius:10px;background:var(--w);border:1px solid var(--mid);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-icon svg{width:18px;height:18px;stroke:var(--bd);fill:none;stroke-width:1.5}
.ci-l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:3px}
.ci-v{font-size:14.5px;color:var(--gc)}
.soc-cards{display:flex;flex-direction:column;gap:12px;margin-top:2rem}
.soc-card{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--w);border-radius:10px;border:.5px solid var(--gl);text-decoration:none;transition:border-color .2s}
.soc-card:hover{border-color:var(--blue)}
.soc-label{font-size:14px;font-weight:500;color:var(--gc)}
.soc-sub{font-size:12px;color:var(--gb)}
.soc-col{padding-top:2rem}
.soc-heading{font-size:13px;font-weight:600;color:var(--gb);letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.2rem}
.ss--contact{margin-bottom:1.5rem}

/* ── FOOTER ── */
footer{background:#0D2232;color:rgba(255,255,255,.45);padding:56px 5vw 32px}
.fi{max-width:1200px;margin:0 auto}
.ft{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.fb img{height:30px;opacity:.7;margin-bottom:14px}
.fb p{font-size:13px;line-height:1.7;max-width:240px}
.sb{font-size:10.5px;margin-top:12px;padding:4px 10px;background:rgba(123,158,201,.08);border:.5px solid rgba(123,158,201,.16);border-radius:4px;display:inline-block;color:var(--mid)}
.fc h5{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:14px}
.fc a,.fc p{font-size:13px;color:rgba(255,255,255,.3);text-decoration:none;display:block;margin-bottom:8px;line-height:1.5}
.fc a:hover{color:rgba(255,255,255,.65)}
.socl{display:flex;gap:10px;margin-top:12px}
.socl a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:.5px solid rgba(123,158,201,.12);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s}
.socl a:hover{background:rgba(255,255,255,.12)}
.socl svg{width:14px;height:14px;fill:rgba(255,255,255,.38)}
.fb-line{border-top:1px solid rgba(255,255,255,.05);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12px}