/*
Theme Name: KELLA (Twenty Seventeen child)
Theme URI: https://kellaleadership.com
Description: Child theme of Twenty Seventeen implementing the KELLA "V1" design (deep green and gold). Fonts are self-hosted (Inter, Libre Franklin).
Author: VEKT
Template: twentyseventeen
Version: 1.0.4
Text Domain: kella-child
*/

/* ------------------------------------------------------------------
   1. Fonts (self-hosted, variable)
------------------------------------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/libre-franklin-var.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/libre-franklin-italic-var.woff2") format("woff2")}

/* ------------------------------------------------------------------
   2. Design tokens (from the V1 mockup). Change colours here only.
------------------------------------------------------------------- */
:root{
  --k-bg:#14362e;        /* base green */
  --k-bg-deep:#102e27;   /* alternate (darker) sections */
  --k-bg-panel:#1e463d;  /* image panels / header fallback */
  --k-bg-card:#1b4038;   /* cards */
  --k-bg-card-2:#214b41; /* raised cards */
  --k-gold:#e0b667;
  --k-white:#fff;
  --k-soft:#dce9e3;      /* lead text */
  --k-mute:#a9cebe;      /* body text on green */
  --k-faint:#8fb8a7;     /* small caps / meta */
  --k-line:#2b5348;
  --k-line-2:#30594e;
  --k-display:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --k-ui:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --k-pad:80px;
}

