@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/source-serif-4-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/source-serif-4-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --white:#FFFFFF;
  --ink:#16243A; --muted:#5A6878; --band:#F6F7F9; --grid:#E3E7EC;
  --hi:#F5C531; --hi-light:#FFF4CC; --hi-ink:#3A2C00;
  --red:#C8102E; --red-light:#FCE4E8;
  --blue:#1F5FBF; --blue-light:#E3ECFA;
  --green:#1E8A5A; --green-light:#E1F3EA;
  --paper:var(--white); --sheet:var(--white); --accent:var(--red); --focus:var(--blue);
  --fs-h1:clamp(2.1rem,4.8vw,3.9rem);
  --fs-h2:clamp(1.8rem,3.4vw,2.5rem);
  --fs-h3:1.5rem;
  --fs-body:1.06rem;
  --fs-small:.9rem;
  --lh-body:1.65;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:"Source Serif 4", Georgia, serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--paper);
  font:400 var(--fs-body)/var(--lh-body) var(--text);
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
h1,h2,h3{font-family:var(--display); line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0 0 .9em}
section{padding:32px 0}
h2{font-size:var(--fs-h2); margin-bottom:28px}
.muted{color:var(--muted)}

header.top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:26px 0 0}
.brand{font:800 var(--fs-h1)/1.08 var(--display); letter-spacing:-.01em; text-decoration:none}
.brand-sub{margin:6px 0 0; color:#5A6878}
header.top nav ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; font-family:var(--display); font-size:var(--fs-small)}
header.top nav a{text-decoration:none; background:linear-gradient(var(--hi),var(--hi)) 0 100%/0 40% no-repeat; transition:background-size .2s}
header.top nav a:hover{background-size:100% 40%}
.menu-toggle{display:none}
@media (max-width:720px){
  header.top nav{display:none}
  .site-header .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:2px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer}
  .site-header .menu-toggle svg{width:22px; height:22px}
  .site-header.open nav{display:block; flex-basis:100%}
  .site-header.open nav ul{flex-direction:column; gap:14px; font-size:var(--fs-body)}
}

.crumbs{margin:14px 0 0; font:400 var(--fs-small)/1.4 var(--display); color:var(--muted)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; margin:0; padding:0}
.crumbs li + li::before{content:"›"; margin:0 6px}

