:root{
  --blue:#0a5be0; --blue-dark:#062d98; --yellow:#ffc91a; --teal:#12b0ee;
  --ink:#062d98; --cream:#f3fbff; --white:#fff; --pink:#ff8a1f; --green:#58c914;
  --shadow:0 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}

body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);font-size:1.125rem;line-height:1.55;overflow-x:hidden;font-size-adjust:from-font}
h1,h2,h3{font-family:"Baloo 2",system-ui,sans-serif;line-height:1.05;font-weight:800}
h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:.4em}
h3{font-size:1.4rem}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.center{text-align:center}
.lead{font-size:1.15rem;max-width:640px;margin:0 auto 36px}

.btn{display:inline-block;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.25rem;text-decoration:none;
  background:var(--yellow);color:var(--ink);border:4px solid var(--ink);border-radius:999px;padding:12px 30px;
  box-shadow:var(--shadow);cursor:pointer}
.btn.teal{background:var(--blue);color:var(--white)}
.card{background:var(--white);border:4px solid var(--ink);border-radius:28px;box-shadow:var(--shadow);padding:28px}

/* header */
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:4px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Baloo 2";font-weight:800;font-size:1.45rem}
.logo-mark{width:48px;height:48px;border-radius:50%}
.nav .btn{font-size:1rem;padding:6px 18px;box-shadow:0 4px 0 var(--ink)}

/* hero */
.hero{background:#fff;color:var(--ink);position:relative;padding:48px 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.badge{display:inline-block;background:var(--pink);color:var(--white);border:3px solid var(--ink);border-radius:999px;
  padding:4px 16px;font-weight:800;transform:rotate(-3deg);margin-bottom:18px}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.4rem)}
.hero h1 span{white-space:nowrap;color:var(--blue);background:linear-gradient(transparent 68%,var(--yellow) 68%);padding:0 .08em}
.hero p{font-size:1.25rem;margin:18px 0 26px;max-width:520px}
.price-tag{display:inline-block;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:20px;
  padding:6px 18px;font-family:"Baloo 2";font-weight:800;font-size:1.3rem;margin-left:12px;transform:rotate(3deg)}
.price-tag b{color:var(--blue);font-size:1.7rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero-logo{width:100%;max-width:460px;height:auto;margin:0 auto;display:block}

.star{position:absolute;font-size:2rem;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.35) rotate(18deg);opacity:.7}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:60px;display:block}

