/* =====================================================================
   SOLAS SCIENCE — LANDING PAGE BODY (no header / no footer)
   Header + footer are handled by the Elementor theme. This block is
   meant to drop inside the page body only.
   Brand: Solas blue/white  |  Font: Montserrat  |  Patterns: glass cards,
   gradient headlines, hover lift, scroll reveals, pill buttons
   The #solas-trust block is your existing Trust-Stack deliverable, intact.
   ===================================================================== */

#solas-page{
  --navy:var(--solas-text, #0B2349); --blue:#1d4e89; --bright:#2f6fd6; --accent:#4f93e6;
  --ink:var(--solas-text, #0B2349); --muted:#5a6b80; --line:rgba(29,78,137,.14);
  --glass:rgba(255,255,255,.72); --bg:var(--solas-wash, #F4F8FF);
  --shadow-sm:0 6px 22px rgba(15,43,77,.06);
  --shadow-md:0 10px 30px rgba(15,43,77,.07);
  --shadow-lg:0 22px 46px rgba(15,43,77,.16);
  font-family:'Montserrat',sans-serif; color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(79,147,230,.10), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(47,111,214,.07), transparent 55%),
    var(--bg);
}
#solas-page *{box-sizing:border-box;}
#solas-page h1,#solas-page h2,#solas-page h3{margin:0; font-weight:800; letter-spacing:-.02em; color:var(--navy);}
#solas-page p{margin:0;}
#solas-page a{text-decoration:none; color:inherit;}
#solas-page img{max-width:100%; display:block;}
#solas-page .wrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,48px);}
#solas-page section[id]{scroll-margin-top:clamp(70px,12vw,104px);}
#solas-page .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--solas-link, #385E9B);
}
#solas-page .eyebrow::before{content:""; width:22px; height:2px; border-radius:var(--solas-radius-rect, 4px);
  background:linear-gradient(90deg,var(--solas-surface-dark, #0B2349),var(--accent));}
#solas-page .grad-text{
  background:linear-gradient(100deg,var(--solas-surface-dark, #0B2349),var(--bright) 55%,var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- Buttons (shared) ---------- */
#solas-page .btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.01em;
  padding:14px 30px; border-radius:100px; cursor:pointer; border:0; overflow:hidden;
  white-space:nowrap; transition:transform .25s, box-shadow .25s, background .25s;
}
#solas-page .btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;}
#solas-page .btn-solid{background:linear-gradient(135deg,var(--solas-btn-fill, #0B2349),var(--solas-btn-fill, #0B2349)); color:#fff;
  box-shadow:0 10px 26px rgba(29,78,137,.30);}
#solas-page .btn-solid:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(29,78,137,.42);}
#solas-page .btn-ghost{background:#fff; color:var(--solas-link, #385E9B); box-shadow:var(--shadow-sm);
  border:1px solid var(--line);}
#solas-page .btn-ghost:hover{transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-md);
  border-color:rgba(47,111,214,.4);}
#solas-page .ripple-fx{position:absolute; border-radius:50%; background:rgba(255,255,255,.4);
  transform:scale(0); animation:s-ripple .6s linear; pointer-events:none;}
#solas-page .btn-ghost .ripple-fx{background:rgba(29,78,137,.18);}
@keyframes s-ripple{to{transform:scale(4); opacity:0;}}

/* ---------- Reveal animation (global within page) ---------- */
#solas-page .reveal{opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);}
#solas-page .reveal.in{opacity:1; transform:none;}
#solas-page :focus-visible{outline:3px solid rgba(47,111,214,.55); outline-offset:3px; border-radius:var(--solas-radius-rect, 4px);}
@media(prefers-reduced-motion:reduce){
  #solas-page .reveal{opacity:1!important; transform:none!important; transition:none!important;}
}

/* =========================================================
   HERO
   ========================================================= */
#solas-page .s-hero{position:relative; padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px); overflow:hidden;}
#solas-page .s-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;}
#solas-page .s-hero h1{font-size:clamp(33px,5.2vw,60px); line-height:1.04; margin:18px 0 0;}
#solas-page .s-hero .lead{font-size:clamp(15.5px,1.8vw,19px); color:var(--muted); max-width:540px; margin-top:20px; line-height:1.6;}
#solas-page .s-hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}
#solas-page .s-hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:28px;}
#solas-page .s-hero-meta .chip{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--solas-link, #385E9B);}
#solas-page .s-hero-meta .chip svg{width:16px; height:16px; flex:0 0 16px; fill:none; stroke:var(--bright); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;}
#solas-page .s-hero-meta .sep{width:1px; height:16px; background:var(--line);}

