/* =========================================================
   CRONEX BAU — GLOBAL STYLES
   Clean responsive version for desktop, tablet and mobile
========================================================= */

/* =========================================================
   1. ROOT / GLOBAL VARIABLES
========================================================= */

:root{
  --bg:#090909;
  --bg-soft:#0d0d0f;
  --panel:#141416;
  --panel-strong:#1a1a1d;

  --text:#ffffff;
  --muted:#b8b8b8;
  --muted-soft:#8f8f8f;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);

  --accent:#800020;
  --accent-hover:#8a0528;
  --accent-active:#72001c;
  --accent-light:#9b1233;

  --shadow:0 24px 90px rgba(0,0,0,.45);

  --radius:28px;
  --radius-lg:42px;

  --container:1180px;
  --container-padding:20px;

  --header-height:86px;

  --section-space:120px;
  --section-space-sm:82px;

  --transition:.24s ease;
}


/* =========================================================
   2. RESET / BASE
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;

  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at 20% 0%, rgba(128,0,32,.18), transparent 32rem),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.06), transparent 28rem),
    linear-gradient(180deg,#070707 0%,#0d0d0f 40%,#111113 100%);

  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  opacity:.24;
  pointer-events:none;

  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 1px);

  background-size:4px 4px;
  mix-blend-mode:soft-light;
}

body.nav-open{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  color:inherit;
}

.container{
  width:min(
    var(--container),
    calc(100% - (var(--container-padding) * 2))
  );

  margin-inline:auto;
}


/* =========================================================
   3. HEADER
========================================================= */

.site-header{
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:100;

  height:var(--header-height);

  border-bottom:1px solid transparent;

  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.site-header.is-scrolled{
  background:rgba(25,25,27,.72);

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);

  border-bottom-color:rgba(255,255,255,.14);
  box-shadow:0 16px 60px rgba(0,0,0,.28);
}

.header-inner{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:28px;
}


/* =========================================================
   4. LOGO
========================================================= */

.brand{
  position:relative;
  z-index:103;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
  min-width:0;
}

.brand--plain-logo,
.brand--logo-only{
  width:auto;
  height:auto;

  padding:0;
  border:0;
  border-radius:0;

  background:none;
  box-shadow:none;

  -webkit-backdrop-filter:none;
  backdrop-filter:none;

  overflow:visible;
}

.brand--plain-logo::before,
.brand--plain-logo::after,
.brand--logo-only::before,
.brand--logo-only::after{
  display:none;
}

.brand--plain-logo img,
.brand--logo-only img{
  width:auto;
  height:48px;
  max-width:190px;

  object-fit:contain;

  filter:none;
}


/* =========================================================
   5. DESKTOP NAVIGATION
========================================================= */

.site-nav{
  display:flex;
  align-items:center;

  gap:6px;
  padding:6px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;

  background:rgba(255,255,255,.045);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.site-nav a{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;
  padding:0 16px;

  border-radius:999px;

  color:rgba(255,255,255,.78);

  font-size:.92rem;
  font-weight:700;
  line-height:1;

  transition:
    color .22s ease,
    background .22s ease;
}

.site-nav a:hover,
.site-nav a.is-active{
  color:#fff;
  background:rgba(128,0,32,.42);
}


/* =========================================================
   6. HEADER BUTTON
========================================================= */

.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:10px 18px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.055)
    );

  color:#fff;

  font-size:.9rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;

  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.16);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.nav-button:hover{
  transform:translateY(-2px);

  border-color:rgba(255,255,255,.30);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.19),
      rgba(255,255,255,.08)
    );

  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.22);
}


/* =========================================================
   7. MOBILE NAVIGATION BUTTON
========================================================= */

.nav-toggle{
  position:relative;
  z-index:104;

  display:none;

  width:48px;
  height:48px;
  flex:0 0 48px;

  padding:0;

  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;

  background:rgba(255,255,255,.07);

  cursor:pointer;

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.nav-toggle span{
  display:block;

  width:20px;
  height:2px;

  margin:5px auto;

  border-radius:999px;
  background:#fff;

  transition:
    transform .22s ease,
    opacity .22s ease;
}

body.nav-open .nav-toggle span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2){
  opacity:0;
}

body.nav-open .nav-toggle span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}