/* story */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.note{background:var(--yellow);transform:rotate(-1.5deg)}
.note p{font-size:1.15rem;margin-top:10px}
.sig{font-family:"Baloo 2";font-size:1.6rem;margin-top:14px}
.jobs{list-style:none;margin-top:14px}
.jobs li{padding:8px 0;border-bottom:2px dashed #d9d2c0;display:flex;gap:10px}
.jobs li:last-child{border:0}

/* pricing */
.pricing{background:var(--teal)}
.pricing h2,.pricing .lead{color:var(--white)}
.pricing h2{text-shadow:3px 3px 0 var(--ink)}
.plan{max-width:560px;margin:0 auto;position:relative}
.plan .ribbon{position:absolute;top:-20px;right:-10px;background:var(--pink);color:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:4px 14px;font-weight:800;transform:rotate(6deg)}
.amount{font-family:"Baloo 2";font-weight:800;font-size:5rem;line-height:1;color:var(--blue)}
.amount small{font-size:1.4rem;color:var(--ink)}
.checks{list-style:none;margin:18px 0 24px}
.checks li{padding:7px 0 7px 38px;position:relative;font-weight:700}
.checks li::before{content:"✓";content:"✓" / "";position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:50%;color:#fff;
  background:var(--green);border:3px solid var(--ink);display:grid;place-items:center;font-size:.85rem;font-weight:800}
.fine{font-size:.95rem;opacity:.85;margin-top:16px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;border:4px solid var(--ink);
  display:grid;place-items:center;font-family:"Baloo 2";font-weight:800;font-size:1.7rem;margin-bottom:12px}
.step:nth-child(2) .num{background:var(--pink)}
.step:nth-child(3) .num{background:var(--green)}

/* addons */
.addons{background:var(--yellow)}
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.addon{padding:22px}
.addon .emoji{font-size:2.2rem}
.addon .cost{display:inline-block;margin-top:10px;background:var(--cream);border:3px solid var(--ink);border-radius:999px;padding:2px 14px;font-weight:800}

/* wall */
.wall-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.slot{border:4px dashed var(--ink);border-radius:22px;padding:16px 10px;text-align:center;background:var(--white);text-decoration:none;display:block}
.slot.filled{border-style:solid;box-shadow:var(--shadow)}
.slot .big{font-family:"Baloo 2";font-weight:800;font-size:1.8rem;line-height:1;color:var(--blue)}
.slot h3{font-size:1.05rem;margin-top:4px}
.slot p{font-size:.85rem}
.slot.filled{background:var(--yellow)}
.refer{display:flex;gap:18px;align-items:center;margin-top:32px;background:var(--green);color:#fff}
.refer .emoji{font-size:3rem}

/* milestones */
.miles{background:var(--blue);color:#fff}
.miles h2{text-shadow:3px 3px 0 var(--ink)}
.mile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.mile{background:rgba(255,255,255,.12);border:3px solid #fff;border-radius:20px;padding:16px;font-weight:800;display:flex;gap:10px;align-items:center}
.mile.done{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

/* faq */
details{margin-bottom:14px;padding:18px 24px}
summary{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.25rem;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5ch}
details p{margin-top:10px}

/* form */
.contact{background:var(--pink)}
.contact h2{color:#fff;text-shadow:3px 3px 0 var(--ink)}
.contact .lead{color:#fff}
form{max-width:620px;margin:0 auto;display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-weight:800;display:block;margin-bottom:4px}
input,textarea{width:100%;font:inherit;padding:12px 16px;border:4px solid var(--ink);border-radius:16px;background:var(--cream)}
:is(input,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.hp{position:absolute;left:-9999px}
#formMsg{font-weight:800;min-height:1.5em}
.pop{position:fixed;top:-40px;font-size:1.8rem;pointer-events:none;z-index:99;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}

footer{background:var(--blue-dark);color:#fff;text-align:center;padding:36px 20px;font-size:.95rem}
footer b{font-family:"Baloo 2";font-size:1.3rem;color:var(--yellow)}

@media(max-width:51.25em){
  .hero-grid,.story-grid,.steps,.addon-grid,.mile-grid,.row{grid-template-columns:1fr}
  .wall-grid{grid-template-columns:repeat(2,1fr)}
  .hero{text-align:center;padding-top:44px}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-logo{max-width:300px}
  .price-tag{margin-left:0}
  section{padding:56px 0}
}


/* ---------- multi-page site ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-40px;position:relative;z-index:2}
.pillar{padding:20px;text-align:center}
.pillar .emoji{font-size:2rem}
.pillar h3{font-size:1.15rem;margin:6px 0 4px}
.pillar p{font-size:.95rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.rc-mini{width:100%;border-collapse:collapse}
.rc-mini th{text-align:left;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;opacity:.7;padding-bottom:6px}
.rc-mini td{padding:10px 0;border-bottom:2px dashed #c9d8ee}
.rc-mini td:nth-child(n+2),.rc-mini th:nth-child(n+2){text-align:center;font-family:"Baloo 2";font-weight:800;font-size:1.6rem}
.rc-mini th:nth-child(n+2){font-family:inherit;font-size:.75rem}
.rc-mini td:last-child{color:var(--blue)}
.rc-mini small{display:block;font-weight:500;opacity:.75}
.tag{display:inline-block;background:var(--cream);border:3px solid var(--ink);border-radius:999px;padding:0 12px;font-weight:800;font-size:.85rem;margin-bottom:10px}
.report-band{background:var(--blue);color:#fff}
.report-band h2{text-shadow:3px 3px 0 var(--ink)}
.report-band .card{color:var(--ink)}
.addon{display:flex;flex-direction:column;text-decoration:none}
.addon .more{margin-top:auto;padding-top:12px;font-weight:800;color:var(--blue)}
.page-hero{background:#fff;padding:56px 0 40px;border-bottom:4px solid var(--ink);text-align:center}
.page-hero h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.page-hero p{font-size:1.2rem;max-width:680px;margin:14px auto 22px}
.two{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:start}
.pricebox{background:var(--yellow);text-align:center;position:sticky;top:96px}
.pricebox .amount{font-size:4rem}
.frame{border:4px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.frame .bar-top{background:var(--ink);color:#fff;padding:8px 16px;font-weight:800;font-size:.9rem;display:flex;gap:8px;align-items:center}
.frame .bar-top i{width:10px;height:10px;border-radius:50%;background:var(--yellow);display:inline-block}
.frame iframe{width:100%;border:0;display:block}
.frames{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.plain{list-style:none}
.plain li{padding:8px 0 8px 34px;position:relative}
.plain li::before{content:"✓";content:"✓" / "";position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-size:.75rem;font-weight:800}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:14px 0}
footer nav a{color:#fff;font-weight:700}
@media(max-width:51.25em){
  .pillars{grid-template-columns:1fr 1fr;margin-top:0;padding-top:24px}
  .split,.two,.frames{grid-template-columns:1fr}
  .pricebox{position:static}
}

/* language switcher */
.lang{font-weight:800;text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:3px 12px;background:var(--cream);font-size:.9rem;white-space:nowrap}
.lang:hover{background:var(--yellow)}
@media(max-width:35em){.brand span{display:none}.nav{padding:10px 12px}.nav .btn{padding:6px 12px}}
.nav{gap:16px}
@media(max-width:67.5em){.brand span{display:none}}


/* ================= modern-web-guidance pass ================= */
:root{color-scheme:light;accent-color:var(--blue)}
::selection{background:var(--yellow);color:var(--ink)}
.visually-hidden:where(:not(:focus-within,:active)){position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}

/* skip link: first tab stop, visible only when focused */
.skip{position:absolute;inset-inline-start:.75rem;inset-block-start:-5rem;z-index:50;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.5rem 1rem;font-weight:800}
.skip:focus-visible{inset-block-start:.75rem}
main:focus{outline:none}

/* ---- header: one nav list, popover when it does not fit, inline when it does ---- */
.nav{gap:1rem}
.nav > *{flex-shrink:0;white-space:nowrap}
.menu-button{anchor-name:--menu-button;display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:800;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:999px;padding:.45rem 1rem;min-block-size:2.75rem;cursor:pointer}
.burger{inline-size:1.1em;block-size:.8em;border-block:3px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat}
.site-menu{list-style:none;position:fixed;inset:auto;inset-block-start:4.75rem;inset-block-start:anchor(--menu-button bottom);inset-inline-end:1rem;inline-size:min(80dvw,24rem);max-inline-size:calc(100dvw - 2rem);block-size:fit-content;max-block-size:calc(100dvh - 6rem);margin:0;margin-block-start:.5rem;overflow:auto;padding:.5rem;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}
.site-menu a{display:block;padding:.75rem 1rem;font-weight:800;text-decoration:none;border-radius:14px;white-space:normal}
.site-menu a:hover{background:var(--cream)}
.site-menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.25em}
.site-menu .lang{border-radius:14px;border:0;background:none;font-size:inherit}
.site-header.is-wide .menu-button{display:none}
.site-header.is-wide .site-menu{position:static;display:flex;align-items:center;gap:.25rem;inline-size:auto;max-inline-size:none;block-size:auto;max-block-size:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.site-header.is-wide .site-menu::backdrop{display:none}
.site-header.is-wide .site-menu a{padding:.45rem .7rem;white-space:nowrap;font-size:.95rem}
.site-header.is-wide .site-menu .lang{border:3px solid var(--ink);border-radius:999px;background:var(--cream);padding:.2rem .75rem;margin-inline-start:.4rem}
.site-header.is-measuring *{transition:none!important}
/* browsers without the Popover API: no Menu button, links wrap onto their own row */
.site-header.no-popover .menu-button{display:none}
.site-header.no-popover .nav{flex-wrap:wrap}
.site-header.no-popover .site-nav{order:3;flex-basis:100%}
.site-header.no-popover .site-menu{position:static;display:flex;flex-wrap:wrap;gap:.25rem;inline-size:auto;max-inline-size:none;margin:0;padding:0;border:0;box-shadow:none;background:none;overflow:visible}

/* ---- breadcrumbs ---- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem .6rem;font-weight:700;font-size:.95rem;margin-bottom:.75rem}
.crumbs li{display:flex;align-items:center;gap:.6rem}
.crumbs li + li::before{content:"/";content:"/" / "";opacity:.6}
.crumbs a{color:var(--blue);text-underline-offset:.2em}
.crumbs a[aria-current="page"]{color:var(--ink);font-weight:800;text-decoration:none}

/* ---- accordion: marker sits right before the question ---- */
summary::-webkit-details-marker{display:none}
summary::before{content:"";inline-size:1em;block-size:1em;flex-shrink:0;background-color:currentColor;rotate:-90deg;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat center/contain}
details[open] > summary::before{rotate:0deg}
details::details-content{interpolate-size:allow-keywords;overflow:clip;contain:layout}
details:not([open])::details-content{block-size:0}

/* ---- goals progress bar: native <progress>, custom skin ---- */
progress{appearance:none;border:0 solid;overflow:clip;display:block;inline-size:100%;max-inline-size:38.75rem;block-size:2.1rem;margin:0 auto .6rem;border:4px solid var(--ink);border-radius:1e5px;background:#fff}
progress::-webkit-progress-bar{background:transparent}
progress::-webkit-progress-value{background:repeating-linear-gradient(45deg,var(--yellow) 0 16px,#ffb300 16px 32px)}
progress::-moz-progress-bar{background:repeating-linear-gradient(45deg,var(--yellow) 0 16px,#ffb300 16px 32px)}

/* ---- headings moved to the right level keep their size ---- */
.pillar h2{font-size:1.15rem;margin:6px 0 4px}
.pricebox h2{font-size:1.4rem;margin-bottom:0}

/* ---- form: errors only after the visitor has interacted ---- */
.req-note,.hint{font-size:.95rem;font-weight:700}
input,textarea{font-size:max(1rem,1em)}
textarea{resize:vertical}
.error-msg{display:none;color:#b3261e;font-weight:700;font-size:.95rem;margin-top:.3rem}
:is(input,textarea):user-invalid{border-color:#b3261e;background:#fdeceb}
:is(input,textarea):user-invalid + .error-msg{display:block}

/* ---- contrast: navy text wherever white fell below 4.5:1 ---- */
.pricing h2,.pricing .lead,.contact h2,.contact .lead{color:var(--ink);text-shadow:none}
.badge,.plan .ribbon,.refer{color:var(--ink)}
.step:nth-child(2) .num,.step:nth-child(3) .num{color:var(--ink)}
.checks li::before,.plain li::before{color:var(--ink)}

/* ---- motion only for people who have not asked for less ---- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  .btn{transition:translate .12s,box-shadow .12s}
  .btn:hover{translate:0 -3px;box-shadow:0 9px 0 var(--ink)}
  .btn:active{translate:0 4px;box-shadow:0 2px 0 var(--ink)}
  .addon{transition:translate .15s}
  .addon:hover{translate:0 -3px}
  summary::before{transition:rotate .2s}
  details::details-content{transition:block-size,content-visibility,display;transition-duration:.3s;transition-timing-function:ease-in-out;transition-behavior:allow-discrete}
  progress::-webkit-progress-value{transition:inline-size 1.2s ease}
}
/* in-page links land below the sticky header instead of under it */
html{scroll-padding-block-start:5.5rem}

/* service cards: centered content, price and link aligned across the row */
.addon{align-items:center;text-align:center}
.addon h3{margin:.35rem 0}
.addon .cost{margin-top:auto;align-self:center;white-space:nowrap}
.addon p{margin-bottom:1rem}
.addon .more{margin-top:0;padding-top:.75rem}