:root{--accent:#1f5fbf;--accent-dark:#184c99;--accent-soft:#7fb0f2;--ink:#0d1b36;--ink-deep:#08122a;--ink-line:#1d2c4d;--tint:#eef3fa;--tint-2:#e0e9f7;--muted:#3a4a68;--muted-2:#6b7a98;--line:#d5deed;--line-2:#c5d2e8;--on-dark:#9fb2d4;--surface:#ffffff;--accent-rgb:31,95,191;--ink-rgb:13,27,54;--surface-rgb:255,255,255;--sq-light:#eaf0f9;--sq-dark:#aec4e4;--piece-line:#27395c;--edge:#9db2d4;--edge-dark:#6d84ab;--head:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;--body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}

body{background:var(--surface);color:var(--ink)}
body{margin:0}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0;margin-block-end:0}
body .cl-main, body .cl-main>*{margin-block-start:0}
h1, h2, h3{font-family:var(--head);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
a{text-underline-offset:3px}
body .cl-wrap{max-width:1280px;margin:0 auto;padding:0 48px;box-sizing:border-box}
body .cl-note{font-size:13px;color:var(--muted-2);margin-top:14px}
body .cl-note--light{color:var(--on-dark)}
body .cl-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
body .cl-eyebrow--light{color:var(--accent-soft)}
body .cl-h2{font-size:clamp(27px,3.1vw,38px);letter-spacing:-.02em;line-height:1.15}
body .cl-h2--light{color:var(--surface)}
body .cl-h2--spaced{margin-bottom:36px}
body .cl-h3{font-size:20px;letter-spacing:-.005em;line-height:1.3}
body .cl-lead{font-size:17px;color:var(--muted);max-width:520px;margin-top:22px}
body .cl-link{margin:0}
body .cl-link a{color:var(--ink);font-weight:700;border-bottom:2px solid currentColor;text-decoration:none;padding-bottom:2px}

/* Buttons */
.wp-block-button__link, .wp-block-button .wp-block-button__link{background:var(--accent);color:var(--surface);border-radius:10px;font-family:var(--body);font-weight:500;font-size:15px;padding:14px 26px;line-height:1.2;text-decoration:none;transition:background .22s ease,transform .22s ease,box-shadow .22s ease;}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.4)}
.wp-block-button__link:active{transform:translateY(0) scale(.98);box-shadow:none}
.wp-block-button__link:hover{background:var(--accent-dark);color:var(--surface)}
body .cl-btn-light .wp-block-button__link{background:var(--surface);color:var(--ink)}
body .cl-btn-light .wp-block-button__link:hover{background:var(--tint);color:var(--ink)}

/* Columns */
body .cl-cols{gap:80px}
body .cl-cols--center{align-items:center!important}
body .wp-block-columns.cl-cols--split>.wp-block-column{flex-basis:0;flex-grow:1}
body .cl-col-narrow{flex-grow:.55!important}
body .cl-col-photo{flex-grow:.8!important}

/* Header */
body .cl-header{background:var(--surface);position:relative;z-index:20}
body .cl-header .cl-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
body .cl-brand{display:flex;align-items:center;gap:12px}
body .cl-brand__name, body .cl-brand__name a{font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;text-decoration:none;color:inherit}
body .cl-nav{font-weight:500;font-size:16px}
body .cl-nav .wp-block-navigation__container{gap:34px}
body .cl-nav .wp-block-navigation-item__content{padding-bottom:2px;border-bottom:2px solid transparent;text-decoration:none}
body .cl-nav .current-menu-item>.wp-block-navigation-item__content{border-bottom-color:var(--accent)}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content{background:var(--accent);color:var(--surface);padding:13px 24px;font-weight:700;border-bottom:0}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:hover{background:var(--accent-dark)}

/* Title band */
body .cl-titleband{background:var(--tint);padding:72px 0 64px}
body .cl-titleband__h{font-size:clamp(30px,4vw,44px);letter-spacing:-.035em;margin-bottom:18px}
body .cl-titleband__intro{font-size:20px;color:var(--muted);max-width:620px}

/* Booking band */
body .cl-cta{background:var(--ink);color:var(--surface);margin-top:96px}
body .cl-cta .cl-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px;padding-top:80px;padding-bottom:80px}
body .cl-cta__h{font-size:clamp(25px,2.8vw,34px);letter-spacing:-.035em;margin-bottom:14px;color:var(--surface)}
body .cl-cta__t{font-size:20px;color:var(--line-2)}

/* Footer */
body .cl-footer{background:var(--ink-deep);color:var(--on-dark);padding:64px 0 28px}
body .cl-footer__cols{justify-content:space-between;padding-bottom:48px;border-bottom:1px solid var(--ink-line);gap:56px}
body .cl-footer__cols>.wp-block-column{flex-grow:0;flex-basis:auto!important}
body .cl-footer__cols>.cl-footer__about{flex-grow:1;max-width:380px}
body .cl-footer__about p{margin-top:16px}
body .cl-brand--light{color:var(--surface)}
body .cl-footer__h{font-weight:700;color:var(--surface);margin-bottom:16px}
body .cl-footer p{font-size:15px;margin-bottom:10px}
body .cl-footer .cl-footer__about p{font-size:17px}
body .cl-footer .cl-brand .cl-brand__name{font-size:19px;margin:0}
body .cl-vnav{font-size:15px}
body .cl-vnav .wp-block-navigation__container{gap:10px;align-items:flex-start}
body .cl-vnav .wp-block-navigation-item__content{color:var(--on-dark);text-decoration:none}
body .cl-vnav .wp-block-navigation-item__content:hover{color:var(--surface)}
body .cl-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:14px}
body .cl-footer__bottom p{margin:0;font-size:14px}

/* Sections */
body .cl-section{padding-top:120px}
body .cl-band{padding:110px 0;margin-top:120px}
body .cl-hero+.cl-band, body .cl-band--mist+.cl-band--navy{margin-top:0}
body .cl-band--mist{background:var(--tint)}
body .cl-band--navy{background:var(--ink);color:var(--surface)}

/* Hero */
body .cl-hero{padding:60px 0 72px}
body .cl-hero__text{flex-grow:1.35!important}
body .cl-hero .cl-hero__title{font-size:clamp(33px,4.3vw,52px)!important;line-height:1.04!important;letter-spacing:-.035em;margin:0 0 32px!important}
body .cl-hero .cl-hero__lead{font-size:17px;line-height:1.55;max-width:520px;margin:0 0 40px!important;color:var(--muted)}
body .cl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
body .cl-actions>*{margin:0!important}

/* Problem */
body .cl-compare{border-top:2px solid var(--ink);gap:0}
body .cl-compare__col{padding:26px 28px 8px 0}
body .cl-compare__col--us{padding:26px 0 8px 28px;border-left:1px solid var(--line-2)}
body .cl-compare__col>p{margin-bottom:14px}
body .cl-compare__col--us>p strong{color:var(--accent)}
body .wp-block-list.cl-ticks{list-style:none;margin:0;padding:0;line-height:2;color:var(--muted)}
body .cl-compare__col--us .cl-ticks{color:var(--ink)}

/* Board */
body .cl-pc{display:flex;align-items:center;justify-content:center;font-size:clamp(26px,4.6vw,46px);line-height:1}
body .cl-pc--w{color:var(--surface);text-shadow:0 1px 3px rgba(0,0,0,.85)}
body .cl-pc--b{color:var(--ink);text-shadow:0 1px 1px rgba(var(--surface-rgb),.4)}

/* Dark rows */
body .cl-row--dark{padding:22px 0;border-bottom:1px solid var(--ink-line);font-size:18px}
body .cl-row--dark:first-of-type{border-top:1px solid var(--ink-line)}
body .cl-row--dark p+p{color:var(--line-2);font-size:16px}

/* Steps */
body .cl-step{display:flex;gap:32px;padding:30px 0;border-bottom:1px solid var(--line)}
body .cl-step:first-of-type{border-top:2px solid var(--ink)}
body .cl-step__n{width:90px;flex:none;font-weight:700;color:var(--accent)}
body .cl-step .wp-block-group p{margin-top:6px;color:var(--muted)}