/* hero visual */
#solas-page .s-hero-visual{position:relative; min-height:380px;}
#solas-page .s-orbit{position:absolute; inset:-8% -6%; pointer-events:none; opacity:.5;}
#solas-page .s-orbit svg{width:100%; height:100%; overflow:visible;}
#solas-page .s-hero-photo{position:relative; z-index:2; max-width:380px; margin:0 auto;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--solas-radius-rect, 4px);
  backdrop-filter:blur(10px); box-shadow:0 24px 60px rgba(15,43,77,.16); padding:14px;}
#solas-page .s-hero-photo .frame{position:relative; border-radius:var(--solas-radius-rect, 4px); overflow:hidden; aspect-ratio:4/5;
  background:radial-gradient(circle at 50% 35%, rgba(79,147,230,.16), transparent 62%), linear-gradient(160deg,#eef5fd,#dfeafb);}
#solas-page .s-hero-img{width:100%; height:100%; object-fit:cover; display:block;}
#solas-page .s-photo-tag{position:absolute; left:24px; bottom:24px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:rgba(15,43,77,.72); backdrop-filter:blur(6px);
  padding:8px 15px; border-radius:100px; box-shadow:0 6px 16px rgba(15,43,77,.25);}
#solas-page .s-photo-tag::before{content:""; width:8px; height:8px; border-radius:50%; background:#4f93e6; box-shadow:0 0 0 4px rgba(79,147,230,.3);}
#solas-page .s-float{position:absolute; z-index:3; background:#fff; border:1px solid var(--line); border-radius:var(--solas-radius-rect, 4px);
  padding:11px 15px; box-shadow:0 14px 34px rgba(15,43,77,.16); display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap;}
#solas-page .s-float svg{width:18px; height:18px; fill:none; stroke:var(--bright); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
#solas-page .s-float.f1{top:6%; left:-2%; animation:s-bob 5s ease-in-out infinite;}
#solas-page .s-float.f2{bottom:8%; right:-2%; animation:s-bob 5s ease-in-out infinite .8s;}
@keyframes s-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media(prefers-reduced-motion:reduce){#solas-page .s-float{animation:none;}}

/* =========================================================
   SECTION HEADINGS (shared)
   ========================================================= */
#solas-page .s-section{padding:clamp(44px,7vw,84px) 0;}
#solas-page .s-head{text-align:center; max-width:680px; margin:0 auto clamp(34px,5vw,52px);}
#solas-page .s-head h2{font-size:clamp(26px,3.6vw,40px); line-height:1.12; margin-top:14px;}
#solas-page .s-head p{font-size:16px; color:var(--muted); margin-top:14px; line-height:1.6;}

/* =========================================================
   PRODUCTS GRID  (placeholder cards — replace with live catalog)
   ========================================================= */
#solas-page .s-prod-note{max-width:1180px; margin:0 auto 22px; padding:10px 16px; border-radius:var(--solas-radius-rect, 4px);
  background:rgba(47,111,214,.07); border:1px dashed rgba(47,111,214,.4); color:var(--solas-link, #385E9B);
  font-size:12.5px; font-weight:600; text-align:center;}
#solas-page .s-products{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
#solas-page .s-prod{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--solas-radius-rect, 4px);
  overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;}
#solas-page .s-prod::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--solas-surface-dark, #0B2349),var(--accent)); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;}
#solas-page .s-prod:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(47,111,214,.4);}
#solas-page .s-prod:hover::after{transform:scaleX(1);}
#solas-page .s-prod-img{position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(79,147,230,.14), transparent 62%),
    linear-gradient(160deg,#eef5fd,#e2eefb);}
#solas-page .s-prod-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
#solas-page .s-prod-img .vial{width:70px; height:70px; color:var(--solas-link, #385E9B);}
#solas-page .s-prod-img .vial svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;}
#solas-page .s-prod-img .tag{position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(15,43,77,.7);
  padding:5px 10px; border-radius:100px; backdrop-filter:blur(4px); z-index:2;}
#solas-page .s-prod-body{padding:18px 18px 20px;}
#solas-page .s-prod-body h3{font-size:15.5px; color:var(--navy); line-height:1.3;}
#solas-page .s-prod-body .purity{display:inline-block; margin-top:9px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--solas-link, #385E9B); background:rgba(29,78,137,.07);
  padding:4px 11px; border-radius:100px;}
#solas-page .s-prod-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
#solas-page .s-prod-foot .price{font-size:18px; font-weight:800; color:var(--navy);}
#solas-page .s-prod-foot .view{font-size:13px; font-weight:700; color:var(--solas-link, #385E9B); display:inline-flex; align-items:center; gap:5px;}
#solas-page .s-prod-foot .view svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s;}
#solas-page .s-prod:hover .view svg{transform:translateX(4px);}
#solas-page .s-prod-all{text-align:center; margin-top:38px;}

