/* =========================================================
   Elyscel — shared stylesheet
   Used by: index.html, articles/index.html, articles/*.html
   NOTE: url() paths below are relative to THIS file (assets/)
   ========================================================= */

:root{
  --navy:#0e1640;
  --ink:#1a1f2e;
  --slate:#475069;
  --plum:#6b5b7d;
  --plum-deep:#574766;
  --paper:#ffffff;
  --mist:#f4f5f8;
  --line:#e3e6ee;
  --maxw:1120px;
  --readw:720px;
  --pad:40px;
  --navh:56px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
img{max-width:100%;height:auto;}
.nb{white-space:nowrap;}

/* ---------- HERO (home, full-bleed) ---------- */
.hero{
  position:relative;
  min-height:620px;
  background-color:var(--navy);
  background-image:url('header.jpg');
  background-image:image-set(url('header.webp') type('image/webp'), url('header.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;flex-direction:column;
}
/* nav strip: translucent black bar across the top */
.nav-strip{
  position:relative;z-index:3;
  background:rgba(0,0,0,.30);
}
nav{
  display:flex;justify-content:center;align-items:center;
  padding:16px var(--pad);
}
nav a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:4px 2px;margin:0 16px;position:relative;
  transition:color .2s;
}
nav a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:1.5px;
  background:#fff;transform:scaleX(0);transform-origin:center;
  transition:transform .25s ease;
}
nav a:hover{color:#fff;}
nav a:hover::after{transform:scaleX(1);}
nav a.is-active{color:#fff;}
nav a.is-active::after{transform:scaleX(1);}
nav .sep{color:rgba(255,255,255,.45);margin:0;font-weight:400;}

.hero-body{
  flex:1;position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero-logo{padding:38px var(--pad) 0;text-align:left;width:100%;}
.hero-logo img{height:78px;width:auto;display:inline-block;margin:0;}
.hero-copy{
  padding:0 var(--pad) 64px;
  text-align:right;
  width:100%;
}
.hero-copy h1{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(22px,2.9vw,36px);
  line-height:1.25;
  color:#fff;
  letter-spacing:-.01em;
  text-shadow:0 2px 20px rgba(8,12,40,.4);
}

/* ---------- ABOUT ---------- */
#about{padding:92px 0 84px;}
.about-p{
  max-width:760px;margin:0 auto;text-align:center;
  font-size:clamp(16px,1.6vw,18.5px);
  color:var(--slate);line-height:1.78;
}

/* ---------- PRODUCTS ---------- */
.product{text-align:center;padding:64px 0 72px;}
.product--mist{background:var(--mist);}
.product-logo{height:200px;width:auto;max-width:100%;margin:0 auto 30px;display:block;}
.product-logo--rrise{height:160px;}
.product h2{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  color:var(--ink);
  margin-bottom:18px;
  letter-spacing:-.01em;
}
.product p{
  max-width:640px;margin:0 auto 32px;
  font-size:17px;color:var(--slate);line-height:1.72;
}
.product p .lead{color:var(--ink);font-weight:600;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:16px;font-weight:600;letter-spacing:.01em;
  padding:15px 30px;border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:all .22s ease;
}
.btn-outline{
  color:var(--plum-deep);
  border:1.5px solid var(--plum);
  background:transparent;
}
.btn-outline svg{transition:transform .22s ease;}
.btn-outline:hover{
  background:var(--plum-deep);border-color:var(--plum-deep);color:#fff;
  box-shadow:0 8px 22px -8px rgba(87,71,102,.55);
}
.btn-outline:hover svg{transform:translateX(4px);}
.btn-disabled{
  color:#fff;background:#b8bcc6;border:1.5px solid #b8bcc6;
  cursor:not-allowed;pointer-events:none;
}

/* =========================================================
   TOPBAR — used on Articles pages
   Transparent over the banner, turns solid navy on scroll
   ========================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(0,0,0,.30);
  transition:background .25s ease, box-shadow .25s ease;
}
.topbar.is-solid{
  background:var(--navy);
  box-shadow:0 2px 18px -4px rgba(8,12,40,.45);
}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:11px;padding-bottom:11px;
}
.topbar-logo{display:inline-flex;align-items:center;flex:none;}
.topbar-logo img{height:34px;width:auto;display:block;}
.topbar nav{padding:0;justify-content:flex-end;}
.topbar nav a{margin:0 0 0 22px;}
.topbar nav .sep{margin:0 0 0 22px;}
/* offset for the fixed bar on pages without a banner */
.topbar-offset{height:var(--navh);}

/* ---------- ARTICLE BANNER ---------- */
.art-banner{background:var(--navy);line-height:0;}
.art-banner img{width:100%;display:block;}

/* ---------- ARTICLE BODY ---------- */
.article{padding:56px 0 24px;}
.article .wrap{max-width:calc(var(--readw) + var(--pad)*2);}
.art-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--plum-deep);margin-bottom:18px;
}
.art-meta .dot{color:var(--line);font-weight:400;letter-spacing:0;}
.art-meta .date{color:var(--slate);font-weight:500;letter-spacing:.04em;}
.article h1{
  font-size:clamp(28px,4vw,42px);
  font-weight:700;line-height:1.22;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:20px;
}
.art-deck{
  font-size:clamp(17px,2vw,20px);
  line-height:1.62;color:var(--slate);font-weight:500;
  padding-bottom:30px;margin-bottom:34px;
  border-bottom:1px solid var(--line);
}
.art-body p{
  font-size:17.5px;line-height:1.85;color:var(--slate);
  margin-bottom:26px;
}
.art-body p strong{color:var(--ink);font-weight:600;}
.art-body .cue{color:var(--ink);font-weight:600;margin-bottom:22px;}

/* ---------- CENTERED EMBEDS ---------- */
.embed{
  display:flex;flex-direction:column;align-items:center;
  width:100%;margin:8px auto 34px;
}
/* YouTube: responsive 16:9, capped and centered */
.embed--video{max-width:640px;}
.embed--video .frame{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 14px 40px -18px rgba(8,12,40,.55);
}
.embed--video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
/* Instagram: override the inline margin the official embed ships with */
.embed--ig{max-width:540px;}
.embed--ig .instagram-media{
  margin:0 auto !important;
  min-width:0 !important;
  width:100% !important;
  max-width:540px !important;
}
.embed-cap{
  font-size:13px;color:var(--slate);opacity:.85;
  margin-top:12px;text-align:center;
}

/* ---------- ARTICLE CTA ---------- */
.art-cta{
  text-align:center;background:var(--mist);
  border-radius:18px;padding:38px 32px 40px;
  margin:44px 0 8px;
}
.art-cta p{
  font-size:18px;font-weight:600;color:var(--ink);
  margin-bottom:22px;line-height:1.5;
}

/* ---------- ARTICLE FOOT NAV ---------- */
.art-nav{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
  padding:34px 0 76px;
}
.art-nav a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15.5px;font-weight:600;color:var(--plum-deep);
  text-decoration:none;transition:color .2s;
}
.art-nav a:hover{color:var(--navy);text-decoration:underline;}

/* =========================================================
   ARTICLES LIBRARY
   ========================================================= */
.lib-head{
  background:var(--navy);color:#fff;
  padding:calc(var(--navh) + 62px) 0 66px;
  text-align:center;
}
.lib-head h1{
  font-size:clamp(30px,4.2vw,44px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;
}
.lib-head p{
  font-size:17px;color:rgba(255,255,255,.75);
  max-width:560px;margin:0 auto;line-height:1.65;
}
.lib-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:34px;padding:64px 0 88px;
}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--paper);text-decoration:none;color:inherit;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#cfd4e4;
  box-shadow:0 20px 44px -22px rgba(8,12,40,.45);
}
.card-thumb{background:var(--navy);line-height:0;}
.card-thumb img{width:100%;display:block;aspect-ratio:2400/1260;object-fit:cover;}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.card-meta{
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--plum-deep);margin-bottom:11px;
}
.card-meta .date{color:var(--slate);font-weight:500;}
.card h2{
  font-size:20px;font-weight:700;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:11px;
}
.card p{font-size:15px;color:var(--slate);line-height:1.66;margin-bottom:20px;}
.card .more{
  margin-top:auto;font-size:14.5px;font-weight:600;color:var(--plum-deep);
  display:inline-flex;align-items:center;gap:8px;
}
.card:hover .more svg{transform:translateX(4px);}
.card .more svg{transition:transform .22s ease;}

