/* ============================================================ Nourishing Heritage — Naz / GAPS leaky-gut coaching Design system: warm teal + gold, Lora + Source Sans 3. ============================================================ */ /* Self-hosted variable fonts (latin subset) — no third-party round-trips. Preloaded in ; font-display:swap keeps text visible during load. */ @font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/lora.woff2') format('woff2')} @font-face{font-family:'Lora';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/lora-italic.woff2') format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/source-sans-3.woff2') format('woff2')} @font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/caveat.woff2') format('woff2')} :root{ /* Brand teals (logo-derived) */ --t1:#edf7f5;--t2:#cceae4;--t3:#85cec4;--t4:#4db8aa;--t5:#3a9e8f;--t6:#2d7d70;--t7:#1a5049;--t8:#0f3330; /* Gold accent */ --gold:#c9a96e;--glt:#dfc08a;--gold-soft:#e7d6b4; /* Neutrals (warm, never sterile) */ --white:#fff;--off:#f6f1e7;--cream:#f5f1e8;--g50:#efe9da;--g100:#e2eeed;--g300:#c2d7d3;--g400:#8ab0ac;--g500:#5d6f6b;--g600:#3c4b48;--ink:#10241f; /* Type */ --serif:'Lora',Georgia,serif;--sans:'Source Sans 3',system-ui,-apple-system,sans-serif;--script:'Caveat',cursive; --measure:64ch; --fs-display:clamp(2.9rem,7.4vw,5.8rem); --fs-h1:clamp(2.2rem,4.8vw,3.55rem); --fs-h2:clamp(2.1rem,4.4vw,3.5rem); --fs-h3:clamp(1.22rem,2vw,1.55rem); --fs-lead:clamp(1.08rem,1.5vw,1.3rem); --fs-body:1.075rem;--fs-sm:.875rem;--fs-eye:.72rem; --track-tight:-.022em; /* Space + shape — 4/8 spacing scale (px in comments) */ --sp-section:clamp(5rem,9vw,8.5rem); --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;/* 4 8 12 16 20 24 */ --sp-7:1.75rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-14:3.5rem;--sp-16:4rem;--sp-20:5rem;/* 28 32 40 48 56 64 80 */ --maxw:1180px; --rad:.6rem;--rad-sm:.4rem;--rad-lg:1.1rem; --s1:0 2px 12px rgba(15,36,34,.07); --s2:0 12px 34px rgba(15,36,34,.10); --s3:0 28px 64px rgba(15,36,34,.16); --ring:0 0 0 2px var(--white),0 0 0 4px var(--t6); --ease:cubic-bezier(.22,1,.36,1); /* Subtle film-grain (adds depth to flat fills) */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.72;color:var(--g600);background:var(--off);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body::before{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--grain);opacity:.035;mix-blend-mode:multiply;pointer-events:none} section[id]{scroll-margin-top:84px} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--t3);color:var(--t8)} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--rad-sm)} .skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--t7);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--rad-sm) 0;font-size:.85rem;font-weight:600;text-decoration:none} .skip:focus{left:0} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.16;letter-spacing:-.01em;text-wrap:balance} h1,h2{line-height:1.08;letter-spacing:var(--track-tight)} h2{font-size:var(--fs-h2);margin-bottom:var(--sp-4)} h2 em,h1 em{font-style:italic;color:var(--t6)} p,.bt,.lead,.hero-lead,.faq-a p,.step-body p,.smap p{text-wrap:pretty} /* Micro-typography: clean lining figures in display; tabular figures where they align */ h1,h2,h3,.hero-title{font-variant-numeric:lining-nums} .step-num,.bstep-num,.cond-count,.creed-src,.step-meta,.hero-assure,.bcard-h p{font-variant-numeric:tabular-nums lining-nums} .center-narrow{text-wrap:balance} /* Hang opening quotation marks into the margin where supported (progressive enhancement) */ .creed-q,.quote blockquote,.about-pull{hanging-punctuation:first last} /* ---------- Layout helpers ---------- */ .sec{padding:var(--sp-section) 2rem;position:relative} .si{max-width:var(--maxw);margin:0 auto} .sic{max-width:var(--maxw);margin:0 auto;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--fs-eye);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--t7);margin-bottom:var(--sp-4)} .eyebrow::before{content:"";width:1.8rem;height:1.5px;background:var(--t3)} .eyebrow.c{display:flex;justify-content:center} .eyebrow.c::after{content:"";width:1.8rem;height:1.5px;background:var(--t3)} /* editorial: the eyebrow rule draws in as the heading reveals */ .eyebrow::before,.eyebrow.c::after{transition:width .7s var(--ease) .12s} .eyebrow.rev:not(.in)::before,.eyebrow.rev.c:not(.in)::after{width:0} /* --- Section headers --- Section numbering + lotus dividers were removed in the de-slop pass, so the old `.numbered` left-align overrides are gone too — centered vs left-aligned is now controlled per-section by the markup (.eyebrow.c + text-align on the heading). */ /* de-slop: drop decorative icons (cred-row icons intentionally kept as trust badges) */ .step-meta .ico{display:none} .cascade-h .ico{display:none} .smap-ico{display:none!important} .smap{grid-template-columns:1fr!important} .callout{grid-template-columns:1fr!important} .callout .ico{display:none} .cond-label .smap-ico{display:none!important} .lead{font-size:var(--fs-lead);line-height:1.7;color:var(--g600);max-width:var(--measure)} .bt{font-size:var(--fs-body);line-height:1.8;color:var(--g600);max-width:var(--measure)} .bt+.bt{margin-top:var(--sp-4)} .bt strong,.lead strong{color:var(--ink);font-weight:600} .bt em{color:var(--t7);font-style:italic} .dropcap::first-letter{font-family:var(--serif);font-style:italic;font-size:3.2em;line-height:.72;float:left;color:var(--t6);font-weight:400;margin:.06em .14em 0 0} .center-narrow{max-width:60ch;margin-left:auto;margin-right:auto} /* ---------- Depth / texture ---------- */ .bg-cream{background:var(--off)} .bg-soft{background:linear-gradient(180deg,var(--off),var(--g50))} .bg-deep{background: radial-gradient(72% 55% at 84% -6%,color-mix(in oklch,var(--t4) 42%,transparent),transparent 68%), radial-gradient(66% 70% at 6% 112%,color-mix(in oklch,var(--gold) 18%,transparent),transparent 70%), radial-gradient(130% 120% at 78% -10%,var(--t6) 0%,var(--t7) 48%,var(--t8) 100%); color:rgba(255,255,255,.82);position:relative;isolation:isolate} .bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4{color:#fff} .bg-deep .eyebrow{color:var(--glt)} .bg-deep .eyebrow::before,.bg-deep .eyebrow.c::after{background:rgba(223,192,138,.5)} .bg-deep .bt{color:rgba(255,255,255,.76)} .bg-deep .bt strong{color:#fff} .bg-deep .bt em{color:var(--glt)} .grain::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad-sm);padding:.95rem 1.7rem;cursor:pointer;border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s} .btn svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .25s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn-primary{background:linear-gradient(180deg,color-mix(in oklch,var(--t5) 34%,var(--t6)),var(--t6));color:#fff;box-shadow:0 8px 24px rgba(26,80,73,.22),inset 0 1px 0 rgba(255,255,255,.13)} .btn-primary:hover{background:linear-gradient(180deg,var(--t6),var(--t7));transform:translateY(-2px);box-shadow:0 16px 34px rgba(26,80,73,.32),0 6px 28px rgba(58,158,143,.38),inset 0 1px 0 rgba(255,255,255,.13)} #hero .hero-cta .btn-primary{padding:1.05rem 2.05rem;font-size:.82rem} .btn-ghost{border-color:var(--t4);color:var(--t6)} .btn-ghost:hover{background:var(--t1);transform:translateY(-2px)} .btn-gold{background:var(--gold);color:var(--t8)} .btn-gold:hover{background:var(--glt);transform:translateY(-2px)} .btn-ondark{background:var(--gold);color:var(--t8)} .btn-ondark:hover{background:var(--glt);transform:translateY(-2px)} /* Quiet text link with underline-reveal */ .link{color:var(--t6);font-weight:600;background-image:linear-gradient(var(--t4),var(--t4));background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease)} .link:hover{background-size:100% 1.5px} /* ---------- Icons (sprite via ) ---------- */ .svg-sprite{position:absolute;width:0;height:0;overflow:hidden} .ico{width:1.3rem;height:1.3rem;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* ---------- Nav ---------- */ #navbar{position:fixed;inset:0 0 auto 0;z-index:300;background:rgba(248,252,251,.85);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s} #navbar.scrolled{box-shadow:var(--s1);border-color:var(--g100)} .nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.85rem 2rem} .brand{display:flex;align-items:center;gap:.7rem} .brand-badge{width:42px;height:42px;border-radius:11px;background:url('assets/logo-mark.png') center/cover no-repeat;box-shadow:var(--s1);flex-shrink:0} .brand-name{font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t7);white-space:nowrap;line-height:1} .nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none} .nav-links a{font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--g600);transition:color .2s} .nav-links a:hover{color:var(--t7)} .nav-links .nb{background:var(--t6);color:#fff;padding:.6rem 1.4rem;border-radius:var(--rad-sm);transition:background .2s} .nav-links .nb:hover{background:var(--t7);color:#fff} .burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;min-width:44px;min-height:44px;margin-right:-8px} .burger span{display:block;width:23px;height:1.5px;background:var(--ink);transition:.3s var(--ease)} .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mob-drawer{display:none;position:fixed;inset:0;z-index:250;background:radial-gradient(120% 100% at 70% 0%,var(--t6),var(--t7) 50%,var(--t8));flex-direction:column;align-items:center;justify-content:center;gap:2rem} .mob-drawer.open{display:flex} .mob-drawer a{font-family:var(--serif);font-size:1.7rem;font-style:italic;color:rgba(255,255,255,.92)} .mob-cta{font-family:var(--sans)!important;font-style:normal!important;font-size:.8rem!important;font-weight:700!important;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--t8)!important;padding:.9rem 2.2rem;border-radius:var(--rad-sm);margin-top:.6rem} .mob-close{position:absolute;top:1.3rem;right:1.8rem;background:none;border:none;color:#fff;font-size:1.7rem;cursor:pointer;line-height:1} /* ---------- Hero ---------- */ #hero{padding:8rem 2rem 0;background:linear-gradient(180deg,var(--off),var(--g50) 90%);position:relative;overflow:hidden} #hero::before{content:"";position:absolute;inset:-15% -10%;pointer-events:none;filter:blur(10px);opacity:.6;background: radial-gradient(38% 42% at 88% 6%,color-mix(in oklch,var(--t3) 66%,white),transparent 60%), radial-gradient(34% 40% at 5% 98%,color-mix(in oklch,var(--gold) 34%,transparent),transparent 62%); animation:aurora 24s var(--ease) infinite} @keyframes aurora{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,2%) scale(1.05)}} .hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:4.5rem;align-items:center;position:relative} .hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.45rem,5.2vw,4.15rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin-bottom:1.5rem;text-wrap:balance} .hero-title em{font-style:italic;color:var(--t6)} .hero-lead{font-size:var(--fs-lead);line-height:1.7;color:var(--g600);max-width:42ch;margin-bottom:2.2rem} .hero-lead strong{color:var(--ink);font-weight:600} .hero-cta{display:flex;gap:1.1rem 1.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem} /* Secondary action: a quiet, subordinate link (no competing second button) */ .hero-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--t6);padding:.3rem 0;position:relative} .hero-link::after{content:"";position:absolute;left:0;bottom:.05rem;height:1.5px;width:0;background:var(--t4);transition:width .35s var(--ease)} .hero-link:hover::after{width:calc(100% - 1.4rem)} .hero-link .ico{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .3s var(--spring)} .hero-link:hover .ico{transform:translateX(4px)} .hero-assure{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--g500);letter-spacing:.01em;margin-bottom:1rem} .hero-assure .ico{width:.95rem;height:.95rem;padding:.2rem;background:var(--t1);color:var(--t6);border-radius:50%;box-sizing:content-box;stroke-width:2.8;flex-shrink:0} .cred-row{max-width:var(--maxw);margin:var(--sp-14) auto 0;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;position:relative;border-radius:var(--rad-lg);box-shadow:var(--s3);overflow:hidden;background: radial-gradient(60% 130% at 86% -25%,color-mix(in oklch,var(--t4) 40%,transparent),transparent 70%), radial-gradient(52% 130% at 5% 125%,color-mix(in oklch,var(--gold) 18%,transparent),transparent 72%), linear-gradient(155deg,var(--t6),var(--t8))} .cred-row::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--glt) 50%,var(--gold) 72%,transparent)} .cred-row .chip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.7rem;padding:var(--sp-7) var(--sp-4);font-size:.82rem;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.95);text-align:center;background:transparent;border:none;border-radius:0;box-shadow:none;border-left:1px solid rgba(255,255,255,.1)} .cred-row .chip:first-child{border-left:none} .cred-row .chip .ico{width:1.1rem;height:1.1rem;padding:.6rem;color:var(--glt);background:radial-gradient(circle,color-mix(in oklch,var(--gold) 26%,transparent),color-mix(in oklch,var(--gold) 9%,transparent));border:1px solid color-mix(in oklch,var(--gold) 38%,transparent);border-radius:50%;box-sizing:content-box;flex-shrink:0} @media(max-width:680px){.cred-row{grid-template-columns:repeat(2,1fr)}.cred-row .chip:nth-child(odd){border-left:none}.cred-row .chip:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}} .chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--t7);background:var(--white);border:1px solid var(--g100);border-radius:2rem;padding:.45rem .9rem;box-shadow:var(--s1)} .chip .ico{width:1rem;height:1rem;color:var(--t5)} /* Hero side: floating symptom card */ .hero-side{align-self:center} .symptom-card{position:relative;width:100%;max-width:430px;margin-left:auto;background:var(--white);border:1px solid var(--g100);border-radius:var(--rad-lg);box-shadow:var(--s3);padding:var(--sp-10)} .symptom-card h2{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t7);margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--g100)} .symptom-card ul{list-style:none;display:flex;flex-direction:column;gap:.85rem} .symptom-card li{display:flex;gap:.75rem;align-items:center;font-size:.93rem;color:var(--g600);line-height:1.4} .symptom-card .ico{width:.8rem;height:.8rem;padding:.3rem;background:var(--t1);color:var(--t6);border-radius:50%;box-sizing:content-box;flex-shrink:0;stroke-width:2.6} .symptom-foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--g100);font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--t7);line-height:1.5} /* Section edge (replaces the old wave) */ .edge{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--g100),transparent)} /* ---------- Symptom map (Leaky Gut) ---------- */ #leakygut{background:var(--off)} .split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-20);align-items:start} .symptom-map{display:flex;flex-direction:column;gap:.2rem;margin-top:var(--sp-8)} .smap{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--g100)} .smap:last-child{border-bottom:1px solid var(--g100)} .smap-ico{width:42px;height:42px;border-radius:50%;background:var(--t1);color:var(--t6);display:flex;align-items:center;justify-content:center} .smap-ico .ico{width:1.25rem;height:1.25rem} .smap h3{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.25rem} .smap p{font-size:.88rem;color:var(--g600);line-height:1.55} /* Cascade */ .cascade{background:var(--white);border:1px solid var(--g100);border-radius:var(--rad);overflow:hidden;box-shadow:var(--s2)} .cascade-h{background:var(--t7);padding:1rem 1.5rem;display:flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)} .cascade-h .ico{width:1.05rem;height:1.05rem;color:var(--glt)} .cascade-b{padding:var(--sp-7) var(--sp-6);position:relative} .cstep{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-bottom:1.4rem} .cstep:last-child{padding-bottom:0} .cstep-dot{width:13px;height:13px;border-radius:50%;background:currentColor;border:2px solid var(--white);box-shadow:0 1px 4px rgba(15,36,34,.22);margin-top:.35rem;z-index:1} .cstep::before{content:"";position:absolute;left:7px;top:1.2rem;bottom:-.35rem;width:2px;background:currentColor;opacity:.3} .cstep:last-child::before{display:none} .cstep.r{color:#d98a6a}.cstep.a{color:var(--gold)}.cstep.g{color:var(--t5)} .cstep p{font-size:.875rem;color:var(--g600);line-height:1.55} .cstep p strong{color:var(--ink);font-weight:600} .note{background:var(--t1);border:1px solid var(--t2);border-left:3px solid var(--t4);border-radius:var(--rad-sm);padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-5)} .note p{font-size:.86rem;color:var(--t7);line-height:1.65} .note strong{font-weight:700} #gaps .note{background:transparent;border:none;border-left:2px solid var(--gold);border-radius:0;padding:.1rem 0 .1rem 1.3rem;margin-top:var(--sp-6)} /* ---------- Creed / pull-quote band ---------- */ #creed{padding:clamp(4rem,8vw,6.5rem) 2rem;text-align:center} .creed-mark{font-family:var(--serif);font-size:4rem;line-height:.5;color:var(--glt);opacity:.7} .creed-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.4;color:#fff;max-width:20ch;margin:1.4rem auto 1.6rem} .creed-src{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--glt)} .creed-src span{display:block;margin-top:.35rem;font-weight:400;letter-spacing:.05em;text-transform:none;color:rgba(255,255,255,.72);font-size:.8rem} /* ---------- GAPS ---------- */ #gaps{background:var(--white)} .bio{display:block;background:transparent;border:none;border-left:2px solid var(--gold);border-radius:0;padding:0 0 0 1.3rem;margin-bottom:2rem} .bio-badge{display:none} .bio h3{font-family:var(--serif);font-size:1.12rem;font-weight:400;color:var(--ink)} .bio p{font-size:.84rem;color:var(--g600);line-height:1.55;margin-top:.2rem} .pathways{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-8)} .pathway{border:none;border-top:1px solid var(--g300);border-radius:0} .pathway:hover{box-shadow:none;transform:none} .pathway-h{padding:1.1rem 0 .4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem} .pathway-h h3{font-family:var(--sans);font-size:.98rem;font-weight:700;color:var(--ink)} .pathway-h span{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--t7);border:1px solid var(--t3);padding:.22rem .65rem;border-radius:2rem;white-space:nowrap} .pathway.intro .pathway-h{background:transparent} .pathway.full .pathway-h{background:transparent} .pathway-b{padding:0 0 1.2rem} .pathway-b p{font-size:.86rem;color:var(--g600);line-height:1.65} .callout{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;background:transparent;border:none;border-left:2px solid var(--t4);border-radius:0;padding:.1rem 0 .1rem 1.2rem;margin-top:var(--sp-6)} .callout .ico{color:var(--t6);margin-top:.15rem} .callout p{font-size:.86rem;color:var(--t7);line-height:1.65} .callout strong{font-weight:700} /* ---------- Conditions (editorial index) ---------- */ #conditions{background:linear-gradient(180deg,var(--g50),var(--off))} .cond-list{margin-top:var(--sp-10);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-10) var(--sp-8)} .cond-row{display:block} .cond-label{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--t7)} .cond-label h3{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--ink);line-height:1.25} .cond-count{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--t7);flex-shrink:0} .cond-tags{columns:1} .tag{display:block;font-size:.875rem;color:var(--g600);padding:.4rem 0;border-bottom:1px solid var(--g100)} .tag:last-child{border-bottom:none} .tag:hover{border-color:var(--t3);color:var(--t7)} .tag .ico{display:none} @media(max-width:900px){.cond-list{grid-template-columns:repeat(2,1fr);gap:var(--sp-10)}} @media(max-width:520px){.cond-list{grid-template-columns:1fr}} /* ---------- About ---------- */ #about{position:relative} .about-grid{display:grid;grid-template-columns:1.5fr .82fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;max-width:none} .about-main .bt{max-width:62ch} .about-aside{position:sticky;top:104px} .about-pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.34;color:var(--glt);border-left:2px solid var(--gold);padding-left:1.4rem;margin-bottom:1.8rem} .about-pull em{color:#fff} @media(max-width:980px){.about-aside{position:static}.about-main .bt{max-width:62ch}} .about-sig{font-family:var(--script);font-weight:600;font-size:clamp(2.5rem,4vw,3.3rem);line-height:.85;color:#fff;transform:rotate(-2deg);transform-origin:left center} .about-role{margin-top:1.2rem;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.74);line-height:1.6;max-width:36ch} .cred-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem} .cred-pills .chip{background:transparent;border-color:rgba(223,192,138,.4);color:var(--glt);box-shadow:none} .cred-pills .chip .ico{color:var(--glt)} /* ---------- How it works (editorial steps) ---------- */ #how{background:var(--white)} .steps{margin-top:var(--sp-10);display:flex;flex-direction:column;gap:0;position:relative} .step{display:grid;grid-template-columns:auto 1fr;gap:2rem;padding:2rem 0;border-top:1px solid var(--g100);align-items:start} .step:last-child{border-bottom:1px solid var(--g100)} .step-num{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:400;color:var(--t6);line-height:.9;font-style:italic} .step-body h3{font-family:var(--serif);font-size:var(--fs-h3);font-weight:400;color:var(--ink);margin-bottom:.5rem} .step-body p{font-size:.95rem;color:var(--g600);line-height:1.7;max-width:54ch} .step-meta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;background:var(--t1);color:var(--t7);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:2rem} .step-meta .ico{width:.9rem;height:.9rem;color:var(--t5)} /* --- Results: editorial quotes + client story (no icons) --- */ .quote{margin-top:var(--sp-10);padding:2.1rem 0;border-top:1px solid var(--g300)} .quote:first-child{border-top:none;padding-top:.5rem} .quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.6;color:var(--ink)} .quote.feature blockquote{font-size:clamp(1.35rem,2.4vw,1.95rem);color:var(--t7)} .quote.feature blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:3.4rem;line-height:.5;color:var(--glt);margin-bottom:.7rem} .quote figcaption{margin-top:1.1rem;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t7)} .quote figcaption span{display:block;margin-top:.25rem;font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--g500);font-size:.86rem} .story{margin-top:4rem;padding-top:3rem;border-top:2px solid var(--gold)} .story-kicker{font-size:var(--fs-eye);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--t7);margin-bottom:.8rem} .story-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ink);line-height:1.2;margin-bottom:1.8rem;max-width:24ch} .story-h em{font-style:italic;color:var(--t6)} .story-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start} .story-narrative .bt+.bt{margin-top:var(--sp-4)} .story-ba{display:flex;flex-direction:column;gap:1.2rem} .ba{border-left:2px solid var(--g300);padding-left:1.1rem} .ba-after{border-left-color:var(--t4)} .ba-k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g500);margin-bottom:.4rem} .ba-after .ba-k{color:var(--t6)} .ba p{font-size:.92rem;color:var(--g600);line-height:1.55} .story-foot{margin-top:var(--sp-7);font-size:.82rem;font-style:italic;color:var(--g500)} .results-list{margin-top:var(--sp-10);max-width:820px} .result{padding:2.6rem 0;border-top:1px solid var(--g300)} .result:first-child{border-top:none;padding-top:.5rem} .result .quote{border-top:none;padding:0} .ba-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);margin-top:var(--sp-6)} @media(max-width:620px){.ba-row{grid-template-columns:1fr;gap:1rem}} @media(max-width:760px){.story-grid{grid-template-columns:1fr;gap:1.8rem}} .ph{color:var(--gold);font-style:normal;font-weight:600} /* ---------- FAQ ---------- */ #faq{background:var(--white)} .faq-list{max-width:760px;margin:var(--sp-10) auto 0} .faq{border-bottom:1px solid var(--g100)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem .2rem;font-family:var(--serif);font-size:1.1rem;color:var(--ink);transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--t6)} .faq .pm{position:relative;width:18px;height:18px;flex-shrink:0} .faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--t5);transition:transform .3s var(--ease)} .faq .pm::before{top:8px;left:0;width:18px;height:2px} .faq .pm::after{top:0;left:8px;width:2px;height:18px} .faq[open] .pm::after{transform:rotate(90deg);opacity:0} .faq-a{padding:0 .2rem 1.4rem} .faq-a p{font-size:.95rem;color:var(--g600);line-height:1.75;max-width:64ch} /* ---------- Lead magnet ---------- */ #guide{padding:clamp(3.5rem,7vw,5.5rem) 2rem} .guide-card{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-10);align-items:center} .guide-card h2{margin-bottom:.6rem} .guide-card .bt{color:rgba(255,255,255,.78)} .guide-aside{text-align:center} .guide-doc{width:128px;height:162px;margin:0 auto 1.3rem;border-radius:.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(223,192,138,.4);display:flex;align-items:center;justify-content:center;color:var(--glt);transform:rotate(-3deg);box-shadow:0 16px 40px rgba(0,0,0,.28)} .guide-doc .ico{width:2.4rem;height:2.4rem} /* ---------- Booking ---------- */ #book{background:linear-gradient(180deg,var(--g50),var(--off))} .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:start;max-width:var(--maxw);margin:0 auto} .book-list{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:.8rem} .book-list li{display:flex;gap:.75rem;align-items:center;font-size:.93rem;color:var(--g600);line-height:1.45;list-style:none} .book-list .ico{width:.8rem;height:.8rem;padding:.3rem;background:var(--t1);color:var(--t6);border-radius:50%;box-sizing:content-box;flex-shrink:0;stroke-width:2.6} .bcard{background:var(--white);border:1px solid var(--g100);border-top:3px solid var(--gold);border-radius:var(--rad);overflow:hidden;box-shadow:var(--s2)} .bcard-h{background:radial-gradient(120% 140% at 80% 0%,var(--t7),var(--t8));padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .bcard-h h2,.bcard-h h3{font-family:var(--serif);font-size:1.2rem;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance} .bcard-h p{font-size:.78rem;color:rgba(255,255,255,.82);margin-top:.25rem} .free-pill{background:var(--gold);color:var(--t8);font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1.25rem;border-radius:2rem;white-space:nowrap;box-shadow:0 5px 16px rgba(201,169,110,.45)} .bcard-b{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-5)} .bcard-b>p{font-size:.93rem;color:var(--ink);line-height:1.7} .fdiv{display:flex;align-items:center;gap:.8rem} .fdiv::before,.fdiv::after{content:"";flex:1;height:1px;background:var(--g100)} .fdiv span{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);white-space:nowrap} .fstep{display:flex;flex-direction:column;gap:.55rem} .fsub{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:linear-gradient(180deg,color-mix(in oklch,var(--t5) 34%,var(--t6)),var(--t6));color:#fff;border:none;border-radius:var(--rad-sm);padding:1rem;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .25s var(--ease),box-shadow .25s;box-shadow:0 6px 18px rgba(26,80,73,.2),inset 0 1px 0 rgba(255,255,255,.13)} .fsub.alt{background:linear-gradient(180deg,var(--t6),var(--t7))} .fsub:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,80,73,.28)} .fsub .ico{width:1.05rem;height:1.05rem;stroke-width:1.8;transition:transform .25s var(--ease)} .fsub:hover .ico{transform:translateX(3px)} .fnote{font-size:.75rem;color:var(--g500);text-align:center;font-style:italic} .bcard-intro{font-size:.93rem;color:var(--ink);line-height:1.7} .btrust{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:-.3rem 0 .1rem} .btrust li{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--t7)} .btrust .ico{width:.85rem;height:.85rem;color:var(--t5);stroke-width:2.8;flex-shrink:0} .bsteps{list-style:none;display:flex;flex-direction:column;gap:var(--sp-6);margin:.2rem 0} .bstep{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;position:relative} .bstep:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:-1.5rem;width:2px;background:var(--g100)} .bstep-num{width:32px;height:32px;border-radius:50%;background:var(--t6);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.05rem;flex-shrink:0;z-index:1} .bstep-body{display:flex;flex-direction:column;gap:.65rem;padding-top:.2rem} .bstep-label{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t7)} /* ---------- Dedicated pages (about / guide / book) ---------- */ /* Slim, distraction-free header for the booking page */ .nav-slim .nav-links,.nav-slim .burger{display:none} .nav-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g600);transition:color .2s} .nav-back:hover{color:var(--t6)} .nav-back .ico{width:1rem;height:1rem;stroke-width:1.9;transition:transform .25s var(--ease)} .nav-back:hover .ico{transform:translateX(-3px)} /* Shared page header type */ .page-title{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1.06;letter-spacing:var(--track-tight);color:var(--ink);text-wrap:balance;margin-bottom:var(--sp-4)} .page-title em{font-style:italic;color:var(--t6)} .bg-deep .page-title{color:#fff} .bg-deep .page-title em{color:var(--glt)} .page-lead{font-size:var(--fs-lead);line-height:1.7;color:var(--g600);max-width:56ch} .bg-deep .page-lead{color:rgba(255,255,255,.8)} /* Booking page */ .book-hero .book-grid{align-items:start} .is-sticky{position:sticky;top:96px} .expect{list-style:none;margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-5)} .expect li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start} .expect .ico{width:.9rem;height:.9rem;padding:.4rem;background:var(--t1);color:var(--t6);border-radius:50%;box-sizing:content-box;stroke-width:2.6;margin-top:.1rem;flex-shrink:0} .expect b{display:block;color:var(--ink);font-weight:700;font-size:.98rem;margin-bottom:.15rem} .expect span{font-size:.92rem;color:var(--g600);line-height:1.55} .who{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--g100);display:flex;align-items:center;gap:1.1rem} .who-sig{font-family:var(--script);font-weight:600;font-size:2.3rem;line-height:.8;color:var(--t6);transform:rotate(-2deg);flex-shrink:0} .who-meta b{display:block;font-family:var(--sans);color:var(--ink);font-weight:700;font-size:.92rem} .who-meta span{font-size:.82rem;color:var(--g500);line-height:1.5} .bnote{margin-top:.1rem;font-size:.78rem;color:var(--g600);display:flex;align-items:flex-start;gap:.45rem;line-height:1.5} .bnote .ico{width:.85rem;height:.85rem;color:var(--t5);stroke-width:2.8;flex-shrink:0;margin-top:.15rem} .book-testi{max-width:640px;margin:0 auto;text-align:center} .book-testi blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.5;color:var(--t7)} .book-testi blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:3rem;line-height:.4;color:var(--glt);margin-bottom:.6rem} .book-testi figcaption{margin-top:var(--sp-5);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t7)} @media(max-width:980px){.is-sticky{position:static}.book-hero .book-grid{gap:var(--sp-12)}} /* ---------- Footer ---------- */ footer{background:radial-gradient(130% 160% at 12% 0%,var(--t7),var(--t8) 72%);padding:4rem 2rem 2.6rem;position:relative;isolation:isolate} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent 65%)} footer::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay;pointer-events:none} .fi{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem} .fb{display:flex;align-items:center;gap:.9rem} .footer-badge{width:46px;height:46px;border-radius:11px;background:url('assets/logo-mark.png') center/cover no-repeat;flex-shrink:0;box-shadow:var(--s1)} .footer-name{display:block;font-size:.9rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;line-height:1} .fb p{font-size:.74rem;color:rgba(255,255,255,.68);margin-top:.35rem} .fnav{display:flex;gap:1.6rem;flex-wrap:wrap} .fnav a{font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.74);transition:color .2s} .fnav a:hover{color:#fff} .fdisc{max-width:var(--maxw);margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.72rem;color:rgba(255,255,255,.72);line-height:1.7} .fdisc b{color:rgba(255,255,255,.85);font-weight:600} /* ---------- Sticky mobile CTA ---------- */ #mobileCta{position:fixed;left:0;right:0;bottom:0;z-index:280;display:none;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(248,252,251,.94);backdrop-filter:blur(8px);border-top:1px solid var(--g100);transform:translateY(110%);transition:transform .35s var(--ease)} #mobileCta.show{transform:none} #mobileCta .btn{width:100%} /* ---------- Reveal animation ---------- */ .rev{opacity:0;transform:translateY(20px) scale(.99);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rev.in{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s} #hero .rev{transition-duration:.55s} .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .72s var(--ease),transform .72s var(--ease)} .stagger.in>*{opacity:1;transform:none} /* ---------- Interaction craft ---------- */ /* Gentle spring (subtle overshoot) for tactile feedback + the magnetic return */ :root{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.103 24.3%,1.103,1.084 27.5%,1.013 33.9%,.995,.991,.998 49.3%,1.001,1)} /* Tactile press — a small physical push on any button */ .btn:active,.fsub:active{transform:scale(.97)} .btn-primary:active{transform:translateY(0) scale(.97)} .link:active{transform:translateY(1px)} /* Signature: the leaky-gut cascade builds step-by-step, tied to scroll position. Progressive enhancement — only when scroll-driven animations are supported AND motion is allowed; everywhere else (incl. reduced-motion) the steps are simply visible. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .cascade-b .cstep{opacity:0;transform:translateY(14px);animation:cstepIn linear both;animation-timeline:view();animation-range:entry 0% cover 32%} @keyframes cstepIn{to{opacity:1;transform:none}} } } /* ---------- Responsive ---------- */ /* Let grid/flex children shrink so a wide child never forces a track past the viewport */ .hero-grid>*,.split>*,.about-grid>*,.book-grid>*,.guide-card>*,.story-grid>*,.cred-row>*{min-width:0} .hero-title,h1,h2,h3{overflow-wrap:break-word} .eyebrow{max-width:100%;flex-wrap:wrap} @media(max-width:980px){ .nav-links{display:none} .burger{display:flex} #mobileCta{display:block} .hero-grid,.split,.about-grid,.book-grid,.guide-card{grid-template-columns:1fr;gap:var(--sp-12)} .hero-side{min-height:0;margin-top:var(--sp-4)} .symptom-card{position:static;width:auto;max-width:340px;margin:var(--sp-5) auto 0;left:0;bottom:0} } @media(max-width:560px){ #hero{padding:7rem 1.25rem 0} .sec{padding:var(--sp-section) 1.25rem} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .step{grid-template-columns:auto 1fr;gap:var(--sp-5)} .brand-name{font-size:.78rem;letter-spacing:.1em} } @media(max-width:380px){.brand-name{display:none}} /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .rev,.stagger>*{opacity:1!important;transform:none!important;transition:none!important} .btn,.pathway,.tag{transition:none!important} .eyebrow::before,.eyebrow.c::after{transition:none!important} #hero::before{animation:none!important} #mobileCta{transition:none} } /* ---------- Nav enhancements (gradient underline + scroll-spy, gold hairline, condense, reading-progress, consistent CTA motion) ---------- */ .nav-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:350;pointer-events:none;will-change:transform;background:linear-gradient(90deg,var(--t5),var(--gold))} .nav-links a:not(.nb){position:relative} .nav-links a:not(.nb)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--t5),var(--gold));transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--ease)} .nav-links a:not(.nb):hover::after,.nav-links a:not(.nb).is-active::after{transform:scaleX(1)} .nav-links a:not(.nb).is-active{color:var(--t7)} #navbar{background:rgba(250,248,242,.85)} #navbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;opacity:.5;transition:opacity .3s;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--glt) 50%,var(--gold) 70%,transparent)} #navbar.scrolled::after{opacity:.95} .nav-inner{transition:padding .3s var(--ease)} .brand-badge{transition:transform .3s var(--ease)} #navbar.scrolled .nav-inner{padding-top:.55rem;padding-bottom:.55rem} #navbar.scrolled .brand-badge{transform:scale(.9)} .nav-links .nb{transition:background .2s,color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)} .nav-links .nb:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,80,73,.26)} .nav-links .nb:active{transform:translateY(0) scale(.97)} @media(prefers-reduced-motion:reduce){ .nav-progress,.nav-inner,.brand-badge,.nav-links a:not(.nb)::after,.nav-links .nb{transition:none} }