/* ------------------------------------------------------------------
   3. Base: neutralise Twenty Seventeen's light/dark scheme
------------------------------------------------------------------- */
html,body,body.colors-light,body.colors-dark,body.colors-custom{background:var(--k-bg);color:var(--k-mute)}
body{font-family:var(--k-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.kella .site,body.kella .site-content-contain,body.kella .site-content{background:var(--k-bg)}
body.kella .site-content{padding:0}
body.kella a{color:var(--k-white);text-decoration:none;box-shadow:none;transition:color .15s}
body.kella a:hover,body.kella a:focus{color:var(--k-gold);box-shadow:none}
body.kella a:focus-visible,body.kella button:focus-visible,body.kella input:focus-visible,body.kella select:focus-visible,body.kella textarea:focus-visible{outline:2px solid var(--k-gold);outline-offset:3px}
body.kella h1,body.kella h2,body.kella h3,body.kella h4{font-family:var(--k-display);font-weight:300;color:var(--k-white);text-transform:none;letter-spacing:0;margin:0}
body.kella p{margin:0 0 1.1em}
body.kella ul,body.kella ol{margin:0;padding:0}
body.kella strong{color:var(--k-white);font-weight:600}
.screen-reader-text:focus{background:#fff;color:#000}

/* Layout reset: Twenty Seventeen floats page content into a right-hand column
   (two-column layout, front page panels). Force a single full-width flow. */
body.kella .site-content-contain,
body.kella .site-content,
body.kella .content-area,
body.kella #primary,
body.kella #main,
body.kella .site-main,
body.kella article.page,
body.kella .panel-content,
body.kella .panel-content .wrap,
body.kella .entry-content{float:none !important;width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box}
body.kella .entry-header{float:none !important;width:100% !important}
body.kella .entry-content > *{max-width:none}
body.kella.twentyseventeen-front-page .panel-content{padding-top:0 !important;padding-bottom:0 !important}
body.kella .entry-content{clear:both}

/* Hide the theme's auto page title: each page has its own hero in content */
body.kella.page .entry-header,
body.kella.page .panel-content .entry-header{display:none}
body.kella.page .entry-content{margin:0;padding:0;max-width:none}
body.kella .panel-content,body.kella .panel-content .wrap{padding:0;margin:0;max-width:none}
body.kella .site-content .wrap{max-width:none;padding:0}
body.kella.page-one-column .panel-content .wrap,
body.kella.page-two-column .panel-content .wrap{max-width:none}
body.kella .entry-content,body.kella .entry-content > *{max-width:none}
body.kella.page:not(.twentyseventeen-front-page) .content-area,
body.kella .content-area{width:100%;float:none;padding:0}
body.kella #primary,body.kella #main{margin:0;padding:0}
body.kella .page .panel-content{border:0}
body.kella .twentyseventeen-front-page .site-content{padding:0}
body.kella.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child){border:0}

/* ------------------------------------------------------------------
   4. Header (Twenty Seventeen header image + logo; nav bar below)
------------------------------------------------------------------- */
body.kella .site-header{background:var(--k-bg-panel);border:0}
body.kella .custom-header,body.kella .custom-header-media{background:var(--k-bg-panel)}
body.kella .site-branding{background:transparent;padding:0}
body.kella .site-branding .wrap{max-width:none;padding:0 var(--k-pad)}
body.kella .custom-logo-link{display:block;padding:0}
body.kella .custom-logo-link img,body.kella .custom-logo{width:auto;height:auto;max-width:min(380px,70vw);max-height:none;display:block}
body.kella .site-branding-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
body.kella .site-branding-text .site-title{margin:0}
body.kella .site-branding .menu-scroll-down{display:none}

/* Home hero text sits beside/under the logo, over the photo */
.k-hero-text{padding:24px 0 56px;max-width:640px}
.k-hero-text .k-hero-line{font-family:var(--k-display);font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.25;color:var(--k-white);margin:0 0 8px}
.k-hero-text .k-hero-sub{font-size:19px;line-height:1.6;color:var(--k-soft);margin:0 0 28px}

/* Navigation bar */
body.kella .navigation-top{background:var(--k-bg);border:0;border-bottom:1px solid var(--k-line);position:relative}
body.kella .navigation-top .wrap{max-width:none;padding:0 var(--k-pad)}
body.kella .main-navigation{display:block}
body.kella .main-navigation ul{background:transparent;display:flex;flex-wrap:wrap;align-items:center;gap:0 36px;margin:0;padding:0}
body.kella .main-navigation li{border:0;margin:0}
body.kella .main-navigation a{font-family:var(--k-ui);font-size:14px;font-weight:600;color:var(--k-white);padding:26px 0;letter-spacing:0;text-transform:none;background:transparent}
body.kella .main-navigation a:hover,
body.kella .main-navigation .current-menu-item > a,
body.kella .main-navigation .current_page_item > a{color:var(--k-gold)}
/* Nav: items left, Login + Apply buttons right (matched by link, so no menu classes are needed) */
body.kella .navigation-top .wrap{padding-left:var(--k-pad) !important;padding-right:var(--k-pad) !important;box-sizing:border-box}
body.kella .main-navigation ul{width:100%;box-sizing:border-box;margin:0;padding:0}
body.kella .main-navigation ul li{margin-left:0 !important}
body.kella .main-navigation ul li:has(> a[href$="/member-login/"]){margin-left:auto !important;margin-right:-20px}
body.kella .main-navigation a[href$="/member-login/"],
body.kella .main-navigation a[href$="/apply/"]{display:inline-block;padding:12px 22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;line-height:1.3}
body.kella .main-navigation a[href$="/apply/"]{background:var(--k-gold) !important;border:1px solid var(--k-gold) !important;color:var(--k-bg) !important}
body.kella .main-navigation a[href$="/apply/"]:hover{background:transparent !important;color:var(--k-gold) !important}
body.kella .main-navigation a[href$="/member-login/"]{background:transparent !important;border:1px solid var(--k-white) !important;color:var(--k-white) !important}
body.kella .main-navigation a[href$="/member-login/"]:hover{border-color:var(--k-gold) !important;color:var(--k-gold) !important}
body.kella .main-navigation ul ul{display:none}
body.kella .menu-toggle{background:transparent;color:var(--k-white);border:0;font-family:var(--k-ui)}
body.kella .menu-toggle:hover,body.kella .menu-toggle:focus{background:transparent;color:var(--k-gold)}
body.kella .navigation-top.site-navigation-fixed{background:var(--k-bg)}

@media (max-width:47.99em){
  body.kella .navigation-top .wrap{padding:0 20px}
  body.kella .main-navigation ul{display:block;background:var(--k-bg)}
  body.kella .main-navigation li{border-top:1px solid var(--k-line)}
  body.kella .main-navigation a{display:block;padding:16px 0}
  body.kella .main-navigation a[href$="/member-login/"],body.kella .main-navigation a[href$="/apply/"]{display:block;margin:16px 0;text-align:center}
  body.kella .main-navigation ul li:has(> a[href$="/member-login/"]){margin-left:0 !important;margin-right:0}
  body.kella .site-branding .wrap{padding:0 20px}
}

/* ------------------------------------------------------------------
   5. Section system
------------------------------------------------------------------- */
.k-sec{padding:128px var(--k-pad);background:var(--k-bg)}
.k-sec.k-deep{background:var(--k-bg-deep)}
.k-sec.k-tight{padding-top:0}
.k-sec.k-compact{padding-top:72px;padding-bottom:72px}
.k-inner{max-width:1280px;margin:0 auto}
.k-row{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:40px 60px;align-items:start}
.k-row > *{min-width:0}
.k-row > .k-main{max-width:760px}
.k-wide{max-width:none}

.k-eyebrow{font-family:var(--k-ui);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--k-gold);margin:0}
.k-h1{font-size:clamp(34px,5vw,56px);line-height:1.15;margin:0 0 20px}
.k-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.25;margin:0 0 24px}
.k-h3{font-family:var(--k-ui);font-size:20px;font-weight:600;line-height:1.35;color:var(--k-white);margin:0 0 10px}
.k-lead{font-size:19px;line-height:1.7;color:var(--k-soft)}
.k-pull{font-family:var(--k-display);font-weight:300;font-style:italic;font-size:clamp(26px,3.2vw,40px);line-height:1.3;color:var(--k-white);margin:0 0 24px}
.k-line-strong{font-family:var(--k-display);font-weight:300;font-size:clamp(24px,2.6vw,30px);line-height:1.35;color:var(--k-white);margin:0 0 18px}
.k-small{font-size:14px;color:var(--k-faint)}