/* ---------- FOOTER ---------- */
footer.site{background:var(--navy);color:#fff;}
.foot-main{
  display:flex;justify-content:space-between;align-items:center;
  gap:40px;flex-wrap:wrap;
  padding:52px var(--pad) 48px;
}
.foot-contact{display:flex;flex-direction:column;gap:18px;}
.foot-row{display:flex;align-items:flex-start;gap:14px;}
.foot-row svg{flex:none;margin-top:3px;opacity:.92;}
.foot-row a,.foot-row address{
  color:rgba(255,255,255,.9);font-style:normal;
  font-size:15.5px;line-height:1.55;text-decoration:none;
}
.foot-row a:hover{color:#fff;text-decoration:underline;}
.foot-logo img{height:52px;width:auto;display:block;}
.foot-bar{
  background:#000;text-align:center;padding:18px 0;
  font-size:13.5px;color:rgba(255,255,255,.62);letter-spacing:.01em;
}

/* ---------- CONTACT MODAL ---------- */
.modal{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(10,14,35,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.modal.is-open{display:flex;}
.modal-card{
  background:var(--paper);color:var(--ink);
  width:100%;max-width:400px;
  border-radius:18px;padding:32px 30px 26px;
  box-shadow:0 24px 60px -12px rgba(8,12,40,.45);
  position:relative;text-align:center;
}
.modal-card h3{
  font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;
}
.modal-mail{
  font-size:16px;color:var(--plum-deep);font-weight:600;
  word-break:break-all;margin-bottom:22px;
}
.modal-actions{display:flex;flex-direction:column;gap:10px;}
.modal-actions .mbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15px;font-weight:600;
  padding:13px 18px;border-radius:999px;
  text-decoration:none;cursor:pointer;
  border:1.5px solid var(--plum);color:var(--plum-deep);background:transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.modal-actions .mbtn:hover{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff;}
.modal-actions .mbtn--primary{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff;}
.modal-actions .mbtn--primary:hover{background:var(--navy);border-color:var(--navy);}
.modal-close{
  position:absolute;top:12px;right:14px;
  width:32px;height:32px;border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--slate);
  cursor:pointer;border-radius:50%;transition:background .2s;
}
.modal-close:hover{background:var(--mist);}
.modal-hint{margin-top:16px;font-size:13px;color:var(--slate);min-height:18px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  :root{--pad:22px;--navh:52px;}
  .hero{min-height:500px;}
  nav{padding:14px var(--pad);flex-wrap:wrap;}
  nav a{margin:0 10px;font-size:14px;}
  .hero-logo{padding:30px var(--pad) 0;}
  .hero-logo img{height:54px;}
  .hero-copy{padding:0 var(--pad) 44px;text-align:right;}
  .hero-copy h1{font-size:clamp(19px,5.4vw,26px);}
  .hero-copy .m-br{display:block;height:0;}
  #about{padding:60px 0 56px;}
  .product{padding:52px 0 56px;}
  .product-logo{height:auto;width:auto;max-width:100%;max-height:115px;margin:0 auto 24px;}
  .product-logo--rrise{height:auto;max-height:92px;}
  .product p .lead{display:block;margin-bottom:6px;}
  .foot-main{flex-direction:column;align-items:flex-start;gap:32px;padding:44px var(--pad) 40px;}
  .foot-logo img{height:46px;}

  /* on phones the banner is short, so keep the bar solid and push the
     image below it instead of covering half the artwork */
  .topbar{background:var(--navy);}
  .art-banner{padding-top:var(--navh);}
  .topbar-in{padding-top:9px;padding-bottom:9px;gap:12px;}
  .topbar-logo img{height:28px;}
  .topbar nav{padding:0;flex-wrap:nowrap;}
  .topbar nav a{margin:0 0 0 11px;font-size:13px;}
  .topbar nav .sep{margin:0 0 0 11px;font-size:13px;}
  .article{padding:38px 0 16px;}
  .art-body p{font-size:16.5px;line-height:1.8;}
  .art-cta{padding:30px 22px 32px;border-radius:14px;}
  .art-nav{padding:26px 0 56px;}
  .lib-head{padding:calc(var(--navh) + 44px) 0 48px;}
  .lib-grid{grid-template-columns:1fr;gap:26px;padding:44px 0 66px;}
}
/* very narrow phones: stack the topbar so links never overflow */
@media (max-width:359px){
  .topbar-in{flex-direction:column;align-items:center;gap:7px;}
  .topbar nav{justify-content:center;}
  .topbar nav a{margin:0 7px;}
  .topbar nav .sep{margin:0;}
  :root{--navh:78px;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important;}
}