/* =========================================================
   PROCESS BAND  (how we verify)
   ========================================================= */
#solas-page .s-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:0 auto;}
#solas-page .s-step{position:relative; background:var(--glass); border:1px solid var(--line); border-radius:var(--solas-radius-rect, 4px);
  padding:30px 26px; backdrop-filter:blur(8px); box-shadow:var(--shadow-md);}
#solas-page .s-step .num{font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--accent);}
#solas-page .s-step .ico{width:50px; height:50px; margin:16px 0 16px; display:grid; place-items:center;
  border-radius:var(--solas-radius-rect, 4px); color:var(--solas-link, #385E9B); background:rgba(79,147,230,.1);}
#solas-page .s-step .ico svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}
#solas-page .s-step h3{font-size:18px; color:var(--navy);}
#solas-page .s-step p{font-size:14px; color:var(--muted); margin-top:9px; line-height:1.55;}

/* =========================================================
   FAQ
   ========================================================= */
#solas-page .s-faq{max-width:840px; margin:0 auto; display:grid; gap:14px;}
#solas-page .s-q{background:#fff; border:1px solid var(--line); border-radius:var(--solas-radius-rect, 4px); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:border-color .3s, box-shadow .3s;}
#solas-page .s-q[open]{border-color:rgba(47,111,214,.4); box-shadow:var(--shadow-md);}
#solas-page .s-q summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 22px; font-size:16px; font-weight:700; color:var(--navy);}
#solas-page .s-q summary::-webkit-details-marker{display:none;}
#solas-page .s-q .ic{flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:rgba(29,78,137,.08); color:var(--solas-link, #385E9B); transition:transform .3s, background .3s, color .3s;}
#solas-page .s-q .ic svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round;}
#solas-page .s-q[open] .ic{transform:rotate(45deg); background:var(--bright); color:#fff;}
#solas-page .s-q .ans{padding:0 22px 20px; font-size:14.5px; color:var(--muted); line-height:1.65;}

/* =========================================================
   RESPONSIVE  (mobile-first refinements)
   ========================================================= */
@media(max-width:1024px){
  #solas-page .s-products{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  #solas-page .s-hero{padding-top:clamp(24px,6vw,40px);}
  #solas-page .s-hero-grid{grid-template-columns:1fr; text-align:center; gap:30px;}
  #solas-page .s-hero .lead{margin-left:auto; margin-right:auto;}
  #solas-page .s-hero-cta{justify-content:center;}
  #solas-page .s-hero-meta{display:none;}
  #solas-page .s-hero-visual{order:-1; min-height:auto; margin-bottom:4px;}
  #solas-page .s-steps{grid-template-columns:1fr;}
}
@media(max-width:560px){
  #solas-page .s-products{grid-template-columns:1fr;}
  #solas-page .btn{width:100%; justify-content:center;}
  #solas-page .s-float{display:none;}
  #solas-page .s-hero-photo{padding:10px;}
  #solas-page .s-prod-img{aspect-ratio:4/3;}
  #solas-page .s-prod-img .vial{width:52px; height:52px;}
  #solas-page .s-photo-tag{left:18px; bottom:18px;}
  #solas-page .s-q summary{font-size:15px; padding:18px;}
  #solas-page .s-q .ans{padding:0 18px 18px;}
}

/* =====================================================================
   ===== EMBEDDED: SOLAS TRUST-STACK SECTION (Deliverable 1, intact) ====
   All CSS scoped under #solas-trust — does not affect the rest of page.
   ===================================================================== */
#solas-trust{
  --navy:var(--solas-text, #0B2349); --blue:#1d4e89; --bright:#2f6fd6; --accent:#4f93e6;
  --ink:var(--solas-text, #0B2349); --muted:#5a6b80; --line:rgba(29,78,137,.16);
  --glass:rgba(255,255,255,.72); --bg:var(--solas-wash, #F4F8FF);
  font-family:'Montserrat',sans-serif; color:var(--ink);
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(79,147,230,.10), transparent 60%),
    radial-gradient(900px 500px at 88% 108%, rgba(47,111,214,.08), transparent 60%);
  padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px);
  box-sizing:border-box; line-height:1.5;
}
#solas-trust *{box-sizing:border-box;}
#solas-trust h2,#solas-trust h3{margin:0;font-weight:800;letter-spacing:-.02em;}
#solas-trust p{margin:0;}
#solas-trust svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#solas-trust .chk{stroke-width:2.4;}
#solas-trust .st-microbar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;
  max-width:1180px;margin:0 auto 30px;padding:11px 18px;
  background:var(--glass);border:1px solid var(--line);border-radius:100px;
  backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(15,43,77,.06);
  font-size:13px;font-weight:600;color:var(--solas-link, #385E9B);
}
#solas-trust .st-micro{display:inline-flex;align-items:center;gap:7px;}
#solas-trust .st-micro svg{width:16px;height:16px;flex:0 0 16px;color:var(--solas-link, #385E9B);}
#solas-trust .st-dot{color:var(--accent);opacity:.5;}
#solas-trust .st-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:1180px;margin:0 auto;
}
#solas-trust .st-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--solas-radius-rect, 4px);padding:30px 24px 22px;text-align:center;overflow:hidden;
  box-shadow:0 10px 30px rgba(15,43,77,.07);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