/* Plans */
body .cl-cols--plans{gap:28px;align-items:stretch!important}
body .cl-plan-main{flex-grow:3!important;background:var(--accent);color:var(--surface);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
body .cl-plan-main__tag{font-weight:700;margin-bottom:20px}
body .cl-plan-main__price{font-family:var(--head);font-size:50px;line-height:1;font-weight:700;letter-spacing:-.04em}
body .cl-plan-main__price span{font-size:24px;letter-spacing:0;font-weight:500}
body .cl-plan-main__text{font-size:19px;margin-top:18px;max-width:420px}
body .cl-plan-list{flex-grow:2!important;border-top:2px solid var(--ink)}
body .cl-plan-row{padding:30px 0;border-bottom:1px solid var(--line)}
body .cl-plan-row>p{margin-top:6px;color:var(--muted)}
body .cl-plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
body .cl-plan-price{white-space:nowrap;font-family:var(--head);font-size:21px;font-weight:700}
body .cl-plan-price small{font-family:var(--body);font-size:15px;font-weight:500}
body .cl-plan-list>.cl-link{margin-top:26px}

/* Coach */
body .cl-pull{font-family:var(--head);font-size:19px;line-height:1.25;font-weight:500;margin:26px 0 28px;max-width:520px;padding-left:22px;border-left:4px solid var(--accent)}

/* Reviews */
body .cl-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
body .cl-cols--reviews{gap:28px;align-items:stretch!important}
body .cl-reviews__main{flex-grow:2!important}
body .cl-reviews__side{flex-grow:1!important;display:flex;flex-direction:column;gap:28px}
body .cl-review{background:var(--surface);padding:30px;height:100%;box-sizing:border-box}
body .cl-reviews__side .cl-review{flex:1;height:auto}
body .cl-review--big{padding:44px}
body .cl-review__q{font-size:17px}
body .cl-review--big .cl-review__q{font-family:var(--head);font-size:20px;line-height:1.2;font-weight:500}
body .cl-review__by{margin-top:20px;font-size:15px;color:var(--muted)}

/* FAQ */
body .cl-faq{border-top:2px solid var(--ink)}
body .cl-faq .wp-block-details{border-bottom:1px solid var(--line);padding:24px 0}
body .cl-faq .wp-block-details summary{cursor:pointer;font-family:var(--head);font-size:17px;font-weight:700;list-style:none}
body .cl-faq .wp-block-details summary::-webkit-details-marker{display:none}
body .cl-faq .wp-block-details summary::after{content:"+";float:right;color:var(--accent)}
body .cl-faq .wp-block-details[open] summary::after{content:"\2212"}
body .cl-faq .wp-block-details p{margin-top:12px;color:var(--muted)}

/* Plain content pages (legal etc.) */
body .wp-block-post-content>*:not(.alignfull){max-width:860px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}
body .wp-block-post-content>h2{font-size:40px;margin-top:48px;margin-bottom:16px}
body .wp-block-post-content>h3{font-size:28px;margin-top:36px;margin-bottom:12px}
body .wp-block-post-content>p, body .wp-block-post-content>ul, body .wp-block-post-content>ol{color:var(--muted);margin-bottom:16px}
body .wp-block-post-content>*:not(.alignfull):first-child{margin-top:72px}
body .wp-block-post-content>*:not(.alignfull):last-child{margin-bottom:96px}
body .cl-prose{max-width:860px;margin:72px auto 96px;padding:0 20px}

@media (max-width:900px){
body .cl-nav{font-size:15px}
body .cl-nav .wp-block-navigation__container{gap:18px}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content{padding:10px 16px}
body .cl-brand__name, body .cl-brand__name a{font-size:20px}
}

@media (max-width:781px){
body .cl-wrap{padding:0 20px}
body .cl-header .cl-wrap{padding-top:18px;padding-bottom:18px}
body .cl-cols{gap:40px}
body .cl-section{padding-top:72px}
body .cl-band{padding:64px 0;margin-top:72px}
body .cl-hero{padding:32px 0 64px}
body .cl-hero .cl-hero__title{font-size:33px!important}
body .cl-hero__lead{font-size:16px}
body .cl-h2{font-size:27px}
body .cl-titleband{padding:48px 0 44px}
body .cl-titleband__h{font-size:30px}
body .cl-cta{margin-top:72px}
body .cl-cta .cl-wrap{padding-top:56px;padding-bottom:56px}
body .cl-cta__h{font-size:25px}
body .cl-plan-main{padding:32px}
body .cl-plan-main__price{font-size:42px}
body .cl-review--big{padding:28px}
body .cl-review--big .cl-review__q{font-size:18px}
body .cl-step{gap:16px}
body .cl-step__n{width:60px}
body .cl-faq .wp-block-details summary{font-size:20px}
body .cl-compare__col, body .cl-compare__col--us{padding:26px 0 8px;border-left:0}
body .cl-footer__cols>.cl-footer__about{max-width:none}
}

/* Offers (Coaching page) */
body .cl-offers{border-top:2px solid var(--ink)}
body .cl-offer{border-bottom:1px solid var(--line);padding:48px 0;gap:48px;align-items:flex-start!important}
body .cl-offer__main{flex-grow:1.3!important}
body .cl-offer__buy{flex-grow:.8!important}
body .cl-offer__flag{color:var(--accent);font-weight:700;margin-bottom:10px}
body .cl-offer__desc{color:var(--muted);margin-top:10px;max-width:420px}
body .cl-offer__price{font-family:var(--head);font-size:30px;line-height:1;font-weight:700;letter-spacing:-.03em;white-space:nowrap;margin-bottom:22px}
body .cl-offer__price small{font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:0}
body .cl-ticks--lg{font-size:22px;line-height:2.1}
/* About */
body .cl-rowline{padding:26px 0;border-bottom:1px solid var(--line)}
body .cl-rowline:first-of-type{border-top:2px solid var(--ink)}
body .cl-rowline p+p{color:var(--muted);margin-top:6px}
/* Reviews page */
body .cl-rrows{border-top:2px solid var(--ink)}
body .cl-rrow{padding:36px 0;border-bottom:1px solid var(--line)}
body .cl-rrow__q{font-family:var(--head);font-size:19px;line-height:1.25;font-weight:500;max-width:760px}
body .cl-rrow__by{margin-top:14px;color:var(--muted);font-size:15px}
/* Booking */
body .cl-embed{background:var(--tint);border:1px dashed var(--on-dark);min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--muted)}
/* Legal pages */
body .cl-legal{max-width:860px;margin:72px auto 0;padding:0 20px}
body .cl-main--end{padding-bottom:96px}
body .cl-legal__h{font-size:23px;margin:40px 0 10px;line-height:1.3}
body .cl-legal__eff{margin:0 0 6px!important;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--accent)}
body .cl-legal__h+p{margin-top:0}
@media (max-width:600px){body .cl-legal__h{font-size:20px;margin:32px 0 10px}}
body .cl-legal p{color:var(--muted);margin-bottom:14px}
body .cl-main .wp-block-buttons{margin-top:32px}
@media (max-width:781px){
	body .cl-offer{padding:32px 0;gap:24px}
	body .cl-offer__price{font-size:36px}
	body .cl-rrow__q{font-size:24px}
}


@media (prefers-reduced-motion:reduce){.wp-block-button__link{transition:none}.wp-block-button__link:hover{transform:none}}

/* ---- Motion ---- */
html.cl-js body .cl-rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.cl-js body .cl-rv.cl-in{opacity:1;transform:none}
body .wp-block-button__link{position:relative;overflow:hidden}
body .wp-block-button__link::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(var(--surface-rgb),.28),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.22,.61,.36,1);pointer-events:none}
body .wp-block-button__link:hover::after{left:130%}
body .cl-link a{background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;border-bottom:0;transition:background-size .4s ease,color .3s}
body .cl-link a:hover{background-size:0 2px}
body .cl-plan-row,body .cl-offer,body .cl-review{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
body .cl-plan-row:hover,body .cl-offer:hover,body .cl-review:hover{transform:translateY(-4px)}
body .cl-review:hover,body .cl-offer:hover{box-shadow:none}

/* ---- Hero v2: circle portrait, chips, stat card ---- */
@keyframes cl-float{50%{translate:0 -8px}}
body .cl-stat:first-child{border-left:0}
@media (max-width:781px){
body .cl-hero{background:var(--surface)}
body .cl-hero{overflow:hidden}
}

/* ---- Hero cut-out portrait ---- */

/* ---- Content pages ---- */
body .cl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body .cl-card{background:var(--tint);padding:34px;border-radius:18px;transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
body .cl-card:hover{transform:translateY(-4px);box-shadow:none}
body .cl-card p{margin:10px 0 0;color:var(--muted)}
body .cl-band--mist .cl-card{background:var(--surface)}
body .cl-summary{background:var(--tint);border-radius:18px;padding:34px;margin-bottom:56px}
body .cl-summary p{margin:0}
body .cl-sum__d{font-size:22px;margin-top:8px!important}
body .cl-sum__t{color:var(--muted);margin-top:6px!important}
body .cl-summary .cl-note{margin-top:14px!important}
/* Calendly booking embed */
body .cl-calendly{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--e3)}
body .cl-calendly .calendly-inline-widget{width:100%;min-width:0!important;border-radius:20px;overflow:hidden}
body .cl-calendly iframe{border-radius:20px}
body .cl-calendly .cl-note{padding:24px;margin:0}
@media (max-width:900px){body .cl-calendly .calendly-inline-widget{height:1000px!important}}
@media (max-width:600px){body .cl-calendly{border-radius:16px}body .cl-calendly .calendly-inline-widget{height:1060px!important;border-radius:16px}}
@media (max-width:400px){body .cl-calendly{margin-inline:-20px;border-radius:0;border-left:0;border-right:0}body .cl-calendly .calendly-inline-widget{border-radius:0}}
body .cl-form{background:var(--surface);border-radius:20px;padding:36px;box-shadow:0 30px 60px -36px rgba(var(--ink-rgb),.4)}
body .cl-form__t{font-size:19px;font-weight:700;margin:0 0 22px;color:var(--ink)}
body .cl-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
body .cl-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--muted)}
body .cl-form input[type=text],body .cl-form input[type=email],body .cl-form select{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
body .cl-form input:focus,body .cl-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
body .cl-form__chk{flex-direction:row!important;align-items:center;gap:10px!important;margin:6px 0 20px}
body .cl-form__pay{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:18px;margin-bottom:16px}
body .cl-form__pay strong{font-size:26px;color:var(--ink)}
body .cl-form__card{display:flex;justify-content:space-between;border:1px solid var(--line-2);border-radius:10px;padding:14px;color:var(--muted);font-size:15px;margin-bottom:20px}
body .cl-form__btn{width:100%;font:inherit;font-weight:500;font-size:17px;background:var(--accent);color:var(--surface);border:0;border-radius:10px;padding:17px;cursor:pointer;transition:background .22s,transform .22s,box-shadow .22s}
body .cl-form__btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.4)}
body .cl-form__n{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:781px){body .cl-cards{grid-template-columns:1fr}body .cl-form{padding:24px}body .cl-form__row{grid-template-columns:1fr}}
body .cl-main .wp-block-column>p:not([class]){margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--muted)}
body .cl-footer a,body footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--surface-rgb),.35)}
body .cl-legal a,body .cl-rowline a{color:var(--accent);text-decoration:underline}
body .cl-rrows{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
body .cl-rrow__q{font-size:19px!important}
@media (max-width:781px){body .cl-rrows{grid-template-columns:1fr}}

/* ============================================================
   v2 - hero with the board, flat surfaces, refined motion
   ============================================================ */
body .cl-hero__cols{gap:72px!important;align-items:center}
body .cl-hero__text{flex-grow:1.1!important}
body .cl-hero .cl-hero__title{margin:0 0 20px!important}
body .cl-hero .cl-hero__lead{max-width:460px;margin:0 0 30px!important;line-height:1.6}
body .cl-hero__board{min-width:0;flex-grow:.95!important}
body .cl-hero__board #chess-app{max-width:430px;margin-left:auto}
body .cl-board-cap{max-width:430px;margin:18px 0 0 auto;font-size:12.5px;color:var(--muted-2);text-align:center}

/* stats: one hairline row, no card floating over a panel */
body .cl-statrow{display:flex;flex-wrap:wrap;gap:0;margin-top:64px;border-top:1px solid var(--line);padding-top:26px}
body .cl-stat{flex:1 1 150px;padding-right:28px}
body .cl-stat__n{margin:0!important;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
body .cl-stat__l{margin:6px 0 0!important;font-size:13px;color:var(--muted)}

/* numbered rows in the navy band */
body .cl-nrow{display:flex;gap:22px;padding:20px 0;border-top:1px solid rgba(var(--surface-rgb),.14)}
body .cl-nrow:first-child{border-top:0;padding-top:0}
body .cl-nrow__n{margin:0!important;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent-soft);padding-top:3px}
body .cl-nrow__t{margin:0!important;font-size:16px;color:var(--surface)}
body .cl-nrow__d{margin:5px 0 0!important;font-size:15px;color:var(--on-dark);line-height:1.6}

/* flat surfaces - one layer each */
body .cl-card,body .cl-summary{border:1px solid var(--line);background:var(--surface)}
body .cl-band--mist .cl-card{background:var(--surface)}
body .cl-calendly,body .cl-form{box-shadow:none;border:1px solid var(--line)}
body .cl-review:hover,body .cl-offer:hover,body .cl-card:hover{box-shadow:none}

/* premium motion: line mask reveal for headings, stagger for the rest */
html.cl-js body .cl-reveal{display:block;overflow:hidden}
html.cl-js body .cl-reveal>span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.cl-js body .cl-reveal.cl-in>span{transform:none}
html.cl-js body .cl-rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.cl-js body .cl-rv.cl-in{opacity:1;transform:none}
html.cl-js body #chess-app{opacity:0;transform:translateY(16px);transition:opacity 1s ease .1s,transform 1s cubic-bezier(.22,.61,.36,1) .1s}
html.cl-js body #chess-app.cl-in{opacity:1;transform:none}

@media (max-width:781px){
  body .cl-hero{padding:34px 0 48px}
  body .cl-hero__board #chess-app,body .cl-board-cap{max-width:none;margin-left:0}
  body .cl-hero__cols{gap:36px!important}
  body .cl-statrow{margin-top:40px;padding-top:20px}
  body .cl-stat{flex:1 1 44%;padding:10px 16px 10px 0}
  body .cl-stat__n{font-size:23px}
  body .cl-nrow{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html.cl-js body .cl-reveal>span,html.cl-js body .cl-rv,html.cl-js body #chess-app{opacity:1;transform:none;transition:none}
}

/* photos - one flat frame, no stacked blocks behind */
body .cl-photo{position:relative;width:100%;max-width:440px;overflow:hidden;border-radius:14px;background:var(--tint)}
body .cl-photo::before{content:"";display:block;padding-top:120%}
body .cl-photo--square::before{padding-top:100%}
body .cl-photo--wide::before{padding-top:56%}
body .cl-photo .wp-block-image{position:absolute!important;inset:0;margin:0!important}
body .cl-photo .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px}
body .cl-col-photo{min-width:0}
@media (max-width:781px){body .cl-photo{max-width:none}}

/* sticky header that condenses once you scroll */
body .cl-header{position:sticky;top:0;transition:box-shadow .35s ease,background .35s ease}
body .cl-header .cl-wrap{transition:padding .35s cubic-bezier(.22,.61,.36,1)}
body.cl-scrolled .cl-header{background:rgba(var(--surface-rgb),.88);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 var(--line)}
body.cl-scrolled .cl-header .cl-wrap{padding-top:14px;padding-bottom:14px}
@media (prefers-reduced-motion:reduce){body .cl-header,body .cl-header .cl-wrap,body .cl-header .cl-wrap::before{transition:none}}

/* ============================================================
   Depth - elevation scale used everywhere
   ============================================================ */
:root{
  --e1:0 1px 2px rgba(var(--ink-rgb),.06), 0 2px 8px rgba(var(--ink-rgb),.05);
  --e2:0 2px 4px rgba(var(--ink-rgb),.07), 0 8px 20px -6px rgba(var(--ink-rgb),.12);
  --e3:0 6px 12px -4px rgba(var(--ink-rgb),.12), 0 20px 40px -12px rgba(var(--ink-rgb),.20);
  --e4:0 10px 20px -6px rgba(var(--ink-rgb),.16), 0 34px 60px -18px rgba(var(--ink-rgb),.28);
}

/* ---- package cards ---- */
body .cl-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;perspective:1400px}
body .cl-pcards--4{grid-template-columns:repeat(4,1fr);gap:20px}
/* The outer card never moves, so it can never slip out from under the
   cursor. Only the inner panel tilts. */
