:root { --ink:#182b28; --cream:#fffdf5; --lime:#d9fb56; --coral:#ff7763; --sky:#aee5e4; --yellow:#ffc94d; --muted:#64716d; --line:#dce3d9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.75rem; } .site-header { position:relative; z-index:4; } .nav-wrap { max-width:1240px; margin:auto; min-height:86px; padding:0 32px; display:flex; justify-content:space-between; align-items:center; } .brand { display:inline-flex; align-items:center; gap:9px; font-family:"Plus Jakarta Sans",sans-serif; font-size:21px; font-weight:800; letter-spacing:-1px; } .brand > span:last-child > span { color:#65a21b; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--ink); background:var(--lime); border-radius:50% 50% 50% 7px; font-size:16px; transform:rotate(-12deg); } .site-nav { display:flex; align-items:center; gap:29px; font-size:14px; font-weight:600; } .site-nav > a:not(.nav-cta) { padding:10px 0; } .nav-cta { background:var(--ink); color:white; padding:13px 18px; border-radius:99px; } .nav-cta span { color:var(--lime); margin-left:5px; } .menu-toggle { display:none; background:none; border:0; padding:8px; } .menu-toggle span { display:block; width:23px; height:2px; background:var(--ink); margin:5px; }
.hero { min-height:600px; display:grid; grid-template-columns:minmax(300px, .95fr) minmax(450px, 1.05fr); gap:55px; max-width:1240px; margin:0 auto; padding:54px 32px 75px; align-items:center; overflow:hidden; } .eyebrow { display:flex; gap:9px; align-items:center; color:#5e7a24; margin:0 0 17px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; } .eyebrow span { width:23px; height:2px; background:#7cac28; } h1,h2,h3 { font-family:"Plus Jakarta Sans",sans-serif; letter-spacing:-2.4px; margin:0; } h1 { font-size:clamp(48px,5.8vw,78px); line-height:1.01; max-width:620px; } h1 em,h2 em { font-style:normal; color:#6da220; } .hero-text { max-width:500px; margin:24px 0 29px; color:#52615b; font-size:17px; line-height:1.65; } .hero-actions { display:flex; gap:25px; align-items:center; flex-wrap:wrap; } .button { display:inline-flex; gap:19px; align-items:center; justify-content:center; padding:16px 21px; border-radius:6px; font-weight:700; transition:transform .2s, box-shadow .2s; } .button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.12); } .button-primary { background:var(--lime); } .button span,.button b { font-size:20px; } .text-link { font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px; } .text-link span { margin-left:7px; color:#689f1e; } .hero-note { display:flex; gap:9px; margin-top:36px; font-size:13px; color:#52615b; align-items:center; } .note-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e8f5cb; color:#659a1d; font-weight:700; } .hero-visual { position:relative; min-height:465px; } .hero-visual > img { position:absolute; z-index:1; width:87%; height:100%; right:0; top:0; border-radius:48% 48% 14% 48%; object-fit:cover; box-shadow:0 23px 45px rgba(29, 51, 27, .15); } .hero-blob { width:94%; height:94%; left:2%; top:4%; position:absolute; background:var(--yellow); border-radius:52% 40% 45% 24%; transform:rotate(-7deg); } .floating-card { position:absolute; z-index:2; background:white; box-shadow:0 10px 23px rgba(30,45,35,.14); border-radius:10px; } .card-cal { left:-8px; top:23%; width:162px; padding:16px 16px 14px; } .card-cal strong { display:block; font-size:14px; }.card-cal span { display:block; font-size:11px; color:var(--muted); line-height:1.35; margin-top:4px; }.card-cal i { position:absolute; right:12px; top:-14px; display:grid; place-items:center; color:var(--ink); background:var(--lime); border-radius:50%; width:29px; height:29px; font-style:normal; }.card-lift { bottom:18px; right:-9px; padding:14px 16px; display:flex; gap:10px; align-items:center; font-size:12px; }.dumbbell { display:grid; place-items:center; color:#fff; background:var(--coral); width:26px; height:26px; border-radius:50%; font-size:18px; }
.section-pad { padding:108px max(32px, calc((100vw - 1176px)/2)); }.benefits { background:#f0f7e3; }.section-intro { display:flex; align-items:end; justify-content:space-between; }.section-intro h2,.plans h2,.how h2,.booking h2 { font-size:clamp(35px,4vw,52px); line-height:1.08; max-width:580px; }.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:49px; }.benefit-grid article { background:#fffef9; padding:27px; min-height:221px; border-radius:9px; }.feature-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:25px; border-radius:10px; font-size:25px; font-weight:700; }.lime { background:var(--lime); }.coral { background:#ffd6cf; }.sky { background:#cdf2f0; }.benefit-grid h3 { letter-spacing:-1px; font-size:19px; }.benefit-grid p { color:var(--muted); font-size:14px; line-height:1.6; margin:12px 0 0; }
.plans { background:var(--cream); }.plans-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; }.plans-heading > p { max-width:350px; color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 4px; }.plan-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:47px; }.plan-card { overflow:hidden; border-radius:8px; min-height:365px; position:relative; }.plan-card-image > img { width:100%; height:100%; position:absolute; object-fit:cover; transition:transform .5s; }.plan-card-image:hover > img { transform:scale(1.04); }.plan-card-overlay { position:absolute; inset:auto 0 0; padding:74px 23px 22px; color:white; background:linear-gradient(transparent,rgba(10,22,13,.86)); }.plan-card p { font-size:10px; letter-spacing:1.2px; font-weight:700; margin:0 0 12px; }.plan-card h3 { font-size:27px; letter-spacing:-1.4px; }.plan-card-overlay span { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; }.plan-card-overlay b { color:var(--lime); font-size:20px; line-height:.6; }.plan-card-colour { background:var(--coral); padding:27px; color:var(--ink); display:flex; flex-direction:column; }.plan-card-colour h3 { font-size:34px; max-width:240px; line-height:1.05; }.plan-card-colour > span { font-size:14px; line-height:1.5; max-width:220px; margin-top:18px; }.card-dots { margin-top:auto; display:flex; gap:5px; }.card-dots i { width:12px; height:12px; border-radius:50%; background:#ff9a8b; }.card-dots i:nth-child(2) { background:var(--lime); }.card-dots i:nth-child(3) { background:#ffdf88; }.plan-card-colour > a { position:absolute; right:21px; bottom:18px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; font-size:22px; }.plan-footnote { text-align:center; margin:28px 0 0; font-size:14px; color:var(--muted); }.plan-footnote a { color:var(--ink); font-weight:700; border-bottom:1px solid var(--ink); }
.how { display:grid; grid-template-columns:1fr 1fr; gap:100px; background:var(--ink); color:#fff; align-items:center; }.how-image { position:relative; min-height:490px; }.how-image img { width:100%; height:100%; min-height:490px; object-fit:cover; border-radius:9px 9px 80px 9px; }.small-sticker { position:absolute; right:-38px; bottom:30px; width:117px; height:117px; padding-top:34px; text-align:center; background:var(--lime); color:var(--ink); border-radius:50%; font-family:"Plus Jakarta Sans"; font-size:15px; line-height:1.25; transform:rotate(-12deg); }.how .eyebrow { color:var(--lime); }.how .eyebrow span { background:var(--lime); }.how h2 em { color:var(--lime); }.how ol { list-style:none; margin:39px 0 31px; padding:0; }.how li { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18); }.how li b { color:var(--lime); font-size:13px; }.how li h3 { font-size:17px; letter-spacing:-.7px; }.how li p { color:#b9c4bd; font-size:13px; margin:7px 0 0; line-height:1.5; }.button-dark { background:var(--lime); color:var(--ink); }.quote-section { background:var(--yellow); text-align:center; padding:65px 25px; }.quote-section p { font-family:"Plus Jakarta Sans"; font-size:clamp(25px,3.4vw,42px); letter-spacing:-1.5px; margin:0; }.quote-section span { display:block; margin-top:15px; font-size:11px; font-weight:700; letter-spacing:1.5px; }
.booking { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }.booking-copy > p:last-child { color:var(--muted); line-height:1.65; max-width:510px; margin:23px 0 0; }.booking-card { background:#e9f5d1; border-radius:9px; padding:42px; display:flex; flex-direction:column; align-items:flex-start; }.mail-icon { display:grid; place-items:center; width:45px; height:45px; background:var(--lime); border-radius:50%; font-size:20px; }.booking-card p { margin:28px 0 9px; color:#638424; letter-spacing:1px; font-size:11px; font-weight:700; }.booking-card > a:not(.button) { font-family:"Plus Jakarta Sans"; font-size:clamp(20px,2.2vw,28px); font-weight:700; letter-spacing:-1px; border-bottom:2px solid var(--ink); }.booking-card > span { color:var(--muted); font-size:13px; margin:12px 0 26px; }.booking-card .button { width:100%; }.booking-card .button b { margin-left:auto; } footer { background:#f0f7e3; padding:48px max(32px, calc((100vw - 1176px)/2)) 26px; display:grid; grid-template-columns:1.2fr 1.6fr auto; gap:15px; align-items:start; } footer p { margin:7px 0 0; color:var(--muted); font-size:13px; } footer div { display:flex; gap:19px; font-size:13px; font-weight:600; justify-content:flex-end; } footer small { grid-column:1/-1; border-top:1px solid #d7e0ca; padding-top:20px; margin-top:28px; color:var(--muted); font-size:11px; }
@media (max-width:760px) { .nav-wrap { min-height:72px; padding:0 20px; } .menu-toggle { display:block; position:relative; z-index:5; }.site-nav { display:none; position:absolute; left:15px; right:15px; top:62px; padding:18px; background:var(--cream); border:1px solid var(--line); box-shadow:0 12px 30px rgba(20,43,40,.12); border-radius:8px; flex-direction:column; align-items:stretch; gap:7px; }.site-nav.open { display:flex; }.site-nav a { padding:12px!important; }.nav-cta { text-align:center; margin-top:3px; }.hero { grid-template-columns:1fr; gap:35px; padding:45px 20px 63px; }.hero-visual { min-height:375px; width:95%; margin-left:auto; }.hero-visual > img { width:92%; }.card-cal { left:-12px; }.card-lift { right:-14px; }.section-pad { padding:75px 20px; }.section-intro,.plans-heading { display:block; }.benefit-grid,.plan-grid { grid-template-columns:1fr; margin-top:35px; }.benefit-grid { gap:14px; }.benefit-grid article { min-height:0; }.plan-card { min-height:330px; }.plans-heading > p { margin-top:18px; }.how,.booking { grid-template-columns:1fr; gap:43px; }.how-image,.how-image img { min-height:355px; }.how { padding-top:75px; padding-bottom:75px; }.small-sticker { right:-9px; bottom:-19px; width:105px; height:105px; padding-top:29px; }.booking-card { padding:29px; }.quote-section { padding:53px 20px; } footer { padding:40px 20px 23px; grid-template-columns:1fr; } footer div { justify-content:flex-start; flex-wrap:wrap; margin-top:9px; } footer small { margin-top:20px; } }