/* Mind & Move Masters Berlin — high-class single-page site (no external dependencies) */

:root{
  /* Base */
  --bg: #0b1016;
  --panel: rgba(255,255,255,.10);
  --panel2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.76);
  --line: rgba(255,255,255,.14);

  /* Friendlier, warmer accents (inspired by mm02/mm04) */
  --accent: #2dd4bf;   /* teal */
  --accent2: #fbbf24;  /* warm amber */
  --accent3: #60a5fa;  /* soft blue */

  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;

  --container: 1160px;
  --hero-left-edge: max(24px, calc((100vw - var(--container)) / 2));
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 14% 10%, rgba(45,212,191,.28), transparent 58%),
    radial-gradient(900px 650px at 85% 14%, rgba(96,165,250,.24), transparent 60%),
    radial-gradient(1100px 820px at 45% 108%, rgba(251,191,36,.20), transparent 72%),
    var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
  isolation:isolate;
}

a{color:inherit}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid rgba(96,165,250,.85);
  outline-offset: 3px;
}

body::before{
  content:"";
  position:fixed;
  inset:-2px;
  background:
    radial-gradient(1200px 760px at 12% 8%, rgba(45,212,191,.24), transparent 60%),
    radial-gradient(1100px 760px at 88% 12%, rgba(96,165,250,.20), transparent 62%),
    radial-gradient(1200px 860px at 50% 112%, rgba(251,191,36,.18), transparent 72%);
  opacity:.55;
  filter: saturate(1.08) contrast(1.04);
  pointer-events:none;
  z-index:-1;
}
.skip{
  position:absolute; left:-999px; top:8px;
  background:#fff; color:#000; padding:10px 12px; border-radius:12px; z-index:9999;
}
.skip:focus{left:10px}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: none;
  background: #0b1016 image-set(
      url("../img/header-bg.webp") type("image/webp") 1x,
      url("../img/header-bg@2x.webp") type("image/webp") 2x,
      url("../img/header-bg.png") type("image/png") 1x,
      url("../img/header-bg@2x.png") type("image/png") 2x
    ) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.topbar__inner{
  height:126px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:16px; user-select:none}
.brand__logo{height:110px; width:auto; display:block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));}
.topbar .brand{
  height:100%;
  display:flex;
  align-items:center;
}
.topbar .brand__name,
.topbar .nav,
.topbar .navbtn{
  align-self:center;
}
.topbar .brand__name{
  justify-content:center;
}
.topbar .brand__logo{
  height:96px;
  max-height:96px;
  align-self:center;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.brand--small .brand__logo{height:44px}
.brand__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(34,211,182,.24), rgba(110,231,255,.18));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  font-weight:800;
}
.brand__name{display:flex; flex-direction:column; line-height:1.05}
.brand__name strong{font-size:1.14rem; letter-spacing:.2px}
.brand__name span{font-size:.86rem; color:var(--muted)}
.brand--small .brand__mark{width:34px;height:34px;border-radius:12px}
.brand--small strong{font-size:.98rem}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(11,15,20,.22);
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  padding:11px 14px;
  border-radius:12px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav a:hover{background: rgba(255,255,255,.06); color:var(--text); transform: translateY(-1px);}
.nav a.is-active{color:var(--text); background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(96,165,250,.20)); border: 1px solid rgba(255,255,255,.16);}
.nav__cta{
  color:var(--text) !important;
  background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(251,191,36,.12));
  border: 1px solid rgba(255,255,255,.14);
}
.navbtn{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  width:48px; height:44px;
  padding:0;
  cursor:pointer;
}
.navbtn span{
  display:block;
  height:2px; width:18px;
  margin:4px auto;
  background: rgba(255,255,255,.8);
  border-radius:2px;
}

.hero{
  position:relative;
  padding: 92px 0 64px;
  min-height: 68vh;
  overflow: hidden;
}
.hero > .container{position:relative;}