body .cl-pcard{position:relative;display:flex;perspective:900px}
body .cl-pcard__in{
  flex:1;display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px 26px 28px;box-shadow:var(--e2);
  transform-style:preserve-3d;will-change:transform;
  transform:translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-pcard:hover .cl-pcard__in{--ty:-8px;box-shadow:var(--e4)}
body .cl-pcard.is-tilting .cl-pcard__in{transition:transform .12s ease-out,box-shadow .45s ease}
body .cl-pcard--on .cl-pcard__in{
  background:var(--accent);
  background:linear-gradient(165deg,var(--accent) 0%,var(--accent-dark) 100%);
  border-color:transparent;color:var(--surface);box-shadow:var(--e3);--ty:-10px;
}
body .cl-pcard--on:hover .cl-pcard__in{--ty:-18px}
body .cl-pcard__tag{
  align-self:flex-start;margin:0 0 14px!important;padding:5px 12px;border-radius:999px;
  background:rgba(var(--surface-rgb),.2);color:var(--surface);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
body .cl-pcard__name{margin:0 0 10px!important}
body .cl-pcard--on .cl-pcard__name{color:var(--surface)}
body .cl-pcard__price{margin:0 0 12px!important;font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
body .cl-pcard__price span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted-2)}
body .cl-pcard--on .cl-pcard__price,body .cl-pcard--on .cl-pcard__price span{color:var(--surface)}
body .cl-pcard__desc{margin:0 0 20px!important;font-size:15px;line-height:1.6;color:var(--muted)}
body .cl-pcard--on .cl-pcard__desc{color:rgba(var(--surface-rgb),.88)}
body .cl-pcard__list{margin:0 0 26px!important;flex:1}
body .cl-pcard__list li{font-size:14.5px;padding:7px 0}
body .cl-pcard--on .cl-pcard__list li{color:rgba(var(--surface-rgb),.92)}
body .cl-pcard--on .cl-ticks li::before{color:var(--surface)}
body .cl-pcard__in .wp-block-buttons{margin-top:auto}
body .cl-pcard__in .wp-block-button__link{display:block;text-align:center;width:100%;box-sizing:border-box}
body .cl-pcards+.cl-link{margin-top:34px;text-align:center}

/* ---- depth on the other surfaces ---- */
body .cl-card,body .cl-review,body .cl-summary{box-shadow:var(--e1)}
body .cl-card:hover,body .cl-review:hover{box-shadow:var(--e3);transform:translateY(-5px)}
body .cl-calendly,body .cl-form{box-shadow:var(--e3)}
body .cl-photo{box-shadow:var(--e3)}
body .wp-block-button__link{box-shadow:var(--e1)}
body .wp-block-button__link:hover{box-shadow:var(--e3)}

@media (max-width:1100px){
  body .cl-pcards,body .cl-pcards--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:781px){
  body .cl-pcards,body .cl-pcards--4{grid-template-columns:1fr;gap:18px}
  body .cl-pcard__in,body .cl-pcard--on .cl-pcard__in{--ty:0px;--rx:0deg;--ry:0deg;padding:26px 22px}
  body .cl-pcard:hover .cl-pcard__in,body .cl-pcard--on:hover .cl-pcard__in{--ty:-4px}
  body .cl-pcard__price{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  body .cl-pcard__in,body .cl-card,body .cl-review{transition:none}
  body .cl-pcard:hover .cl-pcard__in{--rx:0deg;--ry:0deg}
  body .cl-card:hover,body .cl-review:hover{transform:none}
}

/* tick marks on feature lists */
body .wp-block-list.cl-ticks li{position:relative;padding-left:26px;line-height:1.5;margin:0}
body .wp-block-list.cl-ticks li::before{
  content:"";position:absolute;left:2px;top:.36em;width:12px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px;
}
body .cl-pcard--on .cl-ticks li::before{border-color:var(--surface)}
body .cl-ticks--lg li{padding-left:34px}
body .cl-ticks--lg li::before{width:15px;height:8px;top:.40em;border-width:2.5px}


/* brand emblem */
body .cl-emblem{margin:0!important;flex:none;line-height:0}
body .cl-emblem img{display:block;width:auto;height:40px;object-fit:contain}
body .cl-emblem a{display:block;line-height:0}
body .cl-brand--light .cl-emblem img{height:36px}
@media (max-width:781px){body .cl-emblem img{height:32px}}

/* ============================================================
   v3 - dimensional header, buttons and sections
   ============================================================ */

/* ---------- HEADER ---------- */
body .cl-header{
  background:var(--surface);
  background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--tint) 55%,var(--surface)) 100%);
  border-bottom:1px solid transparent;
}
body.cl-scrolled .cl-header{
  background:rgba(var(--surface-rgb),.82);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);box-shadow:var(--e2);
}
body .cl-header .cl-wrap{padding-top:20px;padding-bottom:20px}
body .cl-brand{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
body .cl-brand:hover{transform:translateY(-1px) scale(1.02)}
body .cl-emblem img{filter:drop-shadow(0 3px 5px rgba(var(--ink-rgb),.22));transition:filter .4s,transform .5s cubic-bezier(.22,.61,.36,1)}
body .cl-brand:hover .cl-emblem img{filter:drop-shadow(0 6px 10px rgba(var(--ink-rgb),.3));transform:rotate(-6deg)}

/* nav links: sliding underline + lift */
body .cl-nav .wp-block-navigation-item__content{
  position:relative;padding:8px 2px;border-bottom:0;font-weight:500;
  transition:color .25s ease,transform .25s ease;
}
body .cl-nav .wp-block-navigation-item:not(.cl-nav-cta) .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
body .cl-nav .wp-block-navigation-item:not(.cl-nav-cta):hover .wp-block-navigation-item__content::after{transform:scaleX(1);transform-origin:left}
body .cl-nav .wp-block-navigation-item:not(.cl-nav-cta):hover .wp-block-navigation-item__content{color:var(--accent);transform:translateY(-1px)}

/* header CTA pill */
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content{
  background:var(--accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 16%,var(--accent)) 0%,var(--accent) 48%,var(--accent-dark) 100%);
  color:var(--surface);padding:12px 24px;border-radius:999px;font-weight:700;font-size:14.5px;
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.3) inset, var(--e2);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(var(--surface-rgb),.35) inset, var(--e3)}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:active{transform:translateY(0) scale(.98)}
body .cl-nav .cl-nav-cta .wp-block-navigation-item__content::after{display:none}