/* =========================================================
   8. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
p{
  margin-top:0;
}

h1,
h2,
h3{
  color:var(--text);
  overflow-wrap:anywhere;

  letter-spacing:-.045em;
  line-height:1.04;
}

h1{
  max-width:1050px;
  margin-bottom:26px;

  font-size:clamp(3rem, 5.1vw, 6.3rem);
  font-weight:800;
}

h2{
  margin-bottom:22px;

  font-size:clamp(2.15rem, 3.3vw, 4.25rem);
  font-weight:800;
}

h3{
  margin-bottom:14px;

  font-size:clamp(1.25rem, 1.7vw, 1.7rem);
  font-weight:750;
  line-height:1.14;
  letter-spacing:-.035em;
}

p{
  margin-bottom:1rem;

  color:var(--muted);

  font-size:1.02rem;
  line-height:1.72;
}

.lead{
  max-width:760px;
  margin-inline:auto;

  color:rgba(255,255,255,.78);

  font-size:clamp(1.05rem, 1.45vw, 1.15rem);
  line-height:1.65;
}

.kicker{
  display:inline-flex;
  align-items:center;

  gap:10px;
  margin-bottom:18px;

  color:rgba(255,255,255,.78);

  font-size:.78rem;
  font-weight:900;
  line-height:1.3;

  text-transform:uppercase;
  letter-spacing:.24em;
}

.kicker::before{
  content:"";

  width:36px;
  height:1px;
  flex:0 0 36px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      rgba(255,255,255,.36)
    );
}


/* =========================================================
   9. BUTTONS
========================================================= */

.btn-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:14px;
  margin-top:34px;
}

.btn{
  position:relative;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;
  padding:0 23px;

  border:1px solid transparent;
  border-radius:999px;

  font-size:.96rem;
  font-weight:850;
  line-height:1.15;
  text-align:center;
  letter-spacing:-.01em;

  overflow:hidden;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.btn::after{
  content:"";

  position:absolute;
  inset:1px;
  z-index:-1;

  border-radius:inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      transparent 48%
    );

  opacity:.75;
  pointer-events:none;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-primary{
  color:#fff;
  background:var(--accent);

  border-color:rgba(255,255,255,.14);

  box-shadow:
    0 16px 42px rgba(128,0,32,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.btn-primary::after{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      transparent 52%
    );

  opacity:.45;
}

.btn-primary:hover{
  background:var(--accent-hover);
  border-color:rgba(255,255,255,.18);

  box-shadow:
    0 20px 54px rgba(128,0,32,.40),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.btn-primary:active{
  transform:translateY(-1px);

  background:var(--accent-active);

  box-shadow:
    0 10px 28px rgba(128,0,32,.30),
    inset 0 1px 0 rgba(0,0,0,.18);
}

.btn-ghost{
  color:#fff;

  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.16);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
}

.text-link{
  display:inline-flex;
  align-items:center;

  gap:10px;
  margin-top:10px;

  color:#fff;

  font-weight:900;
}

.text-link::after{
  content:"";

  width:34px;
  height:1px;

  background:var(--accent-light);

  transition:width .22s ease;
}

.text-link:hover::after{
  width:54px;
}

/* =========================================================
   10. HERO
========================================================= */

.hero{
  position:relative;
  min-height:100svh;

  display:grid;
  place-items:center;

  padding:
    calc(var(--header-height) + 44px)
    0
    84px;

  overflow:hidden;
}

.page-hero{
  min-height:82svh;
}

/* ---------- Background ---------- */

.hero__media,
.hero__shade,
.hero__grain{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero__media{
  z-index:-4;

  background:linear-gradient(135deg, rgb(30 30 30 / 49%), #00000033 40%
40%
), linear-gradient(180deg, rgba(55, 2, 20, .14), rgba(0, 0, 0, .05)), var(--hero-image), linear-gradient(135deg, #1a1a1d, #050505);

  background-size:cover;
  background-position:center;

  transform:scale(1.03);
}

.hero__shade{
  z-index:-3;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(0,0,0,.12),
      transparent 52%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.74),
      transparent 34%,
      transparent 66%,
      rgba(0,0,0,.74)
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.06),
      transparent 26%,
      rgba(9,9,9,.98) 100%
    );
}

.hero__grain{
  z-index:-2;

  opacity:.22;

  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.10) 0 1px,
      transparent 1px
    );

  background-size:3px 3px;
  mix-blend-mode:soft-light;
}

/* ---------- Content ---------- */

.hero__content{
  position:relative;
  z-index:2;

  width:100%;
}

.hero__content--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ограничиваем ширину текста */