/* Buttons */
.k-btn{display:inline-block;background:var(--k-gold);color:var(--k-bg) !important;font-family:var(--k-ui);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:18px 32px;border:1px solid var(--k-gold);text-decoration:none;cursor:pointer;line-height:1.3;transition:background .15s,color .15s}
.k-btn:hover,.k-btn:focus{background:transparent;color:var(--k-gold) !important}
.k-btn.k-ghost{background:transparent;color:var(--k-gold) !important}
.k-btn.k-ghost:hover,.k-btn.k-ghost:focus{background:var(--k-gold);color:var(--k-bg) !important}
.k-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.k-link{font-size:14px;font-weight:600;color:var(--k-gold) !important}
.k-link:hover{text-decoration:underline}

/* Photo bands & images (drop JPGs in /images; colour block shows until then) */
.k-photo{height:clamp(260px,38vw,520px);background:var(--k-bg-panel) center/cover no-repeat}
.k-photo--dinner{background-image:url("images/photo-dinner.jpg")}
.k-photo--room{background-image:url("images/photo-room.jpg")}
.k-photo--chapters{background-image:url("images/photo-chapters.jpg")}
.k-photo--founding{background-image:url("images/photo-founding.jpg")}
.k-photo--portrait{background-image:url("images/photo-portraits.jpg")}
.k-photo--retreat{background-image:url("images/photo-retreat.jpg")}
.k-photo--flagship{background-image:url("images/photo-flagship.jpg")}
.k-photo--shallow{height:clamp(160px,18vw,260px)}
.k-photo--square{height:auto;aspect-ratio:1/1}
.k-photo--land{height:auto;aspect-ratio:4/3}

/* Card grids */
.k-grid{display:grid;gap:24px}
.k-grid.k-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-grid.k-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-grid.k-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-card{background:var(--k-bg-card);border:1px solid var(--k-line);padding:32px}
.k-card p{margin:0;font-size:16px;line-height:1.6}
.k-card .k-h3{font-size:20px}
.k-tile{border-top:1px solid var(--k-line-2);padding:28px 24px 8px 0}
.k-tile p{font-size:16px;line-height:1.6;margin:0}
.k-tile .k-h3{margin-bottom:8px}

/* Value strip */
.k-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--k-line-2);margin:32px 0}
.k-strip p{margin:0;padding:22px 26px;font-family:var(--k-display);font-weight:300;font-size:22px;color:var(--k-white);border-left:1px solid var(--k-line-2)}
.k-strip p:first-child{border-left:0}

/* Lists */
.k-list{list-style:none;margin:0;padding:0}
.k-list li{padding:22px 0;border-top:1px solid var(--k-line);font-size:16px;line-height:1.6;color:var(--k-mute)}
.k-list li:last-child{border-bottom:1px solid var(--k-line)}
.k-list li strong{display:block;font-family:var(--k-ui);font-size:20px;font-weight:600;margin-bottom:6px}
.k-list.k-inline li strong{display:inline;font-size:inherit}

/* Numbered steps */
.k-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.k-steps.k-steps-2{grid-template-columns:repeat(2,1fr)}
.k-steps li{counter-increment:s;border-top:1px solid var(--k-line-2);padding-top:22px;font-size:16px;line-height:1.6}
.k-steps li::before{content:"0" counter(s);display:block;font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--k-gold);margin-bottom:14px}
.k-steps li strong{display:block;font-size:20px;margin-bottom:6px}