.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:24px 0 20px}
.hero h1{font-size:var(--fs-h1); font-weight:800; max-width:17ch}
.lead{font-size:var(--fs-body); max-width:48ch; margin:22px 0 28px}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.btn{font:600 var(--fs-body)/1 var(--display); padding:15px 22px; border-radius:999px; text-decoration:none; border:2px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; text-align:center; background:transparent; color:var(--ink); cursor:pointer}
.btn.primary{background:var(--hi); border-color:var(--hi); color:var(--hi-ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.btn.pill-in{background:#1F5FBF; border-color:#1F5FBF; color:#FFFFFF; gap:8px}
.btn.pill-in:hover{filter:brightness(.92)}
.btn .in-logo{width:1em; height:1em; flex:none; display:block}
.portrait{position:relative}
.portrait picture{display:block}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 0; border-radius:6px}
.stickers{position:absolute; left:-14px; right:-14px; bottom:24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 12px; pointer-events:none}
.sticker{margin:0; font:400 clamp(1.1rem,2.1vw,1.6rem)/1.15 var(--display); padding:10px 16px; border-radius:6px}
.sticker b{display:block; font-weight:600}
.sticker.hi{background:var(--hi); color:var(--hi-ink); transform:rotate(4deg)}
.sticker.red{margin-left:auto; background:var(--red); color:var(--white); transform:rotate(-5deg)}
.ann{font:600 var(--fs-small) var(--display); fill:var(--ink)}
.ann.s{font-weight:400; fill:var(--muted)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; gap:28px}
  .hero .portrait{order:-1}
  .hero .portrait img{aspect-ratio:4/3; object-position:50% 0}
  .stickers{left:-8px; right:-8px; bottom:16px}
}
@media (max-width:520px){
  header.top{gap:8px 12px; padding:10px 0 0}
  .brand-box{flex:1 1 0; min-width:0}
  .brand{font-size:1.4rem; line-height:1.15}
  .brand-sub{display:none}
  .site-header .menu-toggle{width:44px; height:44px; margin-right:-10px; border:0; border-radius:6px}
  .site-header .menu-toggle svg{width:26px; height:26px}
  .site-header.open nav{order:3}
  .hero .ctas{flex-direction:column; align-items:stretch}
  .hero .portrait img{aspect-ratio:1/1}
  .sticker{font-size:1rem; padding:8px 12px}
}
.legal h2{font-size:var(--fs-h3); margin:32px 0 12px}
.legal .ver{color:var(--muted)}

.pills{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0}
.pills li{font:600 var(--fs-small) var(--display); border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; background:var(--sheet)}
.pills.first-hi li:first-child{background:var(--hi); border-color:var(--hi); color:var(--hi-ink)}
.more{margin:24px 0 0; font:600 var(--fs-body) var(--display)}

.skills{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 36px}
.skills.two{grid-template-columns:1fr 1fr; gap:36px 56px}
.skill svg{width:52px; height:52px; margin-bottom:10px}
.skill h3{font-size:var(--fs-h3); margin-bottom:4px}
.skill p{margin:0; color:var(--muted)}
.skill .go{margin:10px 0 0; font:600 var(--fs-body) var(--display); color:var(--ink)}
@media (max-width:860px){ .skills{grid-template-columns:1fr 1fr} .skills.two{grid-template-columns:1fr} }
@media (max-width:520px){ .skills{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:36px 56px}
.split .pills{margin:0}
.split p{max-width:52ch}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

.offer{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch}
.pills + .offer, .more + .offer{margin-top:28px}
.card{background:var(--sheet); border:1.5px solid var(--grid); padding:26px; display:flex; flex-direction:column; border-top:6px solid var(--ink); border-radius:6px}
.card.lunch{background:var(--hi-light); border-top-color:var(--hi)}
.card.hour{background:var(--red-light); border-top-color:var(--red)}
.card.pack{background:var(--blue-light); border-top-color:var(--blue)}
.card h3{font-size:var(--fs-h2); margin:10px 0 8px}
.card p{color:var(--muted)}
.card .price{font-size:var(--fs-h3); font-weight:600; line-height:1.15; color:var(--ink)}
.card .price, .card .price-note{text-align:center}
.card .btn{margin-top:auto; align-self:flex-start; font-size:var(--fs-body); padding:18px 28px; border:0}
.card h3 + p{flex-grow:1}
@media (min-width:861px){
  @supports (grid-template-rows:subgrid){
    .offer{grid-template-rows:repeat(6,auto); row-gap:0}
    .card{display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0}
    .card .price{grid-row:4}
    .card .price-note{grid-row:5}
    .card .btn{grid-row:6; align-self:end}
  }
}
.card.lunch .btn, .card.lunch .btn:hover{background:var(--hi); color:var(--hi-ink)}
.card.hour .btn, .card.hour .btn:hover{background:var(--red); color:var(--white)}
.card.pack .btn, .card.pack .btn:hover{background:var(--blue); color:var(--white)}
.card .btn:hover{filter:brightness(.92)}
.card svg{width:46px; height:46px}
@media (max-width:860px){ .offer{grid-template-columns:1fr} }

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{background:var(--sheet); border:1.5px solid var(--grid); border-radius:6px; padding:26px}
.step-num{font:800 var(--fs-h1)/1.08 var(--display); width:fit-content; margin:0 0 10px}
.step:nth-child(4n+1) .step-num{color:var(--hi-ink); background:linear-gradient(transparent 55%, var(--hi) 55% 95%, transparent 95%)}
.step:nth-child(4n+2) .step-num{color:var(--red)}
.step:nth-child(4n+3) .step-num{color:var(--blue)}
.step:nth-child(4n+4) .step-num{color:var(--green)}
.step h3{font:700 var(--fs-h2)/1.08 var(--display); margin:0 0 4px}
.steps.topics .step h3{font-size:var(--fs-h3); margin-bottom:8px}
.step p:last-child{margin:0; color:var(--muted)}
@media (max-width:1000px){ .steps.four{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .steps, .steps.four{grid-template-columns:1fr} }
.contact-call{margin:0 0 20px; font:700 var(--fs-h2)/1.08 var(--display); letter-spacing:-.01em; color:var(--ink)}

.path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative}
.path::before{content:""; position:absolute; left:0; right:0; top:15px; border-top:2px dashed var(--muted)}
.path li{position:relative; padding:40px 14px 0 0}
.path li::before{content:""; position:absolute; top:7px; left:0; width:18px; height:18px; border-radius:50%; background:var(--paper); border:3px solid var(--ink)}
.path li:last-child::before{background:var(--red); border-color:var(--red)}
.path b{font:800 var(--fs-body) var(--display); display:block}
.path span{font:400 var(--fs-body)/var(--lh-body) var(--display); color:var(--muted)}
@media (max-width:860px){
  .path{grid-template-columns:1fr 1fr; row-gap:22px}
  .path::before{display:none}
  .path li::after{content:""; position:absolute; left:18px; right:0; top:15px; border-top:2px dashed var(--muted)}
}

.quiz{display:grid; grid-template-columns:1fr 400px; gap:40px; align-items:center; background:var(--band); border-radius:20px; padding:36px clamp(20px,4vw,44px)}
.quiz-note{margin:16px 0 0; font:400 var(--fs-small) var(--display); color:var(--muted)}
.q{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--grid)}
.q > span{font-size:var(--fs-body)}
.toggle{display:flex; gap:6px; flex:none}
.toggle button{font:600 var(--fs-small) var(--display); padding:9px 18px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
.toggle button[data-v="1"][aria-pressed="true"]{background:var(--red); border-color:var(--red); color:var(--white)}
.toggle button[data-v="0"][aria-pressed="true"]{background:var(--green); border-color:var(--green); color:var(--white)}
.gauge{width:100%; max-width:400px; justify-self:center}
.gauge svg{width:100%; height:auto}
.needle{transform-origin:150px 150px; transform:rotate(-90deg); transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.needle[data-yes="1"]{transform:rotate(-54deg)}
.needle[data-yes="2"]{transform:rotate(-18deg)}
.needle[data-yes="3"]{transform:rotate(18deg)}
.needle[data-yes="4"]{transform:rotate(54deg)}
.needle[data-yes="5"]{transform:rotate(90deg)}
.verdict{font:600 var(--fs-body)/var(--lh-body) var(--display); text-align:center; margin-top:8px}
@media (max-width:860px){ .quiz{grid-template-columns:1fr} .q{flex-direction:column; align-items:flex-start} }

section.band{background:var(--band); box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax); padding:48px 0}
.contact-sec{border-top:1px solid var(--grid)}
.contact{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.contact > div{flex:1 1 100%}
.contact h2{margin:0 0 20px; font-size:var(--fs-h1); font-weight:800}
.contact .btn.pill-mail{background:#F5C531; border-color:#F5C531; color:#3A2C00}
.contact .btn.pill-tel{background:#C8102E; border-color:#C8102E; color:#FFFFFF}
.contact .btn.pill-mail:hover, .contact .btn.pill-tel:hover{filter:brightness(.92)}
@media (max-width:520px){ .contact .ctas{flex-direction:column; align-items:stretch} }

.page{padding:48px 0 64px; max-width:72ch}
.page h1{font-size:var(--fs-h1); font-weight:800; margin-bottom:16px}
.page ul{padding-left:1.2em; margin:0 0 .9em}
.page li{margin-bottom:.5em}

.site-footer{padding:40px 0 56px; border-top:1px solid var(--grid); font:400 var(--fs-body)/var(--lh-body) var(--display); color:var(--muted)}
.site-footer p{margin:0 0 .6em}
.site-footer a{color:var(--ink)}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px 32px}
.foot-head{font-weight:800; color:var(--ink)}
.foot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0}
.foot-list li{margin:0; padding:0}
.foot-list a, .foot-list .linkbtn{white-space:nowrap; text-align:left}
.foot-list a[href^="mailto:"]{white-space:normal; overflow-wrap:anywhere}
.foot-copy{margin:28px 0 0; padding-top:18px; border-top:1px solid var(--grid); font-size:var(--fs-small)}
.pay-logos{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:14px}
.pay-logos img{display:block; width:auto}
.pay-visa{height:36px; margin:-7px -8px}
.pay-mastercard{height:30px; margin:-4px -3px}
.pay-comgate img{height:22px}
@media (max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-cols{grid-template-columns:1fr} }
.linkbtn{font:inherit; color:var(--ink); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}

.cookie-bar{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:720px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:var(--sheet); color:var(--ink); border:1.5px solid var(--grid); border-top:4px solid var(--hi); border-radius:12px; padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,.18); font:400 var(--fs-small)/1.5 var(--display)}
.cookie-bar p{margin:0; flex:1 1 320px}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px}
.cookie-bar .btn{padding:11px 18px}