.bg-grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 15%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 50%, transparent 72%);
  opacity:.26;
  pointer-events:none;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 30px;
  align-items: start;
}
.hero__inner--single{grid-template-columns: 1fr}
.hero__content{
  margin-top: clamp(88px, 15vh, 210px);
  width: min(100%, 620px);
  margin-left: 0;
  margin-right: auto;
  padding: 22px 22px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.eyebrow{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-weight:650;
  letter-spacing:.2px;
  margin: 0 0 14px;
}
h1{
  font-size: clamp(2.0rem, 3.2vw, 3.1rem);
  line-height: 1.06;
  margin: 0 0 16px;
}
.lead{
  font-size: 1.06rem;
  color: rgba(255,255,255,.80);
  margin: 0 0 22px;
  max-width: 56ch;
}
.muted{color:var(--muted)}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.32)}
.btn--primary{
  background: linear-gradient(135deg, rgba(45,212,191,.46), rgba(96,165,250,.34), rgba(251,191,36,.28));
}
.btn--ghost{background: rgba(255,255,255,.04)}
.btn:active{transform: translateY(0)}
.hero__highlights{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.74);
  font-weight:650;
  font-size:.92rem;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(140deg, rgba(45,212,191,.08), rgba(96,165,250,.08), rgba(251,191,36,.07));
  box-shadow: var(--shadow);
  padding: 22px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(140deg, rgba(45,212,191,.14), rgba(96,165,250,.12), rgba(251,191,36,.10));
}
.card.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  backdrop-filter: blur(14px);
}
.card h2{margin:0 0 10px; font-size:1.2rem}
.card h3{margin:0 0 10px; font-size:1.1rem}
.big{font-size:1.2rem; margin:0 0 10px}
.small{font-size:.92rem}
.quote{
  margin: 0;
  padding: 14px 14px;
  border-left: 3px solid rgba(251,191,36,.75);
  background: rgba(251,191,36,.08);
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  font-weight:650;
}
.divider{height:1px; background: rgba(255,255,255,.12); margin:14px 0}

.section{padding: 60px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.section__head{max-width:72ch; margin-bottom:22px}
.section__head h2{margin:0 0 10px; font-size: 1.6rem}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}

.badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.78);
  font-weight:750;
  font-size:.86rem;
  margin-bottom:10px;
}
.list{margin:0; padding-left:18px; color: rgba(255,255,255,.80)}
.list li{margin: 8px 0}

.callout{
  margin-top: 18px;
  display:flex; gap:14px; align-items:flex-start;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(45,212,191,.10), rgba(251,191,36,.06));
  padding: 18px 18px;
}
.callout__icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:900;
}

.cta-band{
  margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 18px 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(96,165,250,.16), rgba(251,191,36,.16));
}
.cta-band__actions{display:flex; gap:12px; flex-wrap:wrap}

.person__avatar{
  width:54px; height:54px;
  border-radius: 18px;
  display:grid; place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(34,211,182,.22), rgba(110,231,255,.10));
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom:12px;
}

.contact{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
}
.link{text-decoration:none; border-bottom:1px solid rgba(34,211,182,.55)}
.link:hover{border-bottom-color: rgba(110,231,255,.65)}
.form label{display:block; margin: 12px 0}
.form span{display:block; font-weight:700; color: rgba(255,255,255,.78); margin-bottom:6px}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus, select:focus{border-color: rgba(110,231,255,.45); box-shadow: 0 0 0 4px rgba(110,231,255,.12)}
textarea{resize: vertical}

select{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%), linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 4px), calc(100% - 13px) calc(1em + 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.footer{
  padding: 26px 0 40px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(45,212,191,.18), rgba(96,165,250,.16), rgba(251,191,36,.14));
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.footer .brand{gap:10px}
.footer .brand--small .brand__logo{height:38px}
.footer__links{display:flex; gap:14px}
.footer__links a{
  text-decoration:none; color: var(--muted); font-weight:700;
  padding: 10px 10px; border-radius: 12px;
}
.footer__links a:hover{background: rgba(255,255,255,.06); color: var(--text)}

/* Utility helpers */
.u-actions-top{margin:14px 0 0}
.u-mt-12{margin-top:12px}
.u-mt-16{margin-top:16px}
.u-mt-22{margin-top:22px}
.u-max-880{max-width:880px}
.u-mb-10{margin:0 0 10px}
.u-mb-0{margin:0}

/* Mobile drawer */
.drawer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:60;
}
.drawer.is-open{opacity:1; pointer-events:auto}
.drawer__panel{
  position:absolute;
  right:12px;
  top:12px;
  left:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,15,20,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  padding:14px;
}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 6px 10px}
.drawer__title{font-weight:900; letter-spacing:.2px}
.drawer__close{border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:rgba(255,255,255,.92); border-radius:14px; width:42px; height:40px; cursor:pointer}
.drawer__links{display:grid; gap:8px; padding: 6px}
.drawer__links a{padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); text-decoration:none; color:rgba(255,255,255,.86); font-weight:800}
.drawer__links a.is-active{border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.12)}

/* Back to top */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(45,212,191,.36), rgba(96,165,250,.34));
  color: rgba(255,255,255,.98);
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 30px rgba(0,0,0,.36);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 58;
}
.to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover{transform: translateY(-1px)}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .65s ease, transform .65s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; gap:16px}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .nav{display:none}
  .navbtn{display:block}
  .topbar__inner{height:108px}
  .brand__logo{height:86px}
  .topbar .brand__logo{height:76px; max-height:76px}
}

@media (max-width: 520px){
  .container{width: calc(100% - 32px)}
  .card{padding:18px}
  .hero{padding-top: 54px}
}