#solas-trust .st-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--solas-surface-dark, #0B2349),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
#solas-trust .st-card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(15,43,77,.16);border-color:rgba(47,111,214,.4);}
#solas-trust .st-card:hover::after{transform:scaleX(1);}
#solas-trust .st-icon{
  width:54px;height:54px;margin:0 auto 18px;display:grid;place-items:center;
  color:var(--solas-link, #385E9B);background:rgba(79,147,230,.1);border-radius:50%;
}
#solas-trust .st-icon svg{width:30px;height:30px;}
#solas-trust .st-card h3{font-size:18px;color:var(--navy);margin-bottom:10px;line-height:1.25;}
#solas-trust .st-card p{font-size:14px;color:var(--muted);line-height:1.55;}
#solas-trust .st-card-foot{
  display:inline-block;margin-top:16px;padding:5px 12px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--solas-link, #385E9B);
  background:rgba(29,78,137,.07);border-radius:100px;
}
#solas-trust .st-coa{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  max-width:1180px;margin:36px auto 0;padding:30px 34px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--solas-radius-rect, 4px);
  backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(15,43,77,.07);
}
#solas-trust .st-coa-text{flex:1 1 420px;}
#solas-trust .st-coa h2{font-size:clamp(20px,2.6vw,27px);color:var(--solas-link, #385E9B);
  background:linear-gradient(90deg,var(--solas-surface-dark, #0B2349),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#solas-trust .st-coa h2 span{font-weight:800;}
#solas-trust .st-coa p{font-size:14.5px;color:var(--muted);margin-top:9px;max-width:560px;}
#solas-trust .st-btn{
  position:relative;display:inline-block;font-family:inherit;font-size:15px;font-weight:700;
  letter-spacing:.02em;text-decoration:none;padding:15px 34px;border-radius:100px;
  cursor:pointer;overflow:hidden;white-space:nowrap;transition:transform .25s, box-shadow .25s, background .25s;
}
#solas-trust .st-btn-solid{background:#fff!important;color:var(--solas-link, #385E9B)!important;box-shadow:0 8px 22px rgba(0,0,0,.18);}
#solas-trust .st-btn-solid:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px rgba(0,0,0,.26);}
#solas-trust .st-btn-ghost{background:var(--solas-btn-fill, #0B2349)!important;color:#fff!important;box-shadow:0 8px 22px rgba(47,111,214,.32);}
#solas-trust .st-btn-ghost:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px rgba(47,111,214,.45);}
#solas-trust .ripple-fx{position:absolute;border-radius:50%;background:rgba(29,78,137,.25);transform:scale(0);animation:st-ripple .6s linear;pointer-events:none;}
#solas-trust .st-btn-ghost .ripple-fx{background:rgba(255,255,255,.4);}
@keyframes st-ripple{to{transform:scale(4);opacity:0;}}
#solas-trust .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}
#solas-trust .reveal.in{opacity:1;transform:none;}
@media(max-width:900px){
  #solas-trust .st-cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  #solas-trust .st-cards{grid-template-columns:1fr;}
  #solas-trust .st-coa{flex-direction:column;text-align:center;align-items:center;}
  #solas-trust .st-btn{width:100%;text-align:center;}
  #solas-trust .st-coa-text{flex:0 1 auto;}
  #solas-trust .st-coa{gap:16px;padding:26px 24px;}
  #solas-trust .st-microbar{flex-direction:column;gap:9px;border-radius:var(--solas-radius-rect, 4px);padding:14px 20px;}
  #solas-trust .st-micro{justify-content:center;text-align:center;}
  #solas-trust .st-dot{display:none;}
}
@media(prefers-reduced-motion:reduce){
  #solas-trust .reveal{opacity:1;transform:none;transition:none;}
}