.hero__content--center h1{
  width:100%;
  max-width:1050px;
  margin-inline:auto;
}

.hero__content--center > p:not(.kicker){
  width:100%;
  max-width:760px;
  margin-inline:auto;
}

.hero__content--center .lead{
  width:100%;
  max-width:760px;
  margin-inline:auto;
}

.hero__content--center .kicker{
  justify-content:center;
}

/* ---------- Hero Tags ---------- */

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:10px;
  margin-top:34px;
}

.hero-tags span,
.pill-row span{
  display:inline-flex;
  align-items:center;

  min-height:34px;
  padding:0 13px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;

  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);

  font-size:.84rem;
  font-weight:800;

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* ---------- Scroll Indicator ---------- */

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:30px;

  width:36px;
  height:58px;

  display:grid;
  place-items:start center;

  padding-top:10px;

  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;

  opacity:.76;

  transform:translateX(-50%);
}

.scroll-cue span{
  width:5px;
  height:5px;

  border-radius:50%;
  background:#fff;

  animation:scrollCue 1.6s ease-in-out infinite;
}

@keyframes scrollCue{
  0%{
    transform:translateY(0);
    opacity:.2;
  }

  45%{
    opacity:1;
  }

  100%{
    transform:translateY(22px);
    opacity:0;
  }
}
/* =========================================================
   11. SECTIONS
========================================================= */

.section{
  position:relative;
  padding:var(--section-space) 0;
}

.section-sm{
  position:relative;
  padding:var(--section-space-sm) 0;
}

.section-head{
  max-width:860px;
  margin-bottom:54px;
}

.section-head p:last-child{
  max-width:760px;
}

.center-action{
  display:flex;
  justify-content:center;

  margin-top:42px;
}


/* =========================================================
   12. FINAL CTA
========================================================= */

.final-cta{
  position:relative;
  isolation:isolate;

  min-height:620px;

  display:grid;
  place-items:center;

  overflow:hidden;
}

.final-cta__bg{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      180deg,
      rgba(9,9,9,.95),
      rgba(9,9,9,.38),
      rgba(9,9,9,.96)
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.80),
      rgba(0,0,0,.22),
      rgba(0,0,0,.80)
    ),
    var(--cta-image),
    linear-gradient(135deg,#1a1a1d,#050505);

  background-size:cover;
  background-position:center;

  transform:scale(1.03);
}

.final-cta::after{
  content:"";

  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;

  height:45%;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--bg)
    );
}

.final-cta__content{
  max-width:820px;
  text-align:center;
}

.final-cta__content .kicker{
  justify-content:center;
}


/* =========================================================
   13. COMPACT CTA
========================================================= */

.compact-cta{
  padding-top:80px;
}

.compact-cta__inner{
  position:relative;

  padding:52px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(128,0,32,.28),
      transparent 36rem
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );

  box-shadow:var(--shadow);

  overflow:hidden;
}

.compact-cta__inner h2{
  max-width:850px;
}

.compact-cta__inner p{
  max-width:720px;
}


/* =========================================================
   14. CHECK LIST
========================================================= */

.check-list{
  display:grid;

  gap:12px;
  margin:0;
  padding:0;

  list-style:none;
}

.check-list li{
  position:relative;

  padding:14px 16px 14px 42px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;

  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.045);

  font-weight:800;
  line-height:1.5;
}

.check-list li::before{
  content:"";

  position:absolute;
  top:50%;
  left:17px;

  width:9px;
  height:9px;

  border-radius:50%;

  background:var(--accent-light);
  box-shadow:0 0 0 6px rgba(128,0,32,.18);

  transform:translateY(-50%);
}


/* =========================================================
   15. FOOTER
========================================================= */

.site-footer{
  padding:76px 0 26px;

  border-top:1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(128,0,32,.15),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      rgba(11,11,12,.92),
      #070707
    );
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;

  gap:44px;
}

.footer-brand p{
  max-width:420px;
  margin-top:22px;

  color:var(--muted-soft);
}

.footer-col{
  display:flex;
  flex-direction:column;

  gap:11px;
}

.footer-col h3{
  margin-bottom:10px;

  font-size:1rem;
  line-height:1.3;
  letter-spacing:0;
}

.footer-col a{
  color:var(--muted-soft);
  font-weight:500;
font-size: 13px;
  transition:color .2s ease;
}