/* Stat */
.k-stat{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin:28px 0}
.k-stat .k-num{font-family:var(--k-display);font-weight:300;font-size:clamp(72px,10vw,120px);line-height:1;color:var(--k-gold)}
.k-stat p{margin:0;max-width:420px;font-size:19px;color:var(--k-soft)}

/* Event / retreat rows (V1 events list) */
.k-event-rows{border-top:1px solid var(--k-line)}
.k-event-row{display:grid;grid-template-columns:200px 1fr 40px;gap:24px;padding:26px 0;border-bottom:1px solid var(--k-line);align-items:center}
.k-event-row .k-meta{font-size:14px;color:var(--k-mute)}
.k-event-row .k-title{font-family:var(--k-display);font-weight:300;font-size:24px;line-height:1.3;color:var(--k-white)}
.k-event-row .k-arrow{color:var(--k-gold);text-align:right}
.k-flag{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-gold);margin-bottom:10px}

/* Chapter / pathway tiles */
.k-chapters{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.k-chapter{display:block;min-width:200px;padding:18px 22px;border:1px solid var(--k-line-2);background:var(--k-bg-card);font-size:18px;font-weight:600}
.k-chapter:hover{border-color:var(--k-gold)}

/* Quote */
.k-quote{border-left:2px solid var(--k-gold);padding:6px 0 6px 28px;margin:0 0 28px}
.k-quote p{font-family:var(--k-display);font-weight:300;font-style:italic;font-size:26px;line-height:1.4;color:var(--k-white);margin:0}

/* Placeholders for dynamic features / content still to come */
.k-placeholder{border:1px dashed var(--k-line-2);padding:28px;color:var(--k-faint);font-size:14px;letter-spacing:.04em;background:rgba(255,255,255,.02)}
.k-placeholder a{color:var(--k-gold) !important}

/* Tables */
.k-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.k-table-wrap:focus-visible{outline:2px solid var(--k-gold)}
.k-table{width:100%;border-collapse:collapse;min-width:560px;font-size:16px}
.k-table caption{text-align:left;padding-bottom:12px;color:var(--k-faint);font-size:14px}
.k-table th,.k-table td{padding:16px 18px;border-bottom:1px solid var(--k-line);text-align:left;vertical-align:top;color:var(--k-mute);background:transparent}
.k-table thead th{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-white);border-bottom:1px solid var(--k-line-2)}
.k-table thead th.k-plus{color:var(--k-gold)}
.k-table td.k-c,.k-table th.k-c{text-align:center;width:120px}
.k-table td.k-yes{color:var(--k-gold);font-size:20px}
.k-table td.k-no{color:var(--k-faint)}
.k-table tbody th{font-weight:400;color:var(--k-soft)}
.k-table .k-col-plus{background:rgba(224,182,103,.05)}

/* Founding price card */
.k-price{display:grid;grid-template-columns:1fr 1fr 1fr}
.k-price > div{padding:26px;border:1px solid var(--k-line-2);margin:0 -1px -1px 0}
.k-price .k-big{font-family:var(--k-display);font-weight:300;font-size:36px;color:var(--k-white);line-height:1.2}
.k-price .k-gold{border-color:var(--k-gold)}
.k-price .k-gold .k-big{color:var(--k-gold)}

/* Anchor mini-nav */
.k-anchors{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px;padding-top:24px;border-top:1px solid var(--k-line)}
.k-anchors a{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-gold) !important}
[id]{scroll-margin-top:72px}

/* FAQ */
.k-faq-group{margin-bottom:72px}
.k-faq-item{padding:28px 0;border-top:1px solid var(--k-line)}
.k-faq-item:last-child{border-bottom:1px solid var(--k-line)}
.k-faq-item h3{font-family:var(--k-ui);font-size:20px;font-weight:600;color:var(--k-white);margin:0 0 10px}
.k-faq-item p,.k-faq-item ol{font-size:16px;line-height:1.7;margin:0 0 .6em}
.k-faq-item ol{padding-left:1.3em}
.k-faq-item li{margin-bottom:6px}
.k-faq-item a.k-inline{color:var(--k-gold) !important;text-decoration:underline}

/* Profiles (founders) */
.k-profile .k-photo{margin-bottom:20px}
.k-profile .k-role{font-size:15px;color:var(--k-soft);margin:0 0 12px}