/* hamburger */
body .wp-block-navigation__responsive-container-open{
  color:var(--ink);border-radius:12px;padding:9px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--e1);
  transition:transform .25s ease,box-shadow .25s ease;
}
body .wp-block-navigation__responsive-container-open:hover{transform:translateY(-1px);box-shadow:var(--e2)}

/* ---------- BUTTONS ---------- */
body .wp-block-button__link{
  background:var(--accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 18%,var(--accent)) 0%,var(--accent) 46%,var(--accent-dark) 100%);
  border-radius:12px;font-weight:600;letter-spacing:.005em;
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.32) inset,
             0 2px 4px rgba(var(--ink-rgb),.12),
             0 8px 18px -6px rgba(var(--accent-rgb),.45);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,filter .3s ease;
}
body .wp-block-button__link:hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 22%,var(--accent)) 0%,var(--accent) 46%,var(--accent-dark) 100%);
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.4) inset,
             0 6px 10px rgba(var(--ink-rgb),.14),
             0 18px 30px -10px rgba(var(--accent-rgb),.55);
}
body .wp-block-button__link:active{transform:translateY(0) scale(.985);box-shadow:0 1px 3px rgba(var(--ink-rgb),.25) inset}
body .cl-btn-light .wp-block-button__link{
  background:var(--surface);
  background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--line) 40%,var(--surface)) 100%);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.9) inset,0 2px 4px rgba(var(--ink-rgb),.16),0 10px 22px -8px rgba(var(--ink-rgb),.4);
}
body .cl-btn-light .wp-block-button__link:hover{background:var(--surface);transform:translateY(-3px)}

/* ---------- SECTIONS ---------- */
/* steps: raised 3D number badges */
body .cl-step{
  border:0;border-radius:16px;padding:22px 24px;align-items:center;gap:22px;
  background:var(--surface);box-shadow:var(--e1);margin-bottom:14px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
}
body .cl-step:first-of-type{border-top:0}
body .cl-step:hover{transform:translateX(6px);box-shadow:var(--e3)}
body .cl-step__n{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;
  font-size:13px;font-weight:700;color:var(--surface);
  background:var(--accent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 22%,var(--accent)),var(--accent-dark));
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.4) inset,0 6px 12px -4px rgba(var(--accent-rgb),.6);
}
body .cl-band--mist .cl-step{background:var(--surface)}

/* compare: two raised panels instead of a hairline split */
body .cl-compare{border-top:0;gap:22px}
body .cl-compare__col{
  padding:26px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--e1);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
}
body .cl-compare__col:hover{transform:translateY(-5px);box-shadow:var(--e3)}
body .cl-compare__col--us{
  border-color:transparent;
  background:var(--surface);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface));
  box-shadow:var(--e2),0 0 0 1.5px var(--accent) inset;
}

/* numbered rows in the navy band */
body .cl-nrow{
  border-top:0;border-radius:14px;padding:18px 20px;margin-bottom:10px;
  background:rgba(var(--surface-rgb),.05);border:1px solid rgba(var(--surface-rgb),.1);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),background .4s ease;
}
body .cl-nrow:first-child{padding-top:18px}
body .cl-nrow:hover{transform:translateX(6px);background:rgba(var(--surface-rgb),.1)}
body .cl-nrow__n{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:rgba(var(--surface-rgb),.12);color:var(--accent-soft);padding:0;
}

/* reviews as raised cards */
body .cl-review{border-radius:16px;border:1px solid var(--line);transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}

/* FAQ: animated open/close */
body .cl-faq{border-top:0}
body .cl-faq .wp-block-details{
  border-bottom:0;border-radius:14px;padding:4px 20px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--e1);
  transition:box-shadow .35s ease,transform .35s ease;
}
body .cl-faq .wp-block-details:hover{box-shadow:var(--e2);transform:translateY(-2px)}
body .cl-faq .wp-block-details[open]{box-shadow:var(--e3)}
body .cl-faq .wp-block-details summary{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
body .cl-faq .wp-block-details summary::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .35s cubic-bezier(.22,.61,.36,1);margin-right:4px;
}
body .cl-faq .wp-block-details[open] summary::after{transform:rotate(-135deg)}
body .cl-faq .wp-block-details>p{padding-bottom:18px;color:var(--muted);margin:0}

/* stats get a little depth */
body .cl-stat{position:relative;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
body .cl-stat:hover{transform:translateY(-3px)}
body .cl-stat__n{color:var(--ink);background:linear-gradient(180deg,var(--ink) 0%,color-mix(in srgb,var(--accent) 45%,var(--ink)) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* closing CTA band */
body .cl-cta{background:var(--ink);background:linear-gradient(150deg,var(--ink) 0%,var(--ink-deep) 60%,color-mix(in srgb,var(--accent) 30%,var(--ink-deep)) 100%)}

@media (max-width:781px){
  body .cl-header .cl-wrap{padding-top:14px;padding-bottom:14px}
  body .cl-step{padding:18px;gap:16px;transform:none!important}
  body .cl-step__n{width:40px;height:40px}
  body .cl-compare{gap:14px}
  body .cl-compare__col,body .cl-compare__col--us{padding:20px}
  body .cl-nrow:hover,body .cl-step:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  body .cl-step,body .cl-nrow,body .cl-compare__col,body .cl-review,body .cl-faq .wp-block-details,
  body .wp-block-button__link,body .cl-brand,body .cl-stat{transition:none}
  body .cl-step:hover,body .cl-nrow:hover,body .cl-compare__col:hover,body .cl-stat:hover,
  body .wp-block-button__link:hover{transform:none}
}

/* the board stage catches the cursor even though the board itself is inert */
body .cl-hero__board{cursor:default}
body .cl-hero__board #chess-app{will-change:transform}

/* compare: crosses on the left column, ticks on the right */
body .cl-compare__col--them .cl-ticks li::before{
  width:12px;height:12px;border:0;border-radius:0;transform:none;top:.34em;left:3px;
  background:
    linear-gradient(to bottom,transparent 45%,var(--muted-2) 45%,var(--muted-2) 55%,transparent 55%) rotate(45deg),
    linear-gradient(to bottom,transparent 45%,var(--muted-2) 45%,var(--muted-2) 55%,transparent 55%);
}
body .cl-compare__col--them .cl-ticks li::before{
  background:none;
}
body .cl-compare__col--them .cl-ticks li::after{
  content:"";position:absolute;left:3px;top:.52em;width:12px;height:2px;border-radius:2px;
  background:var(--muted-2);transform:rotate(45deg);box-shadow:0 0 0 0 transparent;
}
body .cl-compare__col--them .cl-ticks li{position:relative}
body .cl-compare__col--them .cl-ticks li::before{
  content:"";position:absolute;left:3px;top:.52em;width:12px;height:2px;border-radius:2px;
  background:var(--muted-2);transform:rotate(-45deg);
}
body .cl-compare__col{display:flex;flex-direction:column}
body .cl-compare__col .cl-ticks{flex:1}

/* ============================================================
   Mobile overlay menu
   ============================================================ */
@media (max-width:781px){
  /* WordPress passes the header's right-justification into the overlay through
     --navigation-layout-align, which shoves the list to the right edge. Undo it. */
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    --navigation-layout-align:stretch;
    --navigation-layout-justify:flex-start;
    align-items:stretch!important;
    justify-content:flex-start!important;
    text-align:left!important;
    width:100%!important;flex-direction:column!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    width:100%!important;max-width:none!important;justify-content:flex-start!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open{
    background:var(--ink);
    background:linear-gradient(165deg,var(--ink) 0%,var(--ink-deep) 55%,color-mix(in srgb,var(--accent) 34%,var(--ink-deep)) 100%);
    color:var(--surface);
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
    padding:84px 26px calc(26px + env(safe-area-inset-bottom,0px));
  }
  body .wp-block-navigation__responsive-container-close{
    color:var(--surface);padding:10px;margin:20px 18px 0 0;border-radius:12px;
    background:rgba(var(--surface-rgb),.1);border:1px solid rgba(var(--surface-rgb),.16);
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    opacity:0;transform:translateY(16px);
    animation:cl-menu-in .5s cubic-bezier(.22,.61,.36,1) forwards;
  }
  body .is-menu-open .wp-block-navigation-item:nth-child(1){animation-delay:.05s}
  body .is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.11s}
  body .is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.17s}
  body .is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.23s}
  body .is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.3s}
  @keyframes cl-menu-in{to{opacity:1;transform:none}}

  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.02em;
    color:var(--surface);padding:20px 2px;
    border-bottom:1px solid rgba(var(--surface-rgb),.14);
  }
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content::after{
    content:"";position:static;transform:rotate(45deg);opacity:.5;
    width:9px;height:9px;border:0;border-top:2px solid var(--surface);border-right:2px solid var(--surface);
    background:none;border-radius:0;transition:transform .3s ease,opacity .3s ease;
  }
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content:active::after{transform:rotate(45deg) translate(3px,-3px);opacity:1}

  body .is-menu-open .cl-nav-cta{margin-top:30px}
  body .is-menu-open .cl-nav-cta>.wp-block-navigation-item__content{
    display:block;width:100%;text-align:center;box-sizing:border-box;
    font-size:16px;padding:17px 24px;border-radius:14px;
  }
}

/* comfortable tap targets for inline text links on phones */
@media (max-width:781px){
  body .cl-link a{display:inline-block;padding:11px 0}
  body .cl-footer a{display:inline-block;padding:4px 0}
}
@media (prefers-reduced-motion:reduce){
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{animation:none;opacity:1;transform:none}
}

/* ============================================================
   Glossy chess-set graphic
   ============================================================ */
body .cl-cta .cl-wrap{align-items:center;gap:48px}
body .cl-cta__text{flex:1 1 440px;min-width:0}
body .cl-cta__art{
  flex:0 1 420px;align-self:stretch;min-height:230px;position:relative;
  background:url('../images/chessset.webp') center bottom/contain no-repeat;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.45));
  animation:cl-float 7s ease-in-out infinite;
}
@keyframes cl-float{50%{transform:translateY(-10px)}}
body .cl-cta .wp-block-buttons{margin-top:26px}