/* --- Presentation imagery integration --- */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: image-set(
    url("../img/hero-training-1600.webp") type("image/webp"),
    url("../img/hero-training-1600.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .74;
  filter: saturate(1.28) contrast(1.20) brightness(1.10);
  transform: none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(34,211,182,.16), transparent 55%),
    linear-gradient(to bottom, rgba(11,15,20,.12), rgba(11,15,20,.24) 55%, rgba(11,15,20,.34));
  pointer-events:none;
}
.bg-grid{ z-index: 1; }
.hero__inner{ position:relative; z-index: 2; }

.card__media{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--line);
  margin: -4px -4px 14px;
  height: 176px;
  background: rgba(0,0,0,.15);
}
.card__media picture,
.card__media img{
  width:100%;
  height:100%;
}
.card__media img{
  display:block;
  object-fit: cover;
  object-position: center;
}
.card__iconimg{
  display:block;
  height: 56px;
  width:auto;
  margin-bottom: 10px;
  opacity: .92;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.logo-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.logo-row__img{
  height: 40px;
  width:auto;
  display:block;
  opacity: .95;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

@media (max-width: 640px){
  .card__media{ height: 160px; }
  .logo-row__img{ height: 36px; }
}


/* Subpage hero */
.page-hero{
  position:relative;
  padding: 92px 0 64px;
  min-height: 68vh;
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(13,17,24,.16), rgba(13,17,24,.42)),
    radial-gradient(900px 520px at 12% 8%, rgba(45,212,191,.28), transparent 60%),
    radial-gradient(840px 520px at 86% 14%, rgba(96,165,250,.22), transparent 62%);
  opacity:1;
  filter: saturate(1.12) contrast(1.08) brightness(1.02);
  pointer-events:none;
}

body.page-konzept .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-konzept.png") center/cover no-repeat;
}

body.page-mentaltraining .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-mentaltraining.png") center/cover no-repeat;
}

body.page-mindpower .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-mind-power.png") center/cover no-repeat;
}

body.page-performance-day .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-performence day.png") center/cover no-repeat;
}

body.page-team .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-team.png") center/cover no-repeat;
}

body.page-kontakt .page-hero::before{
  background:
    linear-gradient(to bottom, rgba(13,17,24,.24), rgba(13,17,24,.52)),
    url("../img/mm-kontakt.png") center/cover no-repeat;
}

body.page-impressum .section:first-of-type{
  position:relative;
  min-height: 68vh;
  overflow: hidden;
}
body.page-impressum .section:first-of-type::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(13,17,24,.22), rgba(13,17,24,.54)),
    url("../img/mm-impressum.png") center/cover no-repeat;
  opacity:.8;
  pointer-events:none;
}
body.page-impressum .section:first-of-type > .container{position:relative; z-index:1}

body.page-datenschutz .section:first-of-type{
  position:relative;
  min-height: 68vh;
  overflow: hidden;
}
body.page-datenschutz .section:first-of-type::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(13,17,24,.22), rgba(13,17,24,.54)),
    url("../img/mm-datenschutz.png") center/cover no-repeat;
  opacity:.8;
  pointer-events:none;
}
body.page-datenschutz .section:first-of-type > .container{position:relative; z-index:1}
.page-hero > .container{position:relative;}
.page-hero > .container{
  margin-top: clamp(88px, 15vh, 210px);
  width: min(620px, calc(100% - 48px));
  margin-left: var(--hero-left-edge);
  margin-right: auto;
  padding: 22px 22px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.breadcrumbs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color: rgba(255,255,255,.70);
  font-weight:700;
  font-size:.95rem;
}
.breadcrumbs a{text-decoration:none; color: rgba(255,255,255,.78)}
.breadcrumbs a:hover{color: rgba(255,255,255,.94)}
.breadcrumbs .sep{opacity:.55}
.page-hero h1{margin-top:0}
.page-hero .lead{max-width: 56ch}

@media (max-width: 640px){
  .hero,
  .page-hero,
  body.page-impressum .section:first-of-type,
  body.page-datenschutz .section:first-of-type{
    min-height: auto;
    padding: 0 0 36px;
  }

  .hero::before,
  .page-hero::before,
  body.page-impressum .section:first-of-type::before,
  body.page-datenschutz .section:first-of-type::before{
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: 240px;
    background-position: center;
    background-size: cover;
  }

  .hero::after{display:none}
  .hero .bg-grid{display:none}

  .hero__content,
  .page-hero > .container,
  body.page-impressum .section:first-of-type > .container,
  body.page-datenschutz .section:first-of-type > .container{
    margin-top: 14px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 32px);
    padding: 16px 16px 14px;
  }

  .hero__content{width: 100%}

  .hero__actions .btn{width:100%}
  .cta-band__actions{width:100%}
  .cta-band__actions .btn{flex:1; min-width:0}
}