:root { --green:#76a464; --green-deep:#466c3d; --rose:#aa5278; --gold:#e4b44f; --cream:#f7f4f2; --ink:#31332e; --pale-green:#edf3e9; --line:#dce7d8; }
    * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"Josefin Sans",sans-serif; font-size:18px; font-weight:400; line-height:1.58; } a { color:inherit; text-decoration:none; }
    .prototype { padding:8px 20px; color:#fff; background:var(--green-deep); text-align:center; font:600 11px "Fjalla One",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
    .page { display:none; } .page.active { display:block; }
    header { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1180px; margin:auto; padding:18px 26px; } .brand { display:flex; align-items:center; gap:11px; font:700 17px Allerta,sans-serif; } .brand img { width:43px; height:43px; object-fit:contain; } nav { display:flex; gap:26px; font:600 13px "Fjalla One",sans-serif; letter-spacing:.08em; text-transform:uppercase; } nav a { padding:7px 0; border-bottom:2px solid transparent; } nav a:first-child { color:var(--green-deep); border-color:var(--green); } nav a.vivants { color:inherit; }
    .button { display:inline-block; padding:15px 21px; border:0; background:var(--gold); color:#3d330c; font:600 14px "Fjalla One",sans-serif; letter-spacing:.06em; text-transform:uppercase; } .button.green { color:#fff; background:var(--green-deep); } .button:hover { filter:brightness(.96); }
    .hero { padding:104px 24px 98px; color:#fff; background:linear-gradient(135deg,var(--green-deep),var(--green)); } .content { width:min(800px,calc(100% - 48px)); margin:auto; } .eyebrow { margin:0 0 21px; color:var(--gold); font:600 14px "Fjalla One",sans-serif; letter-spacing:.15em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:30px; font:700 clamp(39px,5.8vw,68px)/1.08 Allerta,sans-serif; letter-spacing:.01em; } .hero .lead { max-width:760px; margin-bottom:30px; font-size:21px; line-height:1.48; } .proofs { display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; } .proofs span { padding:8px 11px; border:1px solid rgba(255,255,255,.45); font-size:14px; }
    .home-hero { min-height:620px; padding:0; display:grid; grid-template-columns:7fr 3fr; overflow:hidden; color:#fff; background:#fff; } .home-copy { align-self:stretch; padding:92px max(7vw,40px); display:flex; flex-direction:column; justify-content:center; background:var(--rose); } .home-copy .button { align-self:flex-start; } .home-copy h1 { font:400 clamp(57px,6.5vw,96px)/.88 "Give You Glory",cursive; letter-spacing:.03em; } .home-copy h1 strong { display:block; margin-top:15px; font:700 clamp(30px,3.5vw,50px)/1.08 Allerta,sans-serif; letter-spacing:.025em; text-transform:uppercase; } .home-image { position:relative; min-height:620px; background-color:#fff; background-image:url('images/hero-pascale.png'); background-position:center; background-repeat:no-repeat; background-size:cover; } .home-image:after { content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent,rgba(49,51,46,.10)); } .home-book-cover { position:absolute; z-index:2; left:-48px; bottom:7%; width:195px; box-shadow:12px 14px 0 var(--gold); } .home-note { position:absolute; z-index:1; right:9%; bottom:9%; max-width:270px; padding:21px; color:var(--ink); background:rgba(247,244,242,.94); font-size:17px; line-height:1.35; } .home-paths { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin-top:36px; } .home-path { min-height:295px; padding:38px; background:#fff; border-top:8px solid var(--green); display:flex; flex-direction:column; align-items:flex-start; } .home-path.vivants-path { border-color:var(--rose); } .home-path h3 { margin-top:0; } .home-path p { font-size:18px; } .home-path .button { margin-top:auto; } .home-book { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; background:#ede6e1; } .home-book .content { width:auto; margin:0; padding:78px max(7vw,40px); } .home-book-inner { display:flex; align-items:center; gap:30px; } .home-book-inner img { width:135px; box-shadow:9px 10px 0 var(--gold); } .home-book-inner h2 { margin-bottom:12px; font-size:28px; } .home-quote { padding:38px; border-left:6px solid var(--green); font:400 28px/1.25 "Give You Glory",cursive; }
    section { padding:80px 0; } section.alt { background:var(--pale-green); } section.dark { color:#fff; background:var(--green-deep); } #vivants { background:var(--rose); } h2 { margin-bottom:30px; color:var(--green-deep); font:700 clamp(31px,4vw,46px)/1.16 Allerta,sans-serif; } .dark h2 { color:#fff; } h3 { margin:42px 0 14px; color:var(--green-deep); font:700 27px/1.18 Allerta,sans-serif; } .dark h3 { color:var(--gold); } p { margin-bottom:20px; } .callout { margin:36px 0; padding:26px 30px; border-left:6px solid var(--gold); background:#fff; font:400 28px/1.28 "Give You Glory",cursive; } .dark .callout { color:var(--ink); }
    ul { margin:0 0 22px; padding-left:24px; } li { margin:8px 0; } .two-gestures { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:35px 0; } .gesture { padding:31px; background:#fff; border-top:7px solid var(--green); } .gesture h3 { margin-top:0; } .steps { display:grid; gap:0; margin:35px 0; } .step { padding:24px 0; border-top:1px solid var(--line); } .step h3 { margin:0 0 13px; } .step:last-child { border-bottom:1px solid var(--line); }
    .offers { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:35px; } .offer { padding:33px; background:#fff; border-top:8px solid var(--green); } .offer.featured { color:#fff; background:var(--green); border-color:var(--gold); } .offer h3 { margin:0 0 18px; } .offer.featured h3 { color:#fff; } .price { margin:0 0 26px; color:var(--rose); font:700 46px Allerta,sans-serif; } .featured .price { color:var(--gold); } .offer .button { margin-top:10px; } .credentials { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:34px 0; } .credential { padding:23px; color:var(--ink); background:#fff; } .credential b { display:block; margin-bottom:7px; color:var(--green-deep); font:700 25px Allerta,sans-serif; }
    .contact { padding:76px 0; color:#fff; background:var(--green); } .contact h2 { color:#fff; } .form-note { padding:22px; border:1px solid rgba(255,255,255,.5); font-size:16px; } .faq { padding-bottom:95px; } .faq h3 { margin:0; padding:24px 0 12px; border-top:1px solid var(--line); } .faq p { margin-bottom:25px; } footer { padding:32px 24px; color:#fff; background:var(--ink); } footer div { width:min(800px,calc(100% - 48px)); margin:auto; font-size:14px; }
    .vivants-hero { padding:90px 0 80px; color:#fff; background:var(--rose); } .vivants-hero h1,.about-hero h1 { margin-bottom:20px; font:700 clamp(38px,5vw,68px)/1.08 Allerta,sans-serif; letter-spacing:.02em; } .vivants-intro { background:#fff; } .vivants-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; } .vivants-manifesto { padding:36px; border:1px solid rgba(170,82,120,.38); background:var(--cream); } .vivants-manifesto p { font-size:21px; line-height:1.45; } .vivants-steps { counter-reset:step; margin:0; padding:0; } .vivants-steps li { position:relative; list-style:none; padding:0 0 25px 58px; font-size:18px; line-height:1.4; } .vivants-steps li:before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-5px; width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--rose); border-radius:50%; font:700 18px Allerta,sans-serif; } .about-hero { padding:90px 0 80px; color:#fff; background:#6b5552; } .about-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:start; } .about-visual { text-align:center; } .about-visual img { width:100%; max-width:270px; } .about-visual p { margin:18px auto; max-width:330px; color:var(--muted); font-size:16px; line-height:1.4; } .about-copy p { font-size:19px; line-height:1.55; }
    nav a.active { color:var(--green-deep); border-color:var(--green); }
    nav a:first-child:not(.active) { color:inherit; border-color:transparent; }
    @media (max-width:680px) { body { font-size:17px; } header { padding:13px 18px; } nav { display:none; } .brand { font-size:14px; } .brand img { width:36px; height:36px; } .button { padding:13px 16px; font-size:12px; } .hero { padding:69px 0 65px; } .home-hero,.home-paths,.home-book,.vivants-layout,.about-layout { grid-template-columns:1fr; } .home-copy { padding:65px 24px; } .home-copy h1 { font-size:64px; } .home-copy h1 strong { font-size:32px; } .home-image { min-height:330px; background-size:auto 96%; } .home-book-cover { left:20px; bottom:6%; width:145px; } .home-book { gap:0; } .home-book .content { padding:58px 24px; } .home-book-inner { align-items:flex-start; } .home-book-inner img { width:105px; } .content { width:min(100% - 40px,800px); } .hero .lead { font-size:19px; } section { padding:58px 0; } h2 { font-size:32px; } h3 { font-size:25px; } .two-gestures,.offers,.credentials { grid-template-columns:1fr; } .callout { padding:24px; font-size:26px; } }