/* thank-you mark */
body .cl-mark{
  width:100%;max-width:300px;height:190px;margin:0 auto 40px;
  background:url('../images/chessset.webp') center bottom/contain no-repeat;
  filter:drop-shadow(0 18px 26px rgba(var(--ink-rgb),.3));
}

@media (max-width:900px){
  body .cl-cta .cl-wrap{flex-direction:column;align-items:flex-start;gap:28px}
  body .cl-cta__art{flex:none;width:100%;max-width:300px;min-height:180px;align-self:center;animation:none}
}
@media (prefers-reduced-motion:reduce){body .cl-cta__art{animation:none}}

/* ============================================================
   Glossy 3D icon tile - the tile is CSS, the glyph is SVG
   ============================================================ */
body .cl-ic{
  display:block;width:52px;height:52px;flex:none;position:relative;border-radius:16px;
  background:var(--accent);
  background:linear-gradient(170deg,
    color-mix(in srgb,var(--surface) 34%,var(--accent)) 0%,
    var(--accent) 45%, var(--accent-dark) 100%);
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.45) inset,
             0 0 0 1px rgba(var(--surface-rgb),.22) inset,
             0 6px 12px -4px rgba(var(--accent-rgb),.55),
             0 12px 22px -10px rgba(var(--ink-rgb),.35);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-ic::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;border-radius:16px 16px 60% 60%/16px 16px 26% 26%;
  background:linear-gradient(180deg,rgba(var(--surface-rgb),.46),rgba(var(--surface-rgb),0));
  pointer-events:none;
}
body .cl-ic svg{
  position:absolute;inset:0;margin:auto;width:56%;height:56%;display:block;
  filter:drop-shadow(0 2px 2px rgba(var(--ink-rgb),.4));
}
body .cl-ic--sm{width:44px;height:44px;border-radius:13px}
body .cl-ic--sm::before{border-radius:13px 13px 60% 60%/13px 13px 26% 26%}

/* ============================================================
   Layout 1 - icon grid
   ============================================================ */
body .cl-icgrid{display:grid;gap:20px;margin-top:34px}
body .cl-icgrid--4{grid-template-columns:repeat(4,1fr)}
body .cl-icgrid--3{grid-template-columns:repeat(3,1fr)}
body .cl-icgrid--2{grid-template-columns:repeat(2,1fr)}
body .cl-iccard{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px 22px;box-shadow:var(--e2);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-band--mist .cl-iccard,body .cl-titleband+.cl-section .cl-iccard{background:var(--surface)}
body .cl-iccard:hover{transform:translateY(-7px);box-shadow:var(--e4)}
body .cl-iccard:hover .cl-ic{transform:translateY(-2px) rotate(-5deg)}
body .cl-iccard__t{margin:18px 0 8px!important;font-size:17px}
body .cl-iccard__d{margin:0!important;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* dark variant, for the navy band */
body .cl-band--navy .cl-iccard{
  background:rgba(var(--surface-rgb),.06);border-color:rgba(var(--surface-rgb),.12);box-shadow:none;
}
body .cl-band--navy .cl-iccard:hover{background:rgba(var(--surface-rgb),.1);box-shadow:none}
body .cl-band--navy .cl-iccard__t{color:var(--surface)}
body .cl-band--navy .cl-iccard__d{color:var(--on-dark)}

/* ============================================================
   Layout 2 - sticky heading column + icon rows
   ============================================================ */
body .cl-sticky{gap:64px!important;align-items:flex-start}
body .cl-sticky__side{flex-grow:.8!important;min-width:0}
body .cl-sticky__inner{position:sticky;top:104px}
body .cl-sticky__inner .cl-lead{margin:16px 0 0;max-width:380px}
body .cl-sticky__inner .wp-block-buttons{margin-top:26px}
body .cl-sticky__rows{min-width:0}
body .cl-irow{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-bottom:12px;box-shadow:var(--e1);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-irow:hover{transform:translateX(7px);box-shadow:var(--e3)}
body .cl-irow:hover .cl-ic{transform:rotate(-5deg)}
body .cl-irow__b{min-width:0}
body .cl-irow__t{margin:0 0 5px!important;font-size:16px}
body .cl-irow__d{margin:0!important;font-size:14.5px;line-height:1.6;color:var(--muted)}
body .cl-band--navy .cl-irow{background:rgba(var(--surface-rgb),.06);border-color:rgba(var(--surface-rgb),.12);box-shadow:none}
body .cl-band--navy .cl-irow:hover{background:rgba(var(--surface-rgb),.1);box-shadow:none}
body .cl-band--navy .cl-irow__t{color:var(--surface)}
body .cl-band--navy .cl-irow__d{color:var(--on-dark)}

@media (max-width:1000px){
  body .cl-icgrid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:781px){
  body .cl-icgrid,body .cl-icgrid--4,body .cl-icgrid--3,body .cl-icgrid--2{grid-template-columns:1fr;gap:14px;margin-top:26px}
  body .cl-iccard{padding:22px 20px}
  body .cl-iccard:hover,body .cl-irow:hover{transform:none}
  body .cl-sticky{gap:28px!important}
  body .cl-sticky__inner{position:static}
  body .cl-irow{padding:18px;gap:14px}
  body .cl-ic{width:44px;height:44px;border-radius:13px}
  body .cl-ic::before{border-radius:13px 13px 60% 60%/13px 13px 26% 26%}
}
@media (prefers-reduced-motion:reduce){
  body .cl-iccard,body .cl-irow,body .cl-ic{transition:none}
  body .cl-iccard:hover,body .cl-irow:hover,body .cl-iccard:hover .cl-ic,body .cl-irow:hover .cl-ic{transform:none}
}

/* ---- mobile menu: brand mark, watermark and footer line ---- */
@media (max-width:781px){
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
    padding-top:96px;position:relative;overflow:hidden;
  }
  /* emblem, top left */
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before{
    content:"";position:absolute;left:26px;top:26px;width:38px;height:38px;
    background:url('https://chesslabsllc.com/wp-content/uploads/2026/10/Glossy-Blue-Chess-Labs-Emblem.png') left center/contain no-repeat;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
  }
  /* chess set watermark filling the empty lower half */
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after{
    content:"";position:absolute;right:-12%;bottom:-6%;width:78%;height:46%;
    background:url('../images/chessset.webp') right bottom/contain no-repeat;
    opacity:.2;pointer-events:none;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{position:relative;z-index:2}
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content{
    transition:padding-left .3s cubic-bezier(.22,.61,.36,1),color .3s;
  }
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content:active{
    padding-left:10px;color:var(--accent-soft);
  }
}
body .cl-lead--light{color:var(--on-dark)}

/* ---- FAQ: centred, narrow column ---- */
body .cl-faqwrap{max-width:780px;margin:0 auto;text-align:center}
body .cl-faqwrap .cl-lead{margin:10px auto 34px;max-width:560px}
body .cl-faqwrap .cl-faq{text-align:left}
body .cl-faqwrap .cl-eyebrow{margin-bottom:12px}
@media (max-width:781px){
  body .cl-faqwrap{text-align:left}
  body .cl-faqwrap .cl-lead{margin:10px 0 24px}
}

/* ============================================================
   Reviews - cards with rating and avatar
   ============================================================ */
body .cl-stars{display:flex;gap:3px;margin-bottom:14px}
body .cl-stars svg{width:15px;height:15px;fill:#f0a93b;display:block}

body .cl-rgrid{display:grid;gap:20px;margin-top:8px}
body .cl-rgrid--3{grid-template-columns:repeat(3,1fr)}
body .cl-rcard{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;box-shadow:var(--e2);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-rcard:hover{transform:translateY(-6px);box-shadow:var(--e4)}
body .cl-rcard__q{margin:0 0 auto!important;font-size:15.5px;line-height:1.65;color:var(--ink)}
body .cl-rcard__who{display:flex;align-items:center;gap:12px;margin-top:18px}
body .cl-av{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--surface);font-weight:700;font-size:14px;letter-spacing:.02em;
  background:var(--accent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 26%,var(--accent)),var(--accent-dark));
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.45) inset,0 5px 10px -3px rgba(var(--accent-rgb),.5);
}
body .cl-av__b{min-width:0}
body .cl-av__n{margin:0!important;font-size:14.5px;color:var(--ink)}
body .cl-av__r{margin:1px 0 0!important;font-size:13px;color:var(--muted-2)}

/* rating summary bar */
body .cl-rbar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px 24px;box-shadow:var(--e1);margin-bottom:26px;
}
body .cl-rbar__s{margin:0!important;font-size:30px;font-weight:700;line-height:1;color:var(--ink)}
body .cl-rbar__b .cl-stars{margin-bottom:4px}
body .cl-rbar__m{margin:0!important;font-size:14px;color:var(--muted)}
body .cl-rbar__r{margin:0 0 0 auto!important;font-size:14px;color:var(--muted)}

@media (max-width:1000px){body .cl-rgrid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:781px){
  body .cl-rgrid,body .cl-rgrid--3{grid-template-columns:1fr;gap:14px}
  body .cl-rcard{padding:22px 20px}
  body .cl-rcard:hover{transform:none}
  body .cl-rbar{gap:16px;padding:16px 18px}
  body .cl-rbar__r{margin-left:0!important;width:100%}
}
@media (prefers-reduced-motion:reduce){
  body .cl-rcard{transition:none}body .cl-rcard:hover{transform:none}
}

/* a title band already gives the page its top breathing room */
body .cl-titleband+.cl-section{padding-top:56px}
body .cl-titleband+.cl-band{margin-top:0}
@media (max-width:781px){body .cl-titleband+.cl-section{padding-top:34px}}

/* ---- typed word in the headline ---- */
body .cl-type{
  color:var(--accent);
  display:inline-block;
  text-align:left;
  white-space:nowrap;
}
html.cl-js body .cl-type::after{
  content:"";display:inline-block;width:3px;height:.82em;margin-left:4px;
  background:var(--accent);vertical-align:-.06em;border-radius:2px;
  animation:cl-caret 1.05s steps(1) infinite;
}
@keyframes cl-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html.cl-js body .cl-type::after{display:none}
}