.footer-col a:hover{
  color:#fff;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;

  gap:20px;
  margin-top:56px;
  padding-top:24px;

  border-top:1px solid rgba(255,255,255,.08);

  color:var(--muted-soft);

  font-size:.8rem;
  line-height:1.5;
}


/* =========================================================
   16. REVEAL
========================================================= */

.reveal{
  opacity:0;
  transform:translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   17. LARGE TABLET / SMALL LAPTOP
   up to 1100px
========================================================= */

@media (max-width:1100px){

  :root{
    --container-padding:24px;
    --section-space:104px;
    --section-space-sm:74px;
  }

  .header-inner{
    gap:18px;
  }

  .brand--plain-logo img,
  .brand--logo-only img{
    height:44px;
    max-width:175px;
  }

  .site-nav a{
    padding-inline:13px;
    font-size:.88rem;
  }

  .nav-button{
    min-height:42px;
    padding-inline:15px;
    font-size:.86rem;
  }

  h1{
    font-size:clamp(2.9rem, 6.2vw, 5.3rem);
  }

  h2{
    font-size:clamp(2rem, 4.4vw, 3.8rem);
  }
}


/* =========================================================
   18. TABLET / MOBILE NAVIGATION
   up to 980px
========================================================= */

@media (max-width:980px){

  :root{
    --header-height:76px;
    --container-padding:18px;
    --section-space:88px;
    --section-space-sm:64px;
  }

  .nav-toggle{
    display:block;
  }

  .site-nav{
    position:fixed;
    top:12px;
    right:12px;
    left:12px;
    z-index:101;

    display:grid;
    align-content:start;

    gap:6px;
    padding:80px 14px 16px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:26px;

    background:rgba(10,10,12,.96);

    box-shadow:0 24px 90px rgba(0,0,0,.50);

    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);

    opacity:0;
    pointer-events:none;

    transform:translateY(-125%);

    transition:
      transform .28s ease,
      opacity .28s ease;
  }

  body.nav-open .site-nav{
    opacity:1;
    pointer-events:auto;

    transform:translateY(0);
  }

  .site-nav a{
    width:100%;
    min-height:48px;

    justify-content:center;

    padding:0 16px;

    font-size:.98rem;
  }

  .site-nav .nav-button,
  .site-nav a.nav-button{
    min-height:48px;
    margin-top:4px;
  }

  .header-inner > .nav-button{
    display:none;
  }

  .brand--plain-logo img,
  .brand--logo-only img{
    height:40px;
    max-width:165px;
  }

  h1{
    font-size:clamp(2.75rem, 7.5vw, 4.5rem);
    line-height:1.03;
  }

  h2{
    font-size:clamp(2rem, 5.4vw, 3.25rem);
    line-height:1.08;
  }

  h3{
    font-size:clamp(1.2rem, 2.5vw, 1.55rem);
  }

  .hero{
    min-height:92svh;

    padding:
      calc(var(--header-height) + 36px)
      0
      74px;
  }

  .page-hero{
    min-height:74svh;
  }

  .hero__shade{
    background:
      radial-gradient(
        circle at 50% 42%,
        rgba(0,0,0,.10),
        transparent 48%
      ),
      linear-gradient(
        90deg,
        rgba(0,0,0,.60),
        rgba(0,0,0,.14) 50%,
        rgba(0,0,0,.60)
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.10),
        transparent 22%,
        rgba(9,9,9,.98) 100%
      );
  }

  .final-cta{
    min-height:540px;
  }

  .compact-cta__inner{
    padding:44px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   19. SMALL TABLET / LARGE PHONE
   up to 760px
========================================================= */

@media (max-width:760px){

  :root{
    --container-padding:16px;
    --section-space:76px;
    --section-space-sm:56px;
  }

  h1{
    margin-bottom:20px;

    font-size:clamp(2.35rem, 8.8vw, 3.45rem);
    line-height:1.06;
    letter-spacing:-.04em;
  }

  h2{
    margin-bottom:18px;

    font-size:clamp(1.85rem, 7vw, 2.75rem);
    line-height:1.1;
    letter-spacing:-.04em;
  }

  h3{
    font-size:1.3rem;
  }

  p{
    font-size:.98rem;
    line-height:1.68;
  }

  .lead{
    font-size:1.02rem;
    line-height:1.62;
  }

  .kicker{
    margin-bottom:14px;

    font-size:.72rem;
    letter-spacing:.19em;
  }

  .kicker::before{
    width:28px;
    flex-basis:28px;
  }

  .btn-row{
    gap:10px;
    margin-top:28px;
  }

  .btn{
    min-height:48px;
    padding:0 20px;

    font-size:.92rem;
  }

  .hero{
    min-height:88svh;

    padding:
      calc(var(--header-height) + 28px)
      0
      64px;
  }

  .page-hero{
    min-height:80svh;
	padding: 20px;
  }

  .hero-tags{
    gap:8px;
    margin-top:26px;
  }

  .hero-tags span,
  .pill-row span{
    min-height:32px;
    padding-inline:11px;

    font-size:.78rem;
  }

  .scroll-cue{
    display:none;
  }

  .section-head{
    margin-bottom:38px;
  }

  .center-action{
    margin-top:32px;
  }

  .final-cta{
    min-height:500px;
  }

  .compact-cta{
    padding-top:56px;
  }

  .compact-cta__inner{
    padding:36px 28px;
    border-radius:30px;
  }

  .site-footer{
    padding-top:60px;
  }

  .footer-grid{
    gap:34px;
  }
}


/* =========================================================
   20. MOBILE
   up to 620px
========================================================= */

@media (max-width:620px){

  :root{
    --header-height:70px;
    --container-padding:14px;
    --section-space:68px;
    --section-space-sm:50px;
  }

  .header-inner{
    gap:12px;
  }

  .brand--plain-logo img,
  .brand--logo-only img{
    height:36px;
    max-width:148px;
  }

  .nav-toggle{
    width:44px;
    height:44px;
    flex-basis:44px;

    border-radius:14px;
  }

  .site-nav{
    top:8px;
    right:8px;
    left:8px;

    padding:72px 12px 12px;

    border-radius:22px;
  }

  .site-nav a{
    min-height:46px;

    font-size:.95rem;
  }

  h1{
    font-size:clamp(2.15rem, 10.8vw, 2.9rem);
    line-height:1.08;
  }

  h2{
    font-size:clamp(1.75rem, 8.3vw, 2.35rem);
    line-height:1.12;
  }

  h3{
    font-size:1.22rem;
  }

  p{
    font-size:.86rem;
    line-height:1.65;
  }

  .lead{
    font-size:1rem;
    line-height:1.6;
  }

  .btn-row{
    width:100%;
  }

  .btn{
    width:100%;
    min-height:47px;

    padding:0 18px;

    font-size:.91rem;
  }

  .hero{
    min-height:84svh;

    padding:
      calc(var(--header-height) + 24px)
      0
      54px;
  }

  .page-hero{
    min-height:66svh;
  }

  .hero__content--center{
    width:100%;
	padding:15px;
  }

  .hero__media{
    background-position:center;
    transform:scale(1.01);
  }

  .hero__shade{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.34) 0%,
        rgba(0,0,0,.24) 28%,
        rgba(9,9,9,.96) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0,0,0,.38),
        rgba(0,0,0,.06),
        rgba(0,0,0,.38)
      );
  }

  .hero-tags{
    width:100%;
  }

  .compact-cta__inner{
    padding:30px 22px;
    border-radius:26px;
  }

  .check-list li{
    padding:13px 14px 13px 38px;

    border-radius:15px;

    font-size:.92rem;
  }

  .check-list li::before{
    left:15px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .footer-bottom{
    flex-direction:column;

    gap:10px;
    margin-top:40px;
  }
}


/* =========================================================
   21. SMALL MOBILE
   up to 420px
========================================================= */

@media (max-width:420px){

  :root{
    --container-padding:12px;
  }

  .brand--plain-logo img,
  .brand--logo-only img{
    height:32px;
    max-width:132px;
  }

  .nav-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  h1{
    font-size:clamp(2rem, 11.5vw, 2.55rem);
  }

  h2{
    font-size:clamp(1.65rem, 9vw, 2.1rem);
  }

  .kicker{
    font-size:.68rem;
    letter-spacing:.16em;
  }

  .btn{
    min-height:46px;

    font-size:.89rem;
  }

  .hero{
    min-height:82svh;
  }

  .compact-cta__inner{
    padding:26px 18px;
    border-radius:22px;
  }

  .final-cta{
    min-height:460px;
  }
}


/* =========================================================
   22. TOUCH DEVICES
========================================================= */

@media (hover:none){

  .btn:hover,
  .nav-button:hover{
    transform:none;
  }

  .text-link:hover::after{
    width:34px;
  }
}


/* =========================================================
   23. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}