/* ------------------------------------------------------------------
   6. Forms (enquiry + login)
------------------------------------------------------------------- */
.k-form{max-width:560px}
.k-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--k-soft);margin:0 0 8px}
.k-form .k-field{margin-bottom:24px}
.k-form input[type=text],.k-form input[type=email],.k-form input[type=url],.k-form input[type=password],.k-form textarea{width:100%;background:var(--k-bg);border:1px solid var(--k-line-2);color:var(--k-white);font-family:var(--k-ui);font-size:16px;padding:16px;border-radius:0;box-shadow:none}
.k-form input:focus,.k-form textarea:focus{border-color:var(--k-gold)}
.k-form textarea{min-height:140px}
.k-form .k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.k-form .k-privacy{font-size:14px;color:var(--k-faint);margin:0 0 24px}
.k-form .k-privacy a{color:var(--k-gold) !important;text-decoration:underline}
.k-form button.k-btn{border:1px solid var(--k-gold)}
.k-msg{max-width:560px;padding:18px 22px;margin:0 0 28px;border:1px solid var(--k-line-2);font-size:16px}
.k-msg.k-ok{border-color:var(--k-gold);color:var(--k-white)}
.k-msg.k-err{border-color:#e08a67;color:#fff}

/* Login: split screen */
.k-login{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.k-login .k-login-img{background:var(--k-bg-panel) center/cover no-repeat url("images/photo-login.jpg")}
.k-login .k-login-form{background:var(--k-bg);padding:96px 80px;display:flex;flex-direction:column;justify-content:center}
.k-login .k-login-form > *{max-width:408px}
.k-login hr{border:0;border-top:1px solid var(--k-line);margin:32px 0 24px;max-width:408px}

/* Enquiry chooser */
.k-choice{display:block;padding:32px;background:var(--k-bg-card);border:1px solid var(--k-line)}
.k-choice:hover{border-color:var(--k-gold)}
.k-choice .k-h3{margin-bottom:0}

/* ------------------------------------------------------------------
   7. Footer
------------------------------------------------------------------- */
body.kella .site-footer{background:var(--k-bg);border-top:1px solid var(--k-line);color:var(--k-mute);padding:0}
body.kella .site-footer .wrap{max-width:none;padding:80px var(--k-pad) 48px}
body.kella .site-info{float:none;text-align:left;font-size:13px;color:var(--k-mute);padding:0}
.k-footer{display:grid;grid-template-columns:1fr 2fr;gap:40px 60px;align-items:start}
.k-footer img{width:150px;height:auto;display:block}
.k-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px}
.k-footer ul a{font-size:14px;font-weight:600;color:var(--k-white)}
.k-footer ul li.k-apply a{color:var(--k-gold)}
.k-footer-legal{grid-column:1/-1;border-top:1px solid var(--k-line);padding-top:28px;margin-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
body.kella .site-footer a{color:var(--k-white)}
body.kella .site-footer a:hover{color:var(--k-gold)}
body.kella .site-info a{color:var(--k-mute)}
body.kella .site-info .imprint,body.kella .site-info .sep{display:none}

/* ------------------------------------------------------------------
   8. Responsive
------------------------------------------------------------------- */
@media (max-width:1100px){
  :root{--k-pad:40px}
  .k-sec{padding:96px var(--k-pad)}
  .k-grid.k-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .k-row{grid-template-columns:1fr;gap:20px}
  .k-grid.k-3,.k-grid.k-2{grid-template-columns:1fr}
  .k-login{grid-template-columns:1fr}
  .k-login .k-login-img{min-height:220px}
  .k-login .k-login-form{padding:56px var(--k-pad)}
  .k-event-row{grid-template-columns:1fr 32px}
  .k-event-row .k-meta{grid-column:1/-1}
  .k-price{grid-template-columns:1fr}
  .k-footer{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--k-pad:20px}
  .k-sec{padding:72px var(--k-pad)}
  .k-strip{grid-template-columns:1fr}
  .k-strip p{border-left:0;border-top:1px solid var(--k-line-2)}
  .k-strip p:first-child{border-top:0}
  .k-grid.k-4,.k-steps,.k-steps.k-steps-2{grid-template-columns:1fr}
  .k-btn{display:block;text-align:center}
  .k-actions{display:block}
  .k-actions .k-btn{margin-bottom:12px}
  .k-hero-text{padding-bottom:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
