:root { --ink:#0d1e18; --pine:#06261c; --paper:#f8f6f1; --line:#deded8; --muted:#53615b; font-family:Inter,Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:16px; }
.product-grid h3 { min-height:2.4em; display:grid; place-items:center; }
.goal-grid article { min-height:310px; display:flex; flex-direction:column; align-items:center; }
.goal-grid article a { margin-top:auto; }
.lead-form { display:grid; gap:.8rem; }
.lead-form label { display:grid; gap:.3rem; font-size:.85rem; font-weight:700; }
.lead-form input,.lead-form select { width:100%; border:1px solid #a6aaa6; border-radius:0; padding:.7rem; background:#fff; color:var(--ink); font:inherit; }
.lead-form .button { border:0; justify-self:start; }
.honeypot { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.form-status { min-height:1.5em; margin:0; font-size:.9rem; }
.newsletter { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; padding:3rem clamp(1rem,10vw,8rem); background:#e9e8e1; }
.newsletter h2 { margin:0; font-size:1.8rem; }
.newsletter p:not(.kicker) { line-height:1.5; }
.inquiry-section { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:2.5rem; margin:0 0 3rem; background:#e9e8e1; scroll-margin-top:2rem; }
.inquiry-section h2 { font-size:1.8rem; margin:.2rem 0; }
.inquiry-section p:not(.kicker) { line-height:1.55; }
@media(max-width:640px) { .newsletter,.inquiry-section { grid-template-columns:1fr; gap:1.5rem; padding:2rem 1rem; } }
.brand-mark { width:42px; height:38px; flex:none; color:var(--pine); fill:none; stroke:currentColor; stroke-linecap:square; stroke-linejoin:miter; stroke-width:4; }
.brand svg.brand-mark { transform:none; letter-spacing:normal; }
.brand-mark .mark-outer { stroke-width:5; }
.brand-mark .mark-inner { stroke-width:2.5; }
.education-page { max-width:1000px; margin:auto; padding:4rem clamp(1rem,5vw,4rem); }
.about-heading { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line); text-align:center; scroll-margin-top:2rem; }
.about-heading h1 { margin:0; font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:-.055em; line-height:.95; }
.article-list,.faq-section { padding:2.5rem 0; }
.article-list details,.faq-list details { border-top:1px solid var(--line); }
.article-list summary,.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 0; cursor:pointer; font-weight:700; font-size:1.15rem; list-style:none; }
.article-list summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker { display:none; }
.article-list summary span { display:flex; align-items:center; gap:.65rem; }
.article-list summary svg { width:22px; height:22px; color:var(--pine); }
.article-content { display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; padding:0 0 2rem; line-height:1.6; }
.article-content img { width:100%; height:190px; object-fit:cover; }
.article-content p { margin-top:0; }
.faq-section { border-top:1px solid var(--line); }
.faq-list { max-width:760px; margin:1.5rem auto 0; }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { font-size:1rem; }
.faq-list summary svg { width:18px; height:18px; flex:none; }
.faq-list details[open] summary svg { transform:rotate(45deg); }
.faq-list details p { margin:0; padding:0 2rem 1.15rem 0; line-height:1.55; color:var(--muted); }
.about-section { display:grid; grid-template-columns:1fr 1.25fr; gap:3rem; padding:3rem; background:var(--pine); color:#fff; }
.about-section h2 { font-size:2rem; line-height:1.05; margin:0; }
.about-section div:last-child { line-height:1.6; }
.about-section .button { margin-top:.5rem; background:#fff; color:var(--pine); }
@media(max-width:640px) { .education-page { padding-top:2.5rem; } .article-content,.about-section { grid-template-columns:1fr; gap:1.25rem; } .article-content img { height:160px; } .about-section { padding:2rem; } }
* { box-sizing:border-box; } body { margin:0; min-width:320px; font-size:1rem; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; }
.site-header { min-height:76px; padding:0 clamp(1.25rem,5vw,4rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:1rem; } .brand { display:flex; align-items:center; gap:.5rem; letter-spacing:.18em; } .brand-mark { font-size:2.5rem; font-weight:900; letter-spacing:-.35em; transform:skew(-17deg); color:var(--pine); } .brand strong { display:block; font-size:1.3rem; } .brand small { display:block; font-size:.5rem; letter-spacing:.07em; margin-top:.15rem; } nav { display:flex; gap:1.5rem; font-size:1rem; } .header-actions { display:flex; gap:.7rem; align-items:center; } .header-actions button { border:0; background:none; display:inline-grid; place-items:center; position:relative; } .header-actions svg { width:20px; height:20px; } .header-actions sup { background:var(--pine); color:#fff; border-radius:50%; font-size:.65rem; padding:1px 5px; position:absolute; top:-8px; right:-9px; }
.hero { min-height:410px; display:grid; grid-template-columns:1fr 1fr; background:#efeee9; } .hero-copy { padding:clamp(2.5rem,6vw,5rem); z-index:1; } .kicker { text-transform:uppercase; letter-spacing:.13em; font-weight:700; font-size:.75rem; margin:0 0 .7rem; } .hero h1,.catalog-heading h1 { font-size:clamp(2.35rem,4.2vw,4.3rem); letter-spacing:-.055em; line-height:.97; margin:0; } .hero-copy>p:not(.kicker) { font-size:1.1rem; line-height:1.5; margin:1.2rem 0; } .button { display:inline-flex; justify-content:center; align-items:center; gap:.6rem; padding:.8rem 1.25rem; font-size:1rem; font-weight:700; border-radius:2px; } .button-dark { background:var(--pine); color:#fff; } .button-outline { border:1px solid var(--ink); background:transparent; } .notice { display:flex; align-items:center; gap:.45rem; margin-top:.9rem; font-size:.82rem; color:var(--muted); } .notice svg { width:15px; } .hero-image { overflow:hidden; } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
.promises,.assurances { display:grid; grid-template-columns:repeat(5,1fr); background:var(--pine); color:#fff; } .promises article { padding:1.4rem clamp(.75rem,2vw,2rem); text-align:center; border-right:1px solid #395046; } .promises svg { width:31px; height:31px; color:#e2d9ba; stroke-width:1.4; } .promises h2 { font-size:1rem; text-transform:uppercase; margin:.7rem 0; } .promises p { font-size:.9rem; line-height:1.45; margin:0; color:#e5e7e4; }
.section { padding:3.3rem clamp(1rem,5vw,4rem); } .section-heading { text-align:center; } .section-heading h2,.library h2 { font-size:1.35rem; text-transform:uppercase; letter-spacing:.1em; margin:0; } .section-heading p:not(.kicker) { font-size:1rem; margin:.4rem 0 1.3rem; } .goal-grid,.product-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; } .goal-grid article,.product-grid article,.library article { border:1px solid var(--line); background:#fbfaf7; text-align:center; padding:1rem; } .goal-grid svg { width:42px; height:42px; color:var(--pine); stroke-width:1.25; } h3 { font-size:1rem; margin:.75rem 0; } .goal-grid p,.library article p { font-size:.92rem; line-height:1.45; min-height:4.2em; } .goal-grid a,.library article a { font-size:.9rem; font-weight:700; } .featured { padding-top:0; text-align:center; } .product-grid { margin:1rem 0; } .product-grid article { display:flex; flex-direction:column; align-items:center; padding:1rem; } .product-grid h3 { margin:.55rem 0 .15rem; } .product-grid small { font-size:.85rem; } .product-grid strong { font-size:1rem; margin:.7rem; } .product-grid .button { width:100%; padding:.65rem; font-size:.9rem; } .vial { height:105px; width:auto; object-fit:cover; object-position:center; }
.library { display:grid; grid-template-columns:1.1fr repeat(2,1fr); gap:.55rem; padding:2.5rem clamp(1rem,5vw,4rem); background:#f0eee8; } .library-intro { padding:1.25rem 1rem; } .library h2 { text-align:left; } .library-intro>p:not(.kicker) { font-size:1rem; } .library .button { margin-top:1rem; } .library article { text-align:left; padding:0 0 1rem; } .library article img { display:block; width:100%; height:110px; object-fit:cover; } .library article h3,.library article p,.library article a { margin-left:.9rem; margin-right:.9rem; } .assurances { grid-template-columns:repeat(4,1fr); padding:1rem 8%; font-size:.9rem; text-transform:uppercase; font-weight:700; gap:1rem; text-align:center; } .assurances svg { width:20px; height:20px; vertical-align:middle; margin-right:.35rem; color:#e2d9ba; }
footer { display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2rem; padding:2.5rem clamp(1rem,5vw,4rem) 1rem; background:#f7f5f0; font-size:.9rem; line-height:1.55; } footer>p { max-width:16rem; } footer div strong { display:block; text-transform:uppercase; margin-bottom:.55rem; } footer div a { display:block; margin:.35rem 0; } footer form { display:flex; border:1px solid #a6aaa6; } footer input { min-width:0; border:0; padding:.55rem; background:transparent; font-size:.9rem; } footer form button { margin-left:auto; background:var(--pine); color:#fff; border:0; padding:0 .8rem; } footer>small { grid-column:1/-1; border-top:1px solid var(--line); padding-top:.8rem; color:#69716c; } footer>small span { float:right; }
.catalog { max-width:1000px; margin:auto; padding:4rem clamp(1rem,5vw,4rem); } .catalog-heading { max-width:44rem; text-align:center; margin:0 auto 3rem; } .catalog-heading>p:not(.kicker) { font-size:1.1rem; color:var(--muted); line-height:1.5; } .compound { display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:center; padding:2.5rem 0; border-top:1px solid var(--line); scroll-margin-top:2rem; } .compound>img { width:140px; height:260px; object-fit:cover; object-position:center; justify-self:center; } .compound h2 { margin:0; font-size:1.9rem; } .compound h2 small { font-size:1rem; } .compound .price { font-size:1.3rem; font-weight:700; margin:.4rem 0 1rem; } .compound p:not(.kicker):not(.price) { max-width:38rem; line-height:1.55; } dl { display:flex; gap:2rem; margin:1.4rem 0; } dt { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } dd { margin:.25rem 0 0; color:var(--muted); }
.sr-only { position:absolute; clip:rect(0,0,0,0); } @media(max-width:880px) { nav { display:none; } .promises { grid-template-columns:repeat(3,1fr); } .goal-grid,.product-grid { grid-template-columns:repeat(3,1fr); } } @media(max-width:640px) { .site-header { min-height:64px; } .header-actions button:not(:last-child) { display:none; } .hero { grid-template-columns:1fr; } .hero-image { height:260px; grid-row:1; } .hero-copy { padding:2.25rem 1.5rem; } .promises { grid-template-columns:repeat(2,1fr); } .promises article:last-child { grid-column:1/-1; } .goal-grid,.product-grid { grid-template-columns:repeat(2,1fr); } .library { grid-template-columns:1fr; } .assurances { grid-template-columns:repeat(2,1fr); } footer { grid-template-columns:repeat(2,1fr); } footer>p { grid-column:1/-1; } footer>small span { float:none; display:block; margin-top:.4rem; } .compound { grid-template-columns:1fr; gap:1rem; } .compound>img { height:220px; } dl { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } } @media(max-width:420px) { .goal-grid { grid-template-columns:1fr; } .product-grid { gap:.25rem; } .product-grid article { padding:.55rem; } .header-actions { display:none; } }