/* ---- header: chess-set mark beside the name ---- */
body .cl-brand{gap:14px}
body .cl-emblem img{height:52px}
body .cl-brand__name,body .cl-brand__name a{font-size:22px;letter-spacing:-.02em}
@media (max-width:781px){
  body .cl-emblem img{height:40px}
  body .cl-brand{gap:10px}
  body .cl-brand__name,body .cl-brand__name a{font-size:19px}
}

/* ---- current page gets a permanent marker ---- */
body .cl-nav .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
body .cl-nav .wp-block-navigation-item.current_page_item>.wp-block-navigation-item__content,
body .cl-nav .wp-block-navigation-item>.wp-block-navigation-item__content[aria-current="page"]{
  color:var(--accent);font-weight:700;border-bottom:0;
}
body .cl-nav .wp-block-navigation-item.current-menu-item:not(.cl-nav-cta)>.wp-block-navigation-item__content::after,
body .cl-nav .wp-block-navigation-item.current_page_item:not(.cl-nav-cta)>.wp-block-navigation-item__content::after,
body .cl-nav .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content[aria-current="page"]::after{
  transform:scaleX(1);transform-origin:left;
}

/* ---- current page in the mobile overlay ---- */
@media (max-width:781px){
  body .is-menu-open .wp-block-navigation-item.current-menu-item:not(.cl-nav-cta)>.wp-block-navigation-item__content,
  body .is-menu-open .wp-block-navigation-item.current_page_item:not(.cl-nav-cta)>.wp-block-navigation-item__content,
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content[aria-current="page"]{
    color:var(--accent-soft);padding-left:16px;position:relative;
  }
  body .is-menu-open .wp-block-navigation-item.current-menu-item:not(.cl-nav-cta)>.wp-block-navigation-item__content::before,
  body .is-menu-open .wp-block-navigation-item.current_page_item:not(.cl-nav-cta)>.wp-block-navigation-item__content::before,
  body .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:26px;border-radius:3px;background:var(--accent-soft);
  }
}

/* ============================================================
   Hover catchers
   A card that lifts moves out from under the cursor, so hover is
   lost, the card drops back, and the pointer flickers. Each card
   keeps a transparent strip in the space it vacates.
   ============================================================ */
body .cl-iccard,body .cl-rcard,body .cl-irow,
body .cl-step,body .cl-compare__col,body .cl-card,
body .cl-faq .wp-block-details{position:relative}

body .cl-iccard::after,body .cl-rcard::after,
body .cl-compare__col::after,body .cl-card::after,
body .cl-faq .wp-block-details::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:var(--catch,9px);pointer-events:auto;
}
body .cl-iccard::after{--catch:8px}
body .cl-rcard::after{--catch:7px}
body .cl-compare__col::after{--catch:6px}
body .cl-card::after{--catch:6px}
body .cl-faq .wp-block-details::after{--catch:3px}

/* these slide sideways, so the strip goes on the side they leave */
body .cl-irow::after,body .cl-step::after,body .cl-srow::after{
  content:"";position:absolute;top:0;bottom:0;right:100%;
  width:var(--catch,8px);pointer-events:auto;
}
body .cl-irow::after{--catch:8px}
body .cl-step::after{--catch:7px}
body .cl-srow::after{--catch:8px}

@media (prefers-reduced-motion:reduce){
  body .cl-iccard::after,body .cl-rcard::after,
  body .cl-compare__col::after,body .cl-card::after,body .cl-irow::after,
  body .cl-step::after,body .cl-srow::after,body .cl-faq .wp-block-details::after{display:none}
}

/* Grid and flex children refuse to shrink below their intrinsic width unless
   told to, which is what pushed the tournament form off-screen on tablets. */
body .cl-form__row{min-width:0}
body .cl-form label{min-width:0}
body .cl-form input,body .cl-form select{width:100%;min-width:0;box-sizing:border-box;max-width:100%}
body .cl-form{min-width:0;max-width:100%;box-sizing:border-box}
@media (max-width:900px){body .cl-form__row{grid-template-columns:1fr}}

/* Grid and flex children refuse to shrink below their intrinsic width unless
   told to, which is what pushed the tournament form off-screen on tablets. */
body .cl-form__row{min-width:0}
body .cl-form label{min-width:0}
body .cl-form input,body .cl-form select{width:100%;min-width:0;box-sizing:border-box;max-width:100%}
body .cl-form{min-width:0;max-width:100%;box-sizing:border-box}
@media (max-width:900px){body .cl-form__row{grid-template-columns:1fr}}

/* ============================================================
   Coaching experience band - image left, words right
   ============================================================ */
body .cl-xp{
  position:relative;padding:66px 0 70px;
  background:var(--tint);
  background:linear-gradient(250deg,var(--surface) 0%,var(--surface) 46%,var(--tint) 100%);
}
body .cl-xp__row{gap:52px!important;align-items:center}
body .cl-xp__media{flex-grow:.88!important;min-width:0}
body .cl-xp__text{min-width:0}
body .cl-xp .cl-lead{margin:14px 0 0;max-width:520px}
body .cl-xp__h em{font-style:normal;color:var(--accent)}

/* the whole piece is shown, never cropped */
body .cl-xp__art{
  width:100%;height:320px;
  background:url('../images/chessset.webp') center left/contain no-repeat;
  filter:drop-shadow(0 22px 26px rgba(var(--ink-rgb),.2));
}

body .cl-xpstats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
body .cl-xpcard{
  display:flex;align-items:center;gap:13px;min-width:0;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:16px;box-shadow:var(--e2);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
body .cl-xpcard::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px}
body .cl-xpcard:hover{transform:translateY(-6px);box-shadow:var(--e4)}
body .cl-xpcard:hover .cl-pc{transform:translateY(-2px) rotate(-5deg)}
body .cl-xp__b{min-width:0}
body .cl-xp__n{margin:0!important;font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)}
body .cl-xp__l{margin:4px 0 0!important;font-size:13px;color:var(--muted);line-height:1.3;white-space:nowrap}

/* chess pieces as icons, drawn from the board artwork */
body .cl-pc{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
body .cl-pc svg{
  width:100%;height:100%;display:block;
  fill:var(--accent);stroke:var(--accent-dark);stroke-width:1.1;
  stroke-linejoin:round;stroke-linecap:round;
}

@media (max-width:980px){
  body .cl-xp__row{flex-direction:column;gap:30px!important}
  body .cl-xp__media{order:2;width:100%}
  body .cl-xp__art{height:220px;background-position:center}
  body .cl-xp .cl-lead{max-width:none}
}
@media (max-width:781px){
  body .cl-xp{padding:42px 0 48px;background:var(--tint)}
  body .cl-xp__art{height:180px}
  body .cl-xpstats{gap:12px;margin-top:24px}
  body .cl-xpcard{padding:14px;gap:11px}
  body .cl-pc{width:38px;height:38px}
  body .cl-xp__n{font-size:24px}
  body .cl-xp__l{font-size:12.5px;white-space:normal}
  body .cl-xpcard:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  body .cl-xpcard,body .cl-pc{transition:none}
  body .cl-xpcard:hover,body .cl-xpcard:hover .cl-pc{transform:none}
}

/* The experience band now sits between the hero and the first .cl-band,
   so it has to cancel that band's top gap the way the hero used to. */
body .cl-xp+.cl-band,body .cl-xp+.cl-section{margin-top:0}

/* ---- header CTA: same shine, lift and press as the page buttons ----
   Its ::after is taken by the nav underline, so the shine uses ::before. */
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content{
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.32) inset,
             0 2px 4px rgba(var(--ink-rgb),.12),
             0 8px 18px -6px rgba(var(--accent-rgb),.45);
}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(var(--surface-rgb),.34),transparent);
  transform:skewX(-20deg);pointer-events:none;
  transition:left .7s cubic-bezier(.22,.61,.36,1);
}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:hover::before{left:130%}
body .cl-nav .cl-nav-cta .wp-block-navigation-item__label{position:relative;z-index:1}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:hover{
  background:var(--accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 22%,var(--accent)) 0%,var(--accent) 46%,var(--accent-dark) 100%);
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.4) inset,
             0 6px 10px rgba(var(--ink-rgb),.14),
             0 18px 30px -10px rgba(var(--accent-rgb),.55);
}
body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:active{transform:translateY(0) scale(.985)}
@media (prefers-reduced-motion:reduce){
  body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content::before{display:none}
  body .cl-nav .cl-nav-cta>.wp-block-navigation-item__content:hover{transform:none}
}

/* ============================================================
   Page hero banner - photo right, text over a light wash
   ============================================================ */
body .cl-phero{
  position:relative;overflow:hidden;padding:0;
  background:var(--tint);
  min-height:430px;display:flex;align-items:center;
}
body .cl-phero__img{
  position:absolute;inset:0;z-index:1;
  background-position:center right;background-size:cover;background-repeat:no-repeat;
}
/* the wash is what keeps the heading readable whatever the photo does */
body .cl-phero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--surface-rgb),.97) 0%,
    rgba(var(--surface-rgb),.93) 30%,
    rgba(var(--surface-rgb),.55) 52%,
    rgba(var(--surface-rgb),0) 78%);
}
body .cl-phero .cl-wrap{position:relative;z-index:3;width:100%}
body .cl-phero__text{max-width:560px}
body .cl-phero .cl-eyebrow{margin-bottom:14px}
body .cl-phero .cl-titleband__h{margin-bottom:16px}
body .cl-phero .cl-titleband__intro{max-width:460px;color:var(--muted)}

@media (max-width:980px){
  body .cl-phero{min-height:360px}
  body .cl-phero::after{
    background:linear-gradient(90deg,
      rgba(var(--surface-rgb),.97) 0%,
      rgba(var(--surface-rgb),.9) 42%,
      rgba(var(--surface-rgb),.4) 72%,
      rgba(var(--surface-rgb),.1) 100%);
  }
}
@media (max-width:781px){
  /* on a phone there is no room beside the photo, so it sits behind everything */
  body .cl-phero{min-height:270px;padding:38px 0 34px}
  body .cl-phero__img{background-position:center}
  body .cl-phero::after{
    background:linear-gradient(180deg,
      rgba(var(--surface-rgb),.94) 0%,
      rgba(var(--surface-rgb),.88) 58%,
      rgba(var(--surface-rgb),.78) 100%);
  }
  body .cl-phero__text{max-width:none}
  body .cl-phero .cl-titleband__intro{max-width:none}
}

/* ---- mobile polish ---- */
/* Grid columns default to min-width:auto, so the calendar could not shrink
   below its content and overflowed on a 320px screen. */

@media (max-width:420px){
}
@media (max-width:360px){
}

/* small caps labels were dipping under 12.5px on narrow screens */
@media (max-width:781px){
  body .cl-eyebrow{font-size:12.5px;letter-spacing:.1em}
}
body .cl-pcard__tag{font-size:12px}

/* ============================================================
   Mobile overlay CTA
   The header pill rules sit later in this file and have the same
   specificity as the overlay rules, so they were winning and the
   button came out desktop-thin across the full width. Raise the
   specificity and size it as a proper phone button.
   ============================================================ */
@media (max-width:781px){
  body .cl-nav .is-menu-open .cl-nav-cta{margin-top:38px;padding-inline:2px}
  body .cl-nav .is-menu-open .cl-nav-cta>.wp-block-navigation-item__content{
    display:flex;align-items:center;justify-content:center;
    width:100%;box-sizing:border-box;min-height:60px;
    padding:19px 28px;border-radius:16px;
    font-family:var(--body);font-size:17px;font-weight:700;letter-spacing:.01em;
    text-align:center;line-height:1.2;
    box-shadow:0 1px 0 rgba(var(--surface-rgb),.32) inset,
               0 10px 26px -8px rgba(var(--accent-rgb),.65);
  }
  body .cl-nav .is-menu-open .cl-nav-cta>.wp-block-navigation-item__content:active{
    transform:scale(.985);
  }
}

/* The desktop underline rule for the current page sits outside any media
   query and overrode the overlay chevron's rotation, so the arrow on the
   current page rendered as a corner mark. Restore it on phones. */
@media (max-width:781px){
  body .cl-nav .is-menu-open .wp-block-navigation-item.current-menu-item:not(.cl-nav-cta)>.wp-block-navigation-item__content::after,
  body .cl-nav .is-menu-open .wp-block-navigation-item.current_page_item:not(.cl-nav-cta)>.wp-block-navigation-item__content::after,
  body .cl-nav .is-menu-open .wp-block-navigation-item:not(.cl-nav-cta)>.wp-block-navigation-item__content[aria-current="page"]::after{
    transform:rotate(45deg);transform-origin:center;opacity:.75;
    border-top-color:var(--accent-soft);border-right-color:var(--accent-soft);
  }
}

/* ============================================================
   How coaching works - four numbered steps
   Same two-column frame as the other sticky sections. The badges
   carry the step numbers and the connecting line threads through
   their centres, so the line needs no extra markup.
   ============================================================ */
body .cl-steps4{position:relative;display:flex;flex-direction:column;gap:16px}
body .cl-steps4::before{
  content:"";position:absolute;left:46px;top:30px;bottom:30px;width:2px;
  background:linear-gradient(180deg,
    rgba(var(--accent-rgb),.05) 0%,
    rgba(var(--accent-rgb),.3) 12%,
    rgba(var(--accent-rgb),.3) 88%,
    rgba(var(--accent-rgb),.05) 100%);
  border-radius:2px;pointer-events:none;
}
body .cl-srow{
  position:relative;display:flex;align-items:flex-start;gap:18px;
  padding:22px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--e1);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
body .cl-srow:hover{transform:translateX(7px);box-shadow:var(--e3);border-color:rgba(var(--accent-rgb),.3)}
body .cl-srow__badge{flex:none;position:relative;z-index:1}
body .cl-srow__n{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;box-sizing:border-box;
  background:linear-gradient(170deg,color-mix(in srgb,var(--surface) 20%,var(--accent)) 0%,var(--accent) 52%,var(--accent-dark) 100%);
  box-shadow:0 1px 0 rgba(var(--surface-rgb),.34) inset,
             0 6px 14px -5px rgba(var(--accent-rgb),.6);
  color:var(--surface);font-weight:700;font-size:15px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
body .cl-srow:hover .cl-srow__n{transform:scale(1.06)}
body .cl-srow__b{min-width:0}
body .cl-srow__t{margin:1px 0 5px!important;font-size:16.5px;font-family:var(--head);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
body .cl-srow__d{margin:0!important;font-size:14.5px;line-height:1.62;color:var(--muted)}

/* supporting visual, under the CTA in the left column */
body .cl-how .cl-shot{margin:34px 0 0}
body .cl-how .cl-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:contain;
  background:var(--tint);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--e2);
}

@media (max-width:781px){
  body .cl-steps4{gap:14px}
  body .cl-steps4::before{left:37px;top:26px;bottom:26px}
  body .cl-srow{padding:18px 18px;gap:15px;border-radius:16px}
  body .cl-srow:hover{transform:none;box-shadow:var(--e1)}
  body .cl-srow__n{width:38px;height:38px;font-size:14px}
  body .cl-srow__t{font-size:16px}
  body .cl-how .cl-shot{margin:26px 0 4px}
}
@media (prefers-reduced-motion:reduce){
  body .cl-srow,body .cl-srow__n{transition:none}
  body .cl-srow:hover,body .cl-srow:hover .cl-srow__n{transform:none}
}

/* ---- How coaching works: make both columns end on the same line ----
   Two things flex. When the photo is the taller side, the gaps between
   the step cards open up to reach it. When the cards are the taller
   side, the photo is pushed to the foot of its column to reach them.
   So the section closes level at every width, with nothing cropped
   and no hand-tuned numbers. */
@media (min-width:782px){
  body .cl-how .cl-sticky{align-items:stretch!important}
  body .cl-how .cl-sticky__side{display:flex}
  body .cl-how .cl-sticky__inner{
    position:static;display:flex;flex-direction:column;flex:1;
  }
  body .cl-how .cl-shot{margin-top:auto;padding-top:34px}
  body .cl-how .cl-sticky__rows{display:flex;flex-direction:column}
  body .cl-how .cl-steps4{flex:1;justify-content:space-between}
}

/* ============================================================
   Hero, premium pass
   Every colour here is a brand token, so the five palettes all
   still work. The soft shapes are background layers on the hero
   itself rather than extra elements, so nothing can overflow the
   page, nothing sits on top of the board, and nothing can swallow
   a click. The board, its markup and its own styles are untouched.
   ============================================================ */
body .cl-hero{
  position:relative;
  background:
    /* soft glow behind the board */
    radial-gradient(58% 54% at 78% 38%, rgba(var(--accent-rgb),.13) 0%, rgba(var(--accent-rgb),0) 70%),
    /* oversized curve sweeping in from the lower right */
    radial-gradient(90% 72% at 112% 94%, rgba(var(--accent-rgb),.11) 0%, rgba(var(--accent-rgb),0) 62%),
    /* faint counterweight at the top left, kept very light so the headline stays crisp */
    radial-gradient(66% 58% at -14% 4%, rgba(var(--accent-rgb),.06) 0%, rgba(var(--accent-rgb),0) 60%),
    /* white into ice blue */
    linear-gradient(168deg, var(--surface) 0%, var(--surface) 34%,
      color-mix(in srgb, var(--tint) 60%, var(--surface)) 72%, var(--tint) 100%);
}
/* faint blue glow along the bottom edge */
body .cl-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0) 0%, rgba(var(--accent-rgb),.08) 100%);
}
body .cl-hero>.cl-wrap{position:relative;z-index:1}

/* radial behind the board, painted on the column so it sits under the board */
body .cl-hero__board{
  background:radial-gradient(54% 48% at 54% 50%,
    rgba(var(--accent-rgb),.16) 0%, rgba(var(--accent-rgb),.05) 46%, rgba(var(--accent-rgb),0) 74%);
}

/* eyebrow as a quiet pill */
body .cl-hero .cl-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--tint-2) 72%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.05);
}
body .cl-hero .cl-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}

/* secondary call to action */
body .cl-hero .cl-link a{color:var(--ink)}
body .cl-hero .cl-link a:hover{color:var(--accent)}

@media (min-width:782px){
  body .cl-hero{padding:76px 0 92px}
  body .cl-hero .cl-hero__title{margin:0 0 24px!important}
  body .cl-hero .cl-eyebrow{margin-bottom:22px!important}
}
/* decoration is dialled back where the screen is small */
@media (max-width:781px){
  body .cl-hero{
    background:
      radial-gradient(76% 42% at 70% 24%, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),0) 70%),
      linear-gradient(172deg, var(--surface) 0%, var(--surface) 42%, var(--tint) 100%);
  }
  body .cl-hero::after{height:90px}
  body .cl-hero__board{background:none}
  body .cl-hero .cl-eyebrow{margin-bottom:16px!important}
}
@media (prefers-reduced-motion:reduce){body .cl-hero::after{transition:none}}

/* ---- Game analysis: cards left, text right on desktop ----
   The markup keeps the text first, which is the order wanted on
   phones, so the swap is one flex rule above the stacking width. */
@media (min-width:782px){
  body .cl-band--navy .cl-sticky{flex-direction:row-reverse}
}

/* The business email is long enough to push the footer column past the
   viewport between 782px and 832px. Let it break instead. */
body .cl-footer a{overflow-wrap:anywhere}

/* ---- review avatar with a photo ----
   A review may carry a photo. The initials stay underneath, so a photo
   that is missing, slow or blocked leaves the card looking finished
   rather than empty. */
body .cl-av--photo{position:relative;overflow:hidden;padding:0}
body .cl-av--photo>span{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--surface);font-weight:700;font-size:14px;letter-spacing:.02em;
}
body .cl-av--photo>img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}

/* ============================================================
   Floating glass navbar
   The bar itself is the existing .cl-wrap, so no markup changes.
   .cl-header keeps the sticky behaviour and now only carries the
   soft tint the glass has something to blur against. Panel width
   is set so its inner edges line up with the page content below.
   ============================================================ */
body .cl-header{
  position:sticky;top:0;z-index:20;
  padding:14px 24px 0;
  border-bottom:0;
  /* transparent, so the page really does pass behind the glass */
  background:transparent;
  box-shadow:none;
  transition:padding .35s cubic-bezier(.22,.61,.36,1);
}
/* The glass lives on a pseudo-element, not on .cl-wrap itself.
   backdrop-filter turns an element into the containing block for any
   position:fixed descendant, and the mobile menu overlay is one: put it
   on the bar and the full-screen menu collapses to the size of the bar.
   On the pseudo-element the effect is identical and nothing is trapped. */
body .cl-header .cl-wrap{
  position:relative;
  max-width:1232px;
  padding:14px 26px;
  border-radius:22px;
  background:none;
  transition:padding .35s cubic-bezier(.22,.61,.36,1);
}
body .cl-header .cl-wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:rgba(var(--surface-rgb),.70);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(var(--surface-rgb),.75);
  box-shadow:
    0 1px 0 rgba(var(--surface-rgb),.6) inset,
    0 0 0 1px rgba(var(--accent-rgb),.06),
    0 2px 6px rgba(var(--ink-rgb),.05),
    0 10px 30px -12px rgba(var(--ink-rgb),.20);
  transition:background .35s ease, box-shadow .35s ease;
}
/* once the page moves, the glass firms up slightly and lifts */
body.cl-scrolled .cl-header{
  background:transparent;border-bottom:0;box-shadow:none;
  padding-top:10px;
}
body.cl-scrolled .cl-header .cl-wrap{padding-top:11px;padding-bottom:11px}
body.cl-scrolled .cl-header .cl-wrap::before{
  background:rgba(var(--surface-rgb),.85);
  box-shadow:
    0 1px 0 rgba(var(--surface-rgb),.7) inset,
    0 0 0 1px rgba(var(--accent-rgb),.08),
    0 3px 8px rgba(var(--ink-rgb),.06),
    0 14px 38px -14px rgba(var(--ink-rgb),.26);
}
/* if the browser cannot blur behind an element, make the panel opaque
   enough to stay readable */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body .cl-header .cl-wrap::before,
  body.cl-scrolled .cl-header .cl-wrap::before{background:rgba(var(--surface-rgb),.96)}
}

@media (max-width:1100px){
  body .cl-header{padding:12px 18px 0}
  body .cl-header .cl-wrap{padding:12px 18px;border-radius:20px}
  body.cl-scrolled .cl-header .cl-wrap{padding-top:10px;padding-bottom:10px}
}
@media (max-width:781px){
  body .cl-header{padding:10px 14px 0}
  body .cl-header .cl-wrap{padding:10px 14px;border-radius:18px}
  body.cl-scrolled .cl-header{padding-top:8px}
  body.cl-scrolled .cl-header .cl-wrap{padding-top:9px;padding-bottom:9px}
  /* the open menu gets the same frosted treatment over its dark panel */
  body .wp-block-navigation__responsive-container.is-menu-open{
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
  }
}
@media (prefers-reduced-motion:reduce){
  body .cl-header,body .cl-header .cl-wrap{transition:none}
}

/* ---- keep the navbar sticking ----
   position:sticky silently stops working the moment any ancestor clips
   its overflow, which is what WordPress wrappers and several plugins do
   to stop sideways scrolling. overflow-x:clip gives the same protection
   without creating a scroll container, so the bar keeps sticking.
   The :has() rule catches whatever element actually wraps the header;
   the named wrappers cover browsers without :has(). */
html,body{overflow-x:clip!important}
body .wp-site-blocks,
body .wp-site-blocks>.wp-block-group:not(.cl-hero):not(.cl-band):not(.cl-section){
  overflow-x:clip;overflow-y:visible;
}
body :has(>.cl-header),
html:has(.cl-header){overflow-x:clip!important;overflow-y:visible!important}
body .cl-header{position:sticky!important;top:0!important;z-index:60}
/* but never fight the scroll lock WordPress applies while the menu is open */
html:has(body.has-modal-open),body.has-modal-open{overflow:hidden!important}

/* ---- the real reason the navbar would not stay put ----
   wp:template-part renders a wrapper div around the header, and that
   wrapper contains the header and nothing else. A sticky element can
   never travel outside its parent's box, so with a parent exactly as
   tall as the header it sticks for zero pixels and scrolls away.
   display:contents removes the wrapper's box so the header belongs to
   the page flow and can stay pinned the whole way down. */
body .wp-block-template-part:has(>.cl-header){display:contents}
@supports not selector(:has(*)){
  body .wp-block-template-part{display:contents}
}

/* ---- Book a session: centre the intro against the Calendly panel ----
   The calendar is far taller than the three bullets, which left the
   text stranded at the top. Scoped with :has() to the column that sits
   beside a Calendly embed, so the other split sections are untouched. */
@media (min-width:782px){
  body .cl-cols--split:has(.cl-calendly)>.wp-block-column.cl-col-narrow{
    display:flex;flex-direction:column;justify-content:center;
  }
  body .cl-cols--split:has(.cl-calendly)>.wp-block-column.cl-col-narrow>:last-child{
    margin-bottom:0;
  }
}

/* ---- close the gap under the chess graphic on phones ----
   125px of dead space sat between the artwork and THE PROBLEM: 48px of
   padding below the experience band plus 64px above the next band. The
   next-section rule uses the adjacent sibling selector so only the band
   that actually follows the graphic is affected, not every band. */
@media (max-width:781px){
  body .cl-xp{padding-bottom:20px}
  body .cl-xp+.cl-band,body .cl-xp+.cl-section{padding-top:40px}
}

/* ---- CTA band: the text block was 440px tall on phones ----
   .cl-cta__text carries flex:1 1 440px, written for the two-column row.
   Below 900px the wrap switches to flex-direction:column, where that
   440px basis stops being a width and becomes a HEIGHT, padding the
   block out and pushing the artwork far down the section. Resetting the
   basis lets the block be as tall as its own text. */
@media (max-width:900px){
  body .cl-cta__text{flex:0 0 auto}
  body .cl-cta .cl-wrap{gap:34px}
}

/* ---- mobile footer: Pages and Legal side by side ----
   The four columns stack one per row on phones. Switching the wrapper
   to a two-column grid puts Pages and Legal beside each other, with the
   brand block and Contact spanning the full width above and below.
   Desktop is untouched: the grid only exists below the stacking width. */
@media (max-width:781px){
  html body .cl-footer__cols{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    align-items:start!important;gap:30px 22px!important;flex-wrap:nowrap;
  }
  body .cl-footer__cols>.wp-block-column{width:auto;min-width:0}
  body .cl-footer__cols>.cl-footer__about,
  body .cl-footer__cols>.wp-block-column:nth-child(4){grid-column:1 / -1}
  body .cl-footer__cols>.wp-block-column:nth-child(2){grid-column:1}
  body .cl-footer__cols>.wp-block-column:nth-child(3){grid-column:2}
  body .cl-footer__cols .cl-vnav .wp-block-navigation-item__content{
    overflow-wrap:break-word;
  }
}
/* On the narrowest phones Coaching Agreement needs a few more pixels than
   an even split gives it, so the legal column takes a slightly larger
   share and the gap tightens. Both headings still sit on the same line. */
@media (max-width:400px){
  html body .cl-footer__cols{grid-template-columns:1fr 1.26fr!important;gap:28px 16px!important}
}

/* ---- hero actions on phones ----
   The secondary link's box is 4px taller than the button, so its text and
   its underline sat below the button's label. Giving the link the same
   box height and centring its text lines the two up exactly. Below 400px
   they no longer fit side by side, so they stack left-aligned. */
@media (max-width:781px){
  body .cl-hero .cl-actions{align-items:center;gap:12px 24px}
  body .cl-hero .cl-actions .cl-link{display:flex;align-items:center}
  body .cl-hero .cl-actions .cl-link a{
    display:inline-flex;align-items:center;min-height:46px;padding:0;
  }
  /* the button's wrapper was 54px tall around a 46px button, because the
     inline-block link leaves descender space in its line box; removing
     that makes the wrapper hug the button so both labels sit level */
  body .cl-hero .cl-actions .wp-block-button{display:flex;line-height:0}
}

/* the open menu scrolls on its own when its content is taller than the
   screen, and the bounce stops at its edges instead of reaching the page */
@media (max-width:781px){
  body .wp-block-navigation__responsive-container.is-menu-open{
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* the dialog clips its own content by default, so a short screen cut the
     last links off with nothing able to scroll. Letting it grow past the
     viewport is what gives the container something to scroll. */
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
    min-height:100%;height:auto;box-sizing:border-box;
    /* clip sideways only. The decorative chess watermark sits 12% past the
       right edge by design, and clip keeps it tidy without creating a
       scroll container, so the dialog can still grow taller than the
       screen and let the menu scroll. */
    overflow-x:clip;overflow-y:visible;
  }
}
/* while the page is pinned behind the menu, nothing else may scroll it */
html.cl-menu-locked,html.cl-menu-locked body{overscroll-behavior:none;touch-action:none}
html.cl-menu-locked .wp-block-navigation__responsive-container.is-menu-open,
html.cl-menu-locked .wp-block-navigation__responsive-container.is-menu-open *{touch-action:auto}

/* ---- the open menu must cover the screen, not the header's old spot ----
   Pinning the page with position:fixed takes the sticky header out of its
   stuck position, and the overlay then fell back to its static position
   inside that header, which is off-screen once the reader has scrolled.
   Nailing the open overlay to the viewport makes it independent of wherever
   the header has ended up. */
body .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;max-width:none!important;
}

/* ---- never put a backdrop-filter on the header element itself ----
   Two older rules still blurred .cl-header directly once the page was
   scrolled. backdrop-filter makes an element the containing block for its
   position:fixed descendants, so from the moment the reader scrolled past
   the hero, the open menu was being positioned inside the header instead
   of over the screen: the overlay vanished while the page stayed locked.
   The glass lives on .cl-wrap::before, which has no descendants, so the
   header itself needs none of this. */
body .cl-header,body.cl-scrolled .cl-header{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  transform:none!important;
  perspective:none!important;
  contain:none!important;
}

/* ---- the open menu must not scroll sideways ----
   Setting overflow-y on the overlay makes overflow-x compute to auto as
   well, so a couple of stray pixels inside the links turned into a real
   horizontal scroll. Pin the axis explicitly and make the rows measure
   their own padding, so nothing pushes past the edge in the first place. */
@media (max-width:781px){
  body .wp-block-navigation__responsive-container.is-menu-open{
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  body .is-menu-open .wp-block-navigation__container,
  body .is-menu-open .wp-block-navigation-item,
  body .is-menu-open .wp-block-navigation-item__content{
    box-sizing:border-box;max-width:100%;
  }
  /* the dialog must stay unclipped vertically or the container has nothing
     to scroll on a short screen; the container's own overflow-x:hidden is
     what stops sideways movement, so the dialog needs no clipping at all */
  body .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog{max-width:100%}
}