:root{
  --black:#080808;
  --black2:#111;
  --paper:#f8f5ef;
  --yellow:#ffcb57;
  --bg:#080808;
  --font-heading:"Poppins",Arial,sans-serif;
  --font-body:"Poppins",Arial,sans-serif;
  --font-script:"Biro Script Plus","Biro Script","Segoe Print","Bradley Hand ITC","Comic Sans MS",cursive;
  --card-texture:url("../images/paper-texture.jpg");
  --card-opacity:.965;
  --canvas-alpha:1;
  --dot-alpha:.55;
  --line-alpha:.16;
}

body.theme-day{
  --bg:#f5f2ec;
  --paper:#fbf7ef;
  --yellow:#ffcb57;
  --card-opacity:.985;
  --dot-alpha:.34;
  --line-alpha:.07;
}
body.theme-sunset{
  --bg:#17120d;
  --paper:#f8f1e4;
  --yellow:#ffcb57;
  --card-opacity:.965;
  --dot-alpha:.48;
  --line-alpha:.12;
}
body.theme-night{
  --bg:#080808;
  --paper:#f8f5ef;
  --yellow:#ffcb57;
  --card-opacity:.955;
  --dot-alpha:.72;
  --line-alpha:.22;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  transition:background .8s ease;
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:#111;
  overflow-x:hidden;
}
body.intro-lock{
  overflow:hidden;
}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5,h6,
.step-label,
.btn,
.social-follow > p{
  font-family:var(--font-heading);
}

#dotsCanvas{
  position:fixed;
  inset:0;
  z-index:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  background:var(--bg);
}

.stage{
  position:relative;
  z-index:2;
  height:820vh;
}
.viewport{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.track{
  height:100%;
  width:980vw;
  display:flex;
  align-items:center;
  gap:4.2vw;
  padding-left:7vw;
  will-change:transform;
  overflow:visible;
}
.card{
  width:82vw;
  height:76vh;
  min-width:840px;
  border-radius:38px;
  padding:clamp(34px,3.7vw,64px);
  position:relative;
  isolation:isolate;
  overflow:visible;
  display:grid;
  grid-template-columns:1.1fr .72fr;
  gap:36px;
  align-items:end;
  transform:
    translateY(calc(var(--y,0px) + var(--lift, 0px)))
    rotate(var(--r,0deg))
    scale(var(--scale, .965));
  background-color:color-mix(in srgb, var(--paper) calc(var(--card-opacity) * 100%), transparent);
  background-image:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)),
    var(--card-texture),
    radial-gradient(rgba(0,0,0,.042) .8px, transparent .8px),
    linear-gradient(105deg, rgba(255,255,255,.65), rgba(0,0,0,.038));
  background-size:100% 100%, cover, 7px 7px, 100% 100%;
  background-position:center, center, 0 0, center;
  background-repeat:no-repeat, no-repeat, repeat, no-repeat;
  border:2px solid rgba(0,0,0,.88);
  box-shadow:
    0 44px 100px rgba(0,0,0,.28),
    0 6px 14px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 1px,
      transparent 8px
    );
  opacity:.58;
}
.card>*{position:relative;z-index:2}
.card:nth-child(2n){--y:76px}
.card:nth-child(3n){--y:-40px}

.hero-card,
.cta-card{
  grid-template-columns:1fr;
  color:#fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,203,87,.18), transparent 20%),
    linear-gradient(rgba(8,8,8,.76), rgba(8,8,8,.76)),
    var(--card-texture),
    rgba(8,8,8,.78);
  background-size:100% 100%, 100% 100%, cover, 100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 48px 120px rgba(0,0,0,.58);
}
.hero-card:before,
.cta-card:before{
  background:
    radial-gradient(rgba(255,203,87,.16) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.28;
}
.logo-mark{
  position:absolute;
  top:clamp(34px,4vw,72px);
  left:clamp(34px,4vw,72px);
  width:clamp(150px,16vw,260px);
  height:auto;
  display:block;
  color:#fff;
}
.logo-mark img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
h1,h2{margin:0}
.hero-card h1,
.cta-card h2{
  max-width:1060px;
  font-size:clamp(50px,6.9vw,112px);
  line-height:.88;
  letter-spacing:-.08em;
}
.hero-card p,
.cta-card p{
  max-width:790px;
  margin:34px 0 0;
  color:#e7e7e7;
  font-size:clamp(22px,2.05vw,31px);
  line-height:1.42;
}
.marker{
  position:relative;
  display:inline;
  color:inherit;
  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.24);
  background:
    linear-gradient(
      180deg,
      transparent 68%,
      rgba(255,203,87,.52) 68%,
      rgba(255,203,87,.52) 90%,
      transparent 90%
    );
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .04em;
}
.tag{
  display:inline-block;
  background:
    linear-gradient(180deg, transparent 18%, rgba(255,203,87,.95) 18%, rgba(255,203,87,.9) 82%, transparent 82%);
  padding:6px 14px;
  border-radius:3px;
  font-weight:950;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:none;
  transform:rotate(-1deg);
}
.card h2{
  font-size:clamp(46px,5vw,88px);
  line-height:.88;
  letter-spacing:-.075em;
  margin:26px 0 22px;
}
.card p{
  font-size:clamp(18px,1.65vw,24px);
  line-height:1.32;
  color:#333;
  max-width:720px;
  text-wrap:balance;
}
.card h2,
.hero-card h1,
.cta-card h2{
  text-wrap:balance;
}
.note{
  max-height:100%;
  overflow:hidden;
}
.note{
  align-self:center;
  position:relative;
  z-index:30;
  background:
    linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,0) 34%),
    linear-gradient(0deg, rgba(255,203,87,.92), rgba(255,213,104,.98)),
    radial-gradient(rgba(90,63,0,.12) .7px, transparent .7px);
  background-size:100% 100%, 100% 100%, 7px 7px;
  color:#1b1608;
  border-radius:8px 10px 9px 7px;
  padding:clamp(24px,2.5vw,32px);
  font-family:var(--font-script);
  font-size:clamp(20px,1.72vw,28px);
  line-height:1.28;
  letter-spacing:.01em;
  box-shadow:
    0 22px 38px rgba(0,0,0,.22),
    0 4px 8px rgba(96,67,0,.16),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -10px 24px rgba(154,104,0,.1);
  border:1px solid rgba(126,82,0,.18);
  max-height:100%;
  overflow:visible;
  transform:rotate(-.7deg);
}
.note:before,
.note:after{
  content:"";
  position:absolute;
  pointer-events:none;
  display:block;
}
.note:before{
  width:148px;
  height:148px;
  top:50%;
  right:-68px;
  background:url("na_serio_spinacz.png") center / contain no-repeat;
  filter:drop-shadow(-8px 12px 12px rgba(0,0,0,.26));
  transform:translateY(-50%) rotate(-18deg);
  transform-origin:50% 50%;
  z-index:80;
}
.note:after{
  display:none;
}
.note b{
  color:#111;
  font-weight:700;
}
.checks{
  margin-top:22px;
  display:grid;
  gap:10px;
  color:#221b09;
  font-family:var(--font-script);
  font-size:clamp(18px,1.35vw,24px);
  line-height:1.22;
}
.checks span:before{
  content:"-";
  color:#111;
  font-weight:950;
  margin-right:8px;
}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:42px}
.btn{
  padding:16px 26px;
  border-radius:999px;
  font-weight:950;
  font-size:16px;
  cursor:pointer;
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px)}
.primary{background:var(--yellow);color:#000}
.secondary{border:1px solid rgba(255,255,255,.24);color:#fff;background:#111}

.progress{
  position:absolute;
  left:7vw;
  right:7vw;
  bottom:34px;
  height:5px;
  background:rgba(255,255,255,.18);
  border-radius:999px;
  overflow:hidden;
  z-index:20;
}
.bar{height:100%;width:0;background:var(--yellow);border-radius:999px}
.step-label{
  position:absolute;
  left:7vw;
  bottom:52px;
  color:rgba(255,255,255,.72);
  z-index:21;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:850;
}

@media(max-width:820px){
  .stage{height:880vh}
  .track{padding-left:5vw;gap:6vw}
  .card{
    min-width:88vw;
    width:88vw;
    height:76vh;
    grid-template-columns:1fr;
    padding:32px;
  }
  .card h2{font-size:40px}
  .card p,.note{font-size:16px}
  .hero-card h1,.cta-card h2{font-size:44px}
  .hero-card p,.cta-card p{font-size:20px}
  .logo-mark{width:140px}
}

.card{
  opacity:.62;
  z-index:3;
  transition:
    opacity .55s ease,
    transform .55s ease,
    box-shadow .55s ease;
}
.card.is-active{
  opacity:1;
  z-index:20;
  box-shadow:
    0 58px 130px rgba(0,0,0,.34),
    0 8px 18px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.62);
}
.card.is-past{
  opacity:.42;
  z-index:2;
}


/* Interactive brand buttons */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 0 0 rgba(255,203,87,0);
}
.btn:before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,203,87,.95);
  left:18px;
  top:50%;
  transform:translateY(-50%) scale(0);
  opacity:0;
  z-index:-1;
  transition:
    transform .42s cubic-bezier(.2,.9,.2,1),
    opacity .28s ease,
    width .42s cubic-bezier(.2,.9,.2,1);
}
.btn:after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:11px;
  height:8px;
  background:rgba(255,203,87,.46);
  border-radius:999px;
  transform:scaleX(0) rotate(-1deg);
  transform-origin:left center;
  transition:transform .35s ease;
  z-index:-1;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(255,203,87,.18);
}
.btn:hover:before{
  opacity:1;
  width:calc(100% - 36px);
  transform:translateY(-50%) scale(1);
}
.btn:hover:after{
  transform:scaleX(1) rotate(-1deg);
}
.btn.primary:hover{
  background:#ffd95a;
}
.btn.primary:before{
  background:rgba(8,8,8,.10);
}
.btn.primary:after{
  background:rgba(8,8,8,.16);
}
.btn.secondary:hover{
  color:#fff;
  border-color:rgba(255,203,87,.55);
}
.btn span{ text-shadow:none; font-weight:900;
  position:relative;
  z-index:2;
}
.btn > span{
  position:relative;
  z-index:3;
}

body.theme-day .btn.secondary{
  background:rgba(255,255,255,.7);
  color:#111;
  border-color:rgba(0,0,0,.14);
}

/* Reverted: no additional process map */
.process-line,
.connect-label{
  display:none !important;
}


.step-label{
  transition: color .35s ease, opacity .35s ease, text-shadow .35s ease;
}
body.nav-dark .step-label{
  color: rgba(255,255,255,.78) !important;
}
body.nav-light .step-label{
  color: rgba(0,0,0,.68) !important;
}
.step-label.active-glow{
  color: var(--yellow) !important;
  text-shadow: 0 0 12px rgba(255,203,87,.35);
}


/* Brand color + cleaner background: no connecting lines */
body:before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,203,87,.14), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(255,203,87,.10), transparent 20%),
    radial-gradient(circle at 70% 82%, rgba(255,203,87,.08), transparent 22%);
  opacity:.72;
}
/* Better contrast for day mode */
body.theme-day{
  --bg:#eee9dc;
  --paper:#fffaf0;
  --dot-alpha:.72;
  --line-alpha:0;
}
body.theme-day:before{
  background:
    radial-gradient(circle at 18% 28%, rgba(255,203,87,.24), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(255,203,87,.18), transparent 20%),
    radial-gradient(circle at 70% 82%, rgba(255,203,87,.16), transparent 22%),
    radial-gradient(circle at 28% 80%, rgba(0,0,0,.06), transparent 20%);
  opacity:1;
}
body.theme-day #dotsCanvas{
  background:#eee9dc !important;
}
body.theme-day .card{
  background-color:rgba(255,250,240,.98) !important;
  border-color:rgba(0,0,0,.82);
  box-shadow:
    0 38px 90px rgba(0,0,0,.18),
    0 6px 14px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.7);
}
body.theme-day .hero-card,
body.theme-day .cta-card{
  background:
    radial-gradient(circle at 78% 18%, rgba(255,203,87,.24), transparent 20%),
    linear-gradient(rgba(18,18,18,.88), rgba(18,18,18,.88)),
    var(--card-texture),
    rgba(18,18,18,.9) !important;
  background-size:100% 100%, 100% 100%, cover, 100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:#fff;
}
body.theme-day .marker{
  background:
    linear-gradient(
      180deg,
      transparent 66%,
      rgba(255,203,87,.70) 66%,
      rgba(255,203,87,.70) 91%,
      transparent 91%
    );
}
body.theme-day .tag{
  background:
    linear-gradient(180deg, transparent 16%, rgba(255,203,87,.98) 16%, rgba(255,203,87,.98) 84%, transparent 84%);
}
/* Day mode: dark editorial dots, yellow stays as accent */
body.theme-day{
  --day-dot-color: 28,28,28;
}


/* Day mode: all bottom navigation labels dark */
body.theme-day .step-label{
  color: rgba(0,0,0,.72) !important;
  text-shadow:none !important;
}
body.theme-day .step-label.active-glow{
  color: rgba(0,0,0,.82) !important;
  text-shadow:none !important;
}


/* Final day-mode process label consistency */
body.theme-day .step-label,
body.theme-day .step-label.active-glow{
  color: rgba(0,0,0,.76) !important;
  text-shadow:none !important;
}

/* If process map exists in any version, keep all labels dark in day mode */
body.theme-day .process-line span,
body.theme-day .process-line span.is-past,
body.theme-day .process-line span.is-active{
  color: rgba(0,0,0,.72) !important;
  text-shadow:none !important;
}
body.theme-day .process-line span:before,
body.theme-day .process-line span.is-past:before,
body.theme-day .process-line span.is-active:before{
  background:#ffcb57 !important;
  box-shadow:none !important;
}

/* Theme icon instead of text label */
.theme-icon{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#080808;
  background:#ffcb57;
  border:1px solid rgba(255,203,87,.7);
  box-shadow:
    0 0 0 6px rgba(255,203,87,.08),
    0 0 22px rgba(255,203,87,.22);
  overflow:hidden;
}
.theme-icon svg{
  width:22px;
  height:22px;
  display:block;
  fill:currentColor;
}
body.theme-day .theme-icon{
  background:#ffcb57;
  color:#111;
  box-shadow:
    0 0 0 7px rgba(255,203,87,.14),
    0 0 26px rgba(255,203,87,.34),
    0 10px 26px rgba(0,0,0,.10);
}
body.theme-sunset .theme-icon{
  background:#ffcb57;
  color:#111;
  box-shadow:
    0 0 0 7px rgba(255,203,87,.12),
    0 0 30px rgba(255,203,87,.38);
}
body.theme-night .theme-icon{
  background:#111;
  color:#ffcb57;
  border-color:rgba(255,203,87,.35);
  box-shadow:
    0 0 0 7px rgba(255,203,87,.08),
    0 0 30px rgba(255,203,87,.42);
}


/* Mobile 9:16 story cards */
@media (max-width: 820px){
  .stage{height:880vh}

  .track{
    gap:6vw !important;
    padding-left:6vw !important;
    padding-right:6vw !important;
  }

  .card{
    width:88vw !important;
    min-width:88vw !important;
    height:min(84vh, calc(88vw * 16 / 9)) !important;
    max-height:84vh !important;
    border-radius:28px !important;
    grid-template-columns:1fr !important;
    padding:32px !important;
    overflow:hidden;
  }

  .card h2{
    font-size:clamp(34px,8vw,44px) !important;
  }

  .hero-card h1,
  .cta-card h2{
    font-size:clamp(38px,10vw,52px) !important;
  }

  .card p,
  .note,
  .hero-card p,
  .cta-card p{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  .note{
    padding:20px !important;
  }

}


/* Typography readability pass */
.hero-card h1,
.cta-card h2{
  line-height:.94 !important;
  letter-spacing:-.065em !important;
  max-width:1050px;
}

.card h2{
  line-height:.96 !important;
  letter-spacing:-.06em !important;
  margin:22px 0 20px !important;
  max-width:860px;
}

.hero-card p,
.cta-card p{
  line-height:1.5 !important;
  letter-spacing:-.015em;
  max-width:760px;
  margin-top:30px !important;
}

.card p{
  line-height:1.48 !important;
  letter-spacing:-.01em;
  max-width:690px;
  margin-top:0;
  margin-bottom:0;
}

.tag{
  margin-bottom:2px;
  line-height:1.15;
}

.note{
  line-height:1.5 !important;
  letter-spacing:-.01em;
}

.checks{
  margin-top:18px !important;
  gap:8px !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  line-height:1.38;
}

.btns{
  margin-top:36px !important;
}

.card > div:first-child{
  align-self:center;
}

.card .note{
  align-self:center;
}

@media (min-width: 821px){
  .card{
    align-items:center !important;
  }

  .hero-card,
  .cta-card{
    align-items:end !important;
  }
}

@media (max-width: 820px){
  .card{
    align-content:center !important;
    gap:20px !important;
  }

  .hero-card h1,
  .cta-card h2{
    font-size:clamp(36px,9vw,48px) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
  }

  .card h2{
    font-size:clamp(31px,7.4vw,40px) !important;
    line-height:1.04 !important;
    letter-spacing:-.048em !important;
    margin:16px 0 14px !important;
  }

  .hero-card p,
  .cta-card p,
  .card p{
    font-size:15.5px !important;
    line-height:1.55 !important;
    letter-spacing:-.005em;
    text-wrap:pretty;
  }

  .tag{
    font-size:11px !important;
    letter-spacing:.07em !important;
    padding:5px 10px !important;
  }

  .note{
    font-size:14.5px !important;
    line-height:1.48 !important;
    padding:18px !important;
    border-radius:20px !important;
  }

  .checks{
    margin-top:12px !important;
    gap:6px !important;
    font-size:13.5px !important;
    line-height:1.35;
  }

  .btns{
    margin-top:26px !important;
    gap:10px !important;
  }

  .btn{
    padding:13px 19px !important;
    font-size:14px !important;
  }

  .logo-mark{
    width:136px !important;
  }

}

@media (max-width: 420px){
  .card{
    padding:26px !important;
  }

  .hero-card h1,
  .cta-card h2{
    font-size:clamp(34px,9.2vw,43px) !important;
  }

  .card h2{
    font-size:clamp(29px,7.4vw,36px) !important;
  }

  .hero-card p,
  .cta-card p,
  .card p{
    font-size:14.5px !important;
    line-height:1.52 !important;
  }

  .note{
    font-size:13.5px !important;
    line-height:1.43 !important;
  }

  .checks{
    display:none !important;
  }
}

/* Final contrast rules: dark cards stay bright, paper cards stay dark */
.card:not(.hero-card):not(.cta-card){
  color:#101010 !important;
}
.card:not(.hero-card):not(.cta-card) h2,
.card:not(.hero-card):not(.cta-card) p{
  color:#161616 !important;
}
.hero-card,
.cta-card,
.hero-card .logo-mark,
.cta-card .logo-mark,
.hero-card h1,
.cta-card h2{
  color:#fff !important;
}
.hero-card p,
.cta-card p{
  color:#f4f4f0 !important;
}
.hero-card .secondary,
.cta-card .secondary{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.32) !important;
}
.hero-card .secondary:hover,
.cta-card .secondary:hover{
  border-color:rgba(255,203,87,.62) !important;
}
body.theme-day .hero-card,
body.theme-day .cta-card{
  color:#fff !important;
}
body.theme-day .hero-card p,
body.theme-day .cta-card p{
  color:#f4f4f0 !important;
}
body.theme-day .hero-card .secondary,
body.theme-day .cta-card .secondary{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.32) !important;
}
body.theme-day.nav-dark .step-label,
body.theme-day.nav-dark .step-label.active-glow{
  color:rgba(255,255,255,.86) !important;
  text-shadow:0 0 14px rgba(0,0,0,.28) !important;
}

.brand-instagram svg .ig-fill{
  fill:url(#instagramGradient);
  stroke:none;
}
.brand-facebook svg .fb-fill{
  fill:#1877f2;
  stroke:none;
}
.brand-facebook svg .fb-letter{
  fill:#fff;
  stroke:none;
}
.social-follow{
  margin-top:30px;
}
.social-follow p{
  margin:0 0 12px !important;
  max-width:none;
  color:#f4f4f0 !important;
  font-size:clamp(15px,1.2vw,18px) !important;
  line-height:1.2 !important;
  font-weight:900;
  letter-spacing:.01em;
}
.social-icons{
  display:flex;
  align-items:center;
  gap:18px;
}
.social-icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  border-radius:999px;
  background:var(--yellow);
  color:#080808;
  outline:0;
  box-shadow:0 9px 20px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-icons a:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 28px rgba(0,0,0,.24), inset 0 -2px 0 rgba(0,0,0,.12);
}
.social-icons a:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 3px #080808,
    0 0 0 7px rgba(255,203,87,.34),
    0 14px 28px rgba(0,0,0,.24);
}
.social-icons svg{
  width:24px;
  height:24px;
  display:block;
  filter:none;
}
.cta-card .social-follow .btns{
  margin-top:18px !important;
  justify-content:center;
}
.cta-card .social-follow .social-icons{
  margin-top:18px;
  justify-content:center;
}
.cta-card .social-follow{
  text-align:center;
}
.cta-card .social-follow > p{
  text-align:left;
}
.contact-form{
  display:grid;
  gap:10px;
  width:100%;
  margin-top:14px;
  text-align:left;
}
.form-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.contact-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.contact-form label{
  display:block;
  min-width:0;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  min-width:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font:600 13px/1.25 var(--font-body);
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form input,
.contact-form select{
  height:42px;
  padding:0 12px;
}
.contact-form textarea{
  height:68px;
  padding:11px 12px;
  resize:none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.66);
}
.contact-form select{
  color:rgba(255,255,255,.78);
  cursor:pointer;
}
.contact-form select option{
  color:#111;
  background:#fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--yellow);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,203,87,.13);
}
.contact-form .form-submit{
  width:100%;
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:11px 20px;
  background:var(--yellow);
  color:#080808;
  font:800 14px/1 var(--font-heading);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form .form-submit:hover{
  transform:translateY(-2px);
  background:#ffd76f;
  box-shadow:0 12px 28px rgba(255,203,87,.18);
}
.contact-form.is-sending{
  pointer-events:none;
}
.contact-form .form-submit[disabled]{
  cursor:wait;
  transform:none;
  opacity:.76;
}
.form-status{
  min-height:1.2em;
  margin:0 !important;
  color:#4c3500 !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:800;
}
.form-status.is-error{
  color:#7a1f16 !important;
}
.social-follow.is-success > p,
.social-follow.is-success .contact-form,
.social-follow.is-success .contact-default-social{
  display:none !important;
}
.contact-success{
  display:grid;
  justify-items:start;
  gap:clamp(12px,1.3vw,18px);
  max-width:min(100%, 560px);
}
.contact-success[hidden]{
  display:none !important;
}
.contact-success h3{
  margin:0;
  color:#111;
  font-family:var(--font-heading);
  font-size:clamp(30px,3.4vw,54px);
  line-height:.98;
  letter-spacing:0;
}
.contact-success h3:focus{
  outline:3px solid var(--yellow);
  outline-offset:6px;
}
.contact-success p{
  margin:0 !important;
  max-width:540px;
  color:#202020 !important;
  font-size:clamp(15px,1.35vw,20px) !important;
  line-height:1.38 !important;
}
.contact-response-time{
  font-weight:900;
}
.contact-success .btn{
  margin-top:4px;
}
.contact-social-note{
  margin-top:6px !important;
  font-family:var(--font-heading);
  font-weight:900;
}
.contact-success .social-icons{
  margin-top:0;
}
@media (prefers-reduced-motion:no-preference){
  .contact-success:not([hidden]){
    animation:contactSuccessIn .34s ease both;
  }
  @keyframes contactSuccessIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }
}
.form-consent{
  display:grid !important;
  grid-template-columns:18px 1fr;
  align-items:start;
  gap:9px;
  color:rgba(255,255,255,.78);
  font-size:10px;
  line-height:1.42;
  cursor:pointer;
}
.contact-form .form-consent input{
  appearance:none;
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.42);
  border-radius:4px;
  display:grid;
  place-content:center;
  cursor:pointer;
}
.form-consent input:before{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #080808;
  border-bottom:2px solid #080808;
  transform:rotate(-45deg) scale(0);
  transition:transform .15s ease;
}
.form-consent input:checked{
  border-color:var(--yellow);
  background:var(--yellow);
}
.form-consent input:checked:before{
  transform:rotate(-45deg) scale(1);
}
.form-consent a{
  color:var(--yellow);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:200;
  width:min(920px,calc(100vw - 36px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:20px 22px;
  color:#f7f7f3;
  background:rgba(15,15,15,.97);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.cookie-banner[hidden],
.cookie-settings[hidden],
.cookie-manage[hidden]{
  display:none !important;
}
.cookie-banner h2,
.cookie-settings h2{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
  letter-spacing:0;
}
.cookie-banner p,
.cookie-settings p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.5;
}
.cookie-banner a,
.cookie-settings a{
  color:var(--yellow);
  font-weight:800;
}
.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.cookie-button{
  min-height:40px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff;
  background:transparent;
  font:800 12px/1 var(--font-heading);
  cursor:pointer;
}
.cookie-button.primary{
  border-color:var(--yellow);
  color:#080808;
  background:var(--yellow);
}
.cookie-settings{
  position:fixed;
  inset:0;
  z-index:210;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.68);
}
.cookie-settings-panel{
  width:min(520px,100%);
  max-height:min(680px,calc(100vh - 40px));
  overflow:auto;
  padding:26px;
  color:#f7f7f3;
  background:#141414;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  box-shadow:0 28px 90px rgba(0,0,0,.55);
}
.cookie-choice{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.cookie-choice strong{
  display:block;
  margin-bottom:4px;
  font:800 13px/1.2 var(--font-heading);
}
.cookie-choice input{
  width:20px;
  height:20px;
  accent-color:var(--yellow);
}
.cookie-status{
  color:var(--yellow);
  font-size:11px;
  font-weight:800;
}
.cookie-settings .cookie-actions{
  margin-top:20px;
}
.cookie-manage{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:190;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,203,87,.42);
  border-radius:50%;
  background:#171717;
  color:var(--yellow);
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cookie-manage:hover{
  transform:translateY(-3px) rotate(-5deg);
  box-shadow:0 16px 38px rgba(0,0,0,.38);
}
.cookie-manage svg{
  width:31px;
  height:31px;
  display:block;
  fill:currentColor;
}
.intro-loader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#080808;
  opacity:1;
  visibility:visible;
  animation:introLoaderAutoRelease 1.56s linear forwards;
}
.intro-loader.is-leaving{
  animation:introCurtainOut .22s cubic-bezier(.65,0,.35,1) forwards;
}
.intro-logo{
  position:relative;
  width:min(76vw,920px);
  aspect-ratio:5461/1440;
}
.intro-logo-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.intro-wordmark{
  opacity:0;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.28));
  transform:translateY(4px);
  animation:introWordmarkIn .3s .04s ease-out forwards;
}
.intro-logo-dot{
  fill:var(--yellow);
  opacity:0;
  visibility:hidden;
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(12px) scale(.7);
  animation:introDotJump .72s linear forwards;
}
.intro-logo-dot-one{
  --dot-peak:-26px;
  --dot-high-peak:-29px;
  --dot-rebound:-8px;
  --dot-squash-x:1.12;
  --dot-squash-y:.88;
  animation-delay:.3s;
}
.intro-logo-dot-two{
  --dot-peak:-30px;
  --dot-high-peak:-33px;
  --dot-rebound:-10px;
  --dot-squash-x:1.14;
  --dot-squash-y:.86;
  animation-delay:.44s;
}
.intro-logo-dot-three{
  --dot-peak:-28px;
  --dot-high-peak:-31px;
  --dot-rebound:-9px;
  --dot-squash-x:1.18;
  --dot-squash-y:.82;
  animation-delay:.58s;
}
@keyframes introWordmarkIn{
  0%{
    opacity:0;
    transform:translateY(4px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes introDotJump{
  0%{
    opacity:0;
    visibility:hidden;
    transform:translateY(12px) scale(.7);
  }
  8%{
    opacity:1;
    visibility:visible;
    transform:translateY(6px) scale(.9);
  }
  34%{
    opacity:1;
    visibility:visible;
    transform:translateY(var(--dot-peak, -28px)) scaleX(.94) scaleY(1.08);
  }
  48%{
    transform:translateY(var(--dot-high-peak, -31px)) scale(1);
  }
  67%{
    transform:translateY(3px) scaleX(var(--dot-squash-x, 1.14)) scaleY(var(--dot-squash-y, .86));
  }
  80%{
    transform:translateY(var(--dot-rebound, -9px)) scaleX(.98) scaleY(1.03);
  }
  91%{
    transform:translateY(1px) scaleX(1.04) scaleY(.96);
  }
  100%{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}
@keyframes introCurtainOut{
  0%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}
@keyframes introLoaderAutoRelease{
  0%,84%{
    opacity:1;
    visibility:visible;
  }
  100%{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}
@media (max-width:600px){
  .intro-logo{
    width:88vw;
  }
}
.intro-loader.intro-skip-animation{
  animation:introCurtainOut .08s linear forwards;
}
.intro-loader.intro-skip-animation .intro-wordmark,
.intro-loader.intro-skip-animation .intro-logo-dot{
  animation:none !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.28));
  transform:translateY(0) scale(1) !important;
}
@media (prefers-reduced-motion:reduce){
  .intro-wordmark,
  .intro-logo-dot{
    animation:none !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:drop-shadow(0 16px 34px rgba(0,0,0,.28));
    transform:translateY(0) scale(1) !important;
  }
}
.social-icons .brand-instagram .ig-fill,
.social-icons .brand-facebook .fb-fill{
  fill:#080808;
}
.social-icons .brand-instagram .ig-fill{
  fill:none;
  stroke:#080808;
  stroke-width:1.9;
}
.social-icons .brand-instagram svg circle:first-of-type{
  stroke:#080808;
}
.social-icons .brand-instagram svg circle:last-of-type{
  fill:#080808;
}
.social-icons .brand-facebook .fb-letter{
  fill:var(--yellow);
}

/* Responsive safety pass */
@media (max-width: 820px){
  .track,
  .card{
    overflow:visible !important;
  }
  .card:nth-child(2n){
    --y:18px;
  }
  .card:nth-child(3n){
    --y:-14px;
  }
  .hero-card,
  .cta-card{
    --y:0px;
  }
  .cta-card{
    --y:-18px;
  }
  .step-label{
    bottom:48px;
  }
  .cta-card{
    height:calc(100vh - 158px) !important;
    max-height:none !important;
    padding:22px 26px 20px !important;
    align-content:start !important;
  }
  .cta-card .logo-mark{
    top:22px !important;
    left:26px !important;
    width:104px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:58px;
  }
  .cta-card h2{
    font-size:clamp(27px,7.2vw,36px) !important;
    line-height:1.04 !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:12px !important;
    font-size:12.5px !important;
    line-height:1.4 !important;
  }
  .cta-card .social-follow{
    margin-top:18px;
  }
  .cta-card .social-follow > p{
    margin-bottom:12px !important;
    font-size:18px !important;
    line-height:1.18 !important;
  }
  .contact-form{
    gap:12px;
    margin-top:12px;
  }
  .contact-form .form-row{
    grid-template-columns:1fr;
    gap:12px;
  }
  .contact-form input,
  .contact-form select{
    height:46px;
    padding:0 14px;
    font-size:14px;
  }
  .contact-form textarea{
    height:74px;
    padding:13px 14px;
    font-size:14px;
    line-height:1.35;
  }
  .contact-form .form-submit{
    min-height:48px;
    padding:12px 18px;
    font-size:14px;
  }
  .form-consent{
    grid-template-columns:20px 1fr;
    gap:10px;
    font-size:11px;
    line-height:1.45;
    margin:2px 0;
  }
  .contact-form .form-consent input{
    width:20px;
    height:20px;
  }
  .cta-card .social-follow .social-icons{
    margin-top:10px;
  }
  .cta-card .social-icons svg{
    width:30px;
    height:30px;
  }
  .cookie-banner{
    grid-template-columns:1fr;
    gap:14px;
    bottom:10px;
    width:calc(100vw - 20px);
    padding:17px;
  }
  .cookie-actions{
    justify-content:stretch;
  }
  .cookie-button{
    flex:1 1 120px;
  }
}
@media (max-width: 430px){
  .track,
  .card{
    overflow:visible !important;
  }
  .track{
    padding-left:6vw !important;
    padding-right:6vw !important;
  }
  .card{
    width:88vw !important;
    min-width:88vw !important;
    height:min(76vh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100vh - 150px) !important;
  }
  .cta-card{
    height:calc(100vh - 158px) !important;
    max-height:none !important;
  }
  .hero-card h1,
  .cta-card h2{
    font-size:clamp(34px,8.7vw,41px) !important;
  }
  .hero-card p,
  .cta-card p,
  .card p{
    font-size:14px !important;
  }
  .social-follow{
    margin-top:22px;
  }
  .cta-card .social-follow .btns{
    margin-top:16px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:18px;
  }
  .cta-card .social-follow{
    margin-top:18px;
  }
  .cta-card .social-follow > p{
    margin-bottom:10px !important;
    font-size:17px !important;
  }
  .contact-form{
    gap:10px;
    margin-top:10px;
  }
  .contact-form .form-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .contact-form input,
  .contact-form select{
    height:43px;
    padding:0 13px;
    font-size:13px;
  }
  .contact-form textarea{
    height:66px;
    padding:12px 13px;
    font-size:13px;
  }
  .form-consent{
    grid-template-columns:19px 1fr;
    gap:9px;
    font-size:10px;
    line-height:1.4;
  }
  .contact-form .form-consent input{
    width:19px;
    height:19px;
  }
  .contact-form .form-submit{
    min-height:44px;
    padding:10px 16px;
    font-size:13px;
  }
  .logo-mark{
    width:126px !important;
  }
  .note:before{
    width:112px;
    height:112px;
    right:-52px;
  }
}
@media (max-width: 430px) and (max-height: 700px){
  .logo-mark{
    top:14px !important;
    left:26px !important;
    width:104px !important;
  }
  .cta-card .logo-mark{
    top:0 !important;
    width:80px !important;
  }
  .hero-card h1,
  .cta-card h2{
    font-size:clamp(31px,8.4vw,36px) !important;
  }
  .hero-card p,
  .cta-card p{
    font-size:13.5px !important;
    line-height:1.45 !important;
  }
  .cta-card{
    height:calc(100vh - 146px) !important;
    padding:18px 22px 16px !important;
  }
  .cta-card .logo-mark{
    top:12px !important;
    left:22px !important;
    width:72px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:38px;
  }
  .cta-card h2{
    font-size:clamp(24px,7vw,30px) !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:8px !important;
    font-size:11.5px !important;
    line-height:1.32 !important;
  }
  .cta-card .social-follow{
    margin-top:9px;
  }
  .contact-form{
    gap:7px;
    margin-top:7px;
  }
  .contact-form .form-row{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .contact-form input,
  .contact-form select{
    height:36px;
    padding:0 10px;
    font-size:11.5px;
  }
  .contact-form textarea{
    height:44px;
    padding:9px 10px;
    font-size:11.5px;
    line-height:1.25;
  }
  .form-consent{
    grid-template-columns:16px 1fr;
    gap:7px;
    font-size:8.6px;
    line-height:1.3;
  }
  .contact-form .form-consent input{
    width:16px;
    height:16px;
  }
  .contact-form .form-submit{
    min-height:38px;
    font-size:12px;
  }
  .cta-card .social-follow .social-icons{
    margin-top:6px;
  }
  .cta-card .social-icons a{
    width:32px;
    height:32px;
  }
  .cta-card .social-icons svg{
    width:26px;
    height:26px;
  }
}

/* Desktop bottom navigation safety */
@media (min-width: 821px){
  .card{
    height:min(70vh, calc(100vh - 180px)) !important;
  }
  .hero-card{
    padding-top:clamp(42px,4vw,64px) !important;
    padding-bottom:clamp(34px,3vw,48px) !important;
  }
  .hero-card .logo-mark{
    top:clamp(34px,3.4vw,54px);
    left:clamp(42px,4vw,64px);
    width:clamp(150px,13vw,210px);
  }
  .hero-card > div:not(.logo-mark){
    width:100%;
    padding-top:clamp(92px,9vw,130px);
  }
  .hero-card h1{
    max-width:min(900px,72vw) !important;
    font-size:clamp(54px,5vw,76px) !important;
    line-height:1.02 !important;
    letter-spacing:0 !important;
  }
  .hero-card p{
    max-width:min(720px,62vw) !important;
    margin-top:22px !important;
    font-size:clamp(17px,1.45vw,22px) !important;
    line-height:1.5 !important;
  }
  .hero-card .btns{
    margin-top:28px !important;
  }
  .card:nth-child(2n){
    --y:32px;
  }
  .card:nth-child(3n){
    --y:-28px;
  }
  .hero-card,
  .cta-card{
    --y:0px;
  }
  .progress{
    z-index:70;
  }
  .step-label{
    z-index:71;
  }
  .cta-card{
    padding-bottom:clamp(34px,3vw,48px) !important;
    position:relative;
  }
  .cta-card h2{
    max-width:min(720px,51vw) !important;
    font-size:clamp(48px,4.35vw,68px) !important;
    line-height:1.02 !important;
    letter-spacing:0 !important;
  }
  .cta-card p{
    max-width:min(650px,48vw) !important;
    margin-top:22px !important;
    font-size:clamp(17px,1.35vw,21px) !important;
    line-height:1.42 !important;
  }
  .cta-card .social-follow{
    position:absolute;
    right:clamp(44px,5vw,88px);
    bottom:clamp(26px,3.4vh,42px);
    width:clamp(300px,27vw,390px);
    margin:0 !important;
    z-index:4;
  }
  .cta-card .social-follow p{
    margin-bottom:8px !important;
    font-size:clamp(18px,1.3vw,22px) !important;
  }
  .cta-card .social-icons svg{
    width:30px;
    height:30px;
  }
  .cta-card .social-follow .social-icons{
    margin-top:10px;
  }
}

@media (min-width: 821px) and (max-height: 760px){
  .hero-card .logo-mark{
    top:30px;
    width:clamp(140px,12vw,180px);
  }
  .hero-card > div:not(.logo-mark){
    padding-top:82px;
  }
  .hero-card h1{
    max-width:min(820px,70vw) !important;
    font-size:clamp(48px,4.7vw,64px) !important;
  }
  .hero-card p{
    margin-top:16px !important;
    font-size:clamp(16px,1.3vw,19px) !important;
  }
  .hero-card .btns{
    margin-top:20px !important;
  }
}

body.theme-day .step-label,
body.theme-day .step-label.active-glow,
body.theme-day.nav-dark .step-label,
body.theme-day.nav-dark .step-label.active-glow,
body.theme-day.nav-light .step-label,
body.theme-day.nav-light .step-label.active-glow{
  color:rgba(0,0,0,.78) !important;
  text-shadow:none !important;
}
body.theme-sunset .step-label,
body.theme-sunset .step-label.active-glow,
body.theme-night .step-label,
body.theme-night .step-label.active-glow,
body.theme-sunset.nav-dark .step-label,
body.theme-sunset.nav-dark .step-label.active-glow,
body.theme-sunset.nav-light .step-label,
body.theme-sunset.nav-light .step-label.active-glow,
body.theme-night.nav-dark .step-label,
body.theme-night.nav-dark .step-label.active-glow,
body.theme-night.nav-light .step-label,
body.theme-night.nav-light .step-label.active-glow{
  color:rgba(255,255,255,.86) !important;
  text-shadow:0 0 14px rgba(0,0,0,.28) !important;
}

@media (max-width:820px), (prefers-reduced-motion: reduce){
  body{
    transition:none;
  }
  body:before{
    animation:none !important;
    opacity:.72;
  }
  .card{
    filter:none !important;
    transition:
      opacity .24s ease,
      transform .24s ease !important;
    box-shadow:
      0 28px 62px rgba(0,0,0,.22),
      0 5px 12px rgba(0,0,0,.1),
      inset 0 0 0 1px rgba(255,255,255,.52) !important;
  }
  .card.is-active{
    filter:none !important;
    box-shadow:
      0 34px 72px rgba(0,0,0,.26),
      0 7px 16px rgba(0,0,0,.13),
      inset 0 0 0 1px rgba(255,255,255,.58) !important;
  }
  .card.is-past{
    filter:none !important;
  }
  .hero-card,
  .cta-card{
    box-shadow:0 34px 78px rgba(0,0,0,.42) !important;
  }
  .note{
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      0 3px 7px rgba(96,67,0,.12),
      inset 0 1px 0 rgba(255,255,255,.45) !important;
  }
  .note:before,
  .social-icons svg{
    filter:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *,
  *:before,
  *:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.card .note{
  font-family:var(--font-script) !important;
  color:#1b1608 !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,0) 34%),
    linear-gradient(0deg, rgba(255,203,87,.93), rgba(255,216,112,.99)),
    radial-gradient(rgba(90,63,0,.12) .7px, transparent .7px) !important;
  background-size:100% 100%, 100% 100%, 7px 7px !important;
  border:1px solid rgba(126,82,0,.18) !important;
  border-radius:8px 10px 9px 7px !important;
  box-shadow:
    0 22px 38px rgba(0,0,0,.22),
    0 4px 8px rgba(96,67,0,.16),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -10px 24px rgba(154,104,0,.1) !important;
  letter-spacing:.01em !important;
}
.card .note b{
  color:#111 !important;
  font-family:var(--font-script) !important;
}
.card .checks{
  color:#221b09 !important;
  font-family:var(--font-script) !important;
}
.card .checks span:before{
  color:#111 !important;
}

/* Designer polish: tactile depth, clearer CTAs and subtle active-card reveals */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  .card.is-active{
    box-shadow:
      0 70px 145px rgba(0,0,0,.36),
      0 16px 34px rgba(0,0,0,.18),
      inset 0 0 0 1px rgba(255,255,255,.68) !important;
  }
  .hero-card.is-active,
  .cta-card.is-active{
    box-shadow:
      0 76px 160px rgba(0,0,0,.62),
      0 18px 42px rgba(255,203,87,.08) !important;
  }
  .card > div:first-child,
  .card .note,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    transition:opacity .48s ease, transform .48s cubic-bezier(.2,.8,.2,1);
  }
  .card:not(.is-active) > div:first-child,
  .card:not(.is-active) .note{
    opacity:.82;
    transform:translateY(10px);
  }
  .card.is-active > div:first-child{
    opacity:1;
    transform:translateY(0);
  }
  .card.is-active .note{
    opacity:1;
    transform:rotate(-.7deg) translateY(-2px);
  }
  .hero-card.is-active .logo-mark,
  .cta-card.is-active .logo-mark{
    transform:translateY(0);
  }
}

.btn.primary,
.contact-form .form-submit{
  position:relative;
  overflow:hidden;
}
.btn.primary:before,
.contact-form .form-submit:before{
  content:"";
  position:absolute;
  inset:-40% -70%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
  transform:translateX(-60%) rotate(0deg);
  opacity:.45;
  pointer-events:none;
  transition:transform .62s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.btn.primary:hover:before,
.contact-form .form-submit:hover:before{
  transform:translateX(60%) rotate(0deg);
  opacity:.75;
}
.btn.primary,
.contact-form .form-submit{
  box-shadow:
    0 12px 28px rgba(255,203,87,.18),
    inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn.primary:hover,
.contact-form .form-submit:hover{
  box-shadow:
    0 18px 42px rgba(255,203,87,.26),
    inset 0 -3px 0 rgba(0,0,0,.12);
}

@media (max-width:820px), (prefers-reduced-motion:reduce){
  .btn.primary:before,
  .contact-form .form-submit:before{
    display:none;
  }
}

/* Compact final card: iPhone SE and other short mobile viewports */
@media (max-width:430px) and (max-height:700px){
  .cta-card{
    --y:-28px;
    height:calc(100svh - 180px) !important;
    min-height:458px;
    max-height:500px !important;
    padding:14px 20px 13px !important;
    align-content:start !important;
  }
  .cta-card .logo-mark{
    top:10px !important;
    left:20px !important;
    width:72px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:34px !important;
  }
  .cta-card h2{
    max-width:100% !important;
    font-size:clamp(21px,6.4vw,25px) !important;
    line-height:1.02 !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:7px !important;
    font-size:10px !important;
    line-height:1.3 !important;
  }
  .cta-card .social-follow{
    margin-top:8px !important;
  }
  .cta-card .social-follow > p{
    margin-bottom:6px !important;
    font-size:15px !important;
    line-height:1.15 !important;
  }
  .contact-form{
    gap:6px !important;
    margin-top:6px !important;
  }
  .contact-form .form-row{
    gap:6px !important;
  }
  .contact-form input,
  .contact-form select{
    height:34px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
  .contact-form textarea{
    height:40px !important;
    padding:8px 10px !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }
  .form-consent{
    grid-template-columns:16px 1fr !important;
    gap:7px !important;
    font-size:8.4px !important;
    line-height:1.28 !important;
  }
  .contact-form .form-consent input{
    width:16px !important;
    height:16px !important;
  }
  .contact-form .form-submit{
    min-height:36px !important;
    padding:8px 14px !important;
    font-size:11.5px !important;
  }
  .cta-card .social-follow .social-icons{
    gap:12px;
    margin-top:4px !important;
  }
  .cta-card .social-icons a{
    width:26px !important;
    height:26px !important;
  }
  .cta-card .social-icons svg{
    width:22px !important;
    height:22px !important;
  }
  .step-label{
    bottom:44px !important;
    font-size:10px !important;
  }
  .progress{
    bottom:28px !important;
    height:4px !important;
  }
  .cookie-manage{
    top:12px;
    right:10px;
    bottom:auto;
    width:42px;
    height:42px;
  }
  .cookie-manage svg{
    width:26px;
    height:26px;
  }
}

/* Keep the contact-card logo visually consistent with the opening card. */
@media (min-width:821px){
  .cta-card .logo-mark{
    top:clamp(34px,3.4vw,54px) !important;
    left:clamp(42px,4vw,64px) !important;
    width:clamp(150px,13vw,210px) !important;
  }
}

@media (min-width:821px) and (max-height:760px){
  .cta-card .logo-mark{
    top:30px !important;
    width:clamp(140px,12vw,180px) !important;
  }
}

@media (max-width:820px){
  .cta-card .logo-mark{
    top:clamp(18px,5vw,34px) !important;
    left:26px !important;
    width:136px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:74px !important;
  }
}

@media (max-width:600px){
  .cta-card .logo-mark{
    width:126px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:66px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card .logo-mark{
    top:14px !important;
    left:26px !important;
    width:104px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:60px !important;
  }
}

/* Cards 1 and 8: paper version matching the rest of the deck. */
.hero-card,
.cta-card,
body.theme-day .hero-card,
body.theme-day .cta-card,
body.theme-sunset .hero-card,
body.theme-sunset .cta-card,
body.theme-night .hero-card,
body.theme-night .cta-card{
  color:#111 !important;
  background-color:color-mix(in srgb, var(--paper) calc(var(--card-opacity) * 100%), transparent) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)),
    var(--card-texture),
    radial-gradient(rgba(0,0,0,.042) .8px, transparent .8px),
    linear-gradient(105deg, rgba(255,255,255,.65), rgba(0,0,0,.038)) !important;
  background-size:100% 100%, cover, 7px 7px, 100% 100% !important;
  background-position:center, center, 0 0, center !important;
  background-repeat:no-repeat, no-repeat, repeat, no-repeat !important;
  border-color:rgba(0,0,0,.88) !important;
  box-shadow:
    0 44px 100px rgba(0,0,0,.28),
    0 6px 14px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.6) !important;
}

.hero-card:before,
.cta-card:before{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 1px,
      transparent 8px
    ) !important;
  background-size:auto !important;
  opacity:.58 !important;
}

.hero-card .logo-mark,
.cta-card .logo-mark,
.hero-card h1,
.cta-card h2,
.hero-card p,
.cta-card p,
.cta-card .social-follow > p,
body.theme-day .hero-card,
body.theme-day .cta-card,
body.theme-day .hero-card p,
body.theme-day .cta-card p{
  color:#121212 !important;
  text-shadow:none !important;
}

.hero-card .marker,
.cta-card .marker{
  text-shadow:none !important;
}

.hero-card .tag,
.cta-card .tag{
  color:#161616 !important;
}

.hero-card .secondary,
.cta-card .secondary,
body.theme-day .hero-card .secondary,
body.theme-day .cta-card .secondary{
  color:#111 !important;
  background:rgba(255,255,255,.66) !important;
  border-color:rgba(0,0,0,.18) !important;
}

.hero-card .secondary:hover,
.cta-card .secondary:hover{
  border-color:rgba(0,0,0,.34) !important;
  background:rgba(255,255,255,.86) !important;
}

.cta-card .contact-form input,
.cta-card .contact-form select,
.cta-card .contact-form textarea{
  color:#141414 !important;
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(0,0,0,.24) !important;
}

.cta-card .contact-form input::placeholder,
.cta-card .contact-form textarea::placeholder{
  color:rgba(0,0,0,.54) !important;
}

.cta-card .contact-form select{
  color:rgba(0,0,0,.72) !important;
}

.cta-card .contact-form input:focus,
.cta-card .contact-form select:focus,
.cta-card .contact-form textarea:focus{
  border-color:#d49b1d !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 0 0 3px rgba(255,203,87,.22) !important;
}

.cta-card .form-consent{
  color:rgba(0,0,0,.72) !important;
}

.cta-card .form-consent a{
  color:#111 !important;
}

.cta-card .contact-form .form-consent input{
  border-color:rgba(0,0,0,.34) !important;
  background:rgba(255,255,255,.66) !important;
}

.cta-card .contact-form .form-consent input:checked{
  background:var(--yellow) !important;
  border-color:#111 !important;
}

/* Mobile contact form stability after switching the final card to paper. */
@media (max-width:820px){
  .cta-card{
    overflow:visible !important;
  }
  .cta-card > div:not(.logo-mark){
    width:100%;
    max-width:100%;
  }
  .cta-card .social-follow,
  .cta-card .contact-form{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .cta-card .contact-form *{
    min-width:0;
  }
  .cta-card .contact-form .form-row{
    grid-template-columns:1fr !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select,
  .cta-card .contact-form textarea{
    font-size:16px !important;
  }
}

@media (max-width:430px){
  .cta-card{
    padding-inline:22px !important;
  }
  .cta-card h2{
    font-size:clamp(25px,7.2vw,31px) !important;
    line-height:1.04 !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    font-size:11.8px !important;
    line-height:1.35 !important;
  }
  .cta-card .social-follow > p{
    font-size:16px !important;
    margin-bottom:8px !important;
  }
  .cta-card .contact-form{
    gap:8px !important;
    margin-top:8px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:40px !important;
    padding:0 12px !important;
  }
  .cta-card .contact-form textarea{
    height:48px !important;
    padding:10px 12px !important;
  }
  .cta-card .form-consent{
    grid-template-columns:17px 1fr !important;
    gap:8px !important;
    font-size:9.5px !important;
    line-height:1.32 !important;
  }
  .cta-card .contact-form .form-consent input{
    width:17px !important;
    height:17px !important;
  }
  .cta-card .contact-form .form-submit{
    min-height:40px !important;
    padding:9px 14px !important;
    font-size:12px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card{
    --y:-34px;
    min-height:486px !important;
    max-height:calc(100svh - 128px) !important;
    padding:13px 20px 12px !important;
  }
  .cta-card .logo-mark{
    width:96px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:54px !important;
  }
  .cta-card h2{
    font-size:clamp(22px,6.4vw,27px) !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:6px !important;
    font-size:10.5px !important;
    line-height:1.28 !important;
  }
  .cta-card .social-follow{
    margin-top:7px !important;
  }
  .cta-card .social-follow > p{
    font-size:14px !important;
    margin-bottom:6px !important;
  }
  .cta-card .contact-form{
    gap:6px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:36px !important;
    padding:0 10px !important;
    font-size:16px !important;
  }
  .cta-card .contact-form textarea{
    height:40px !important;
    padding:8px 10px !important;
    font-size:16px !important;
  }
  .cta-card .form-consent{
    font-size:8.4px !important;
    line-height:1.25 !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:4px !important;
  }
}

/* Sticky notes: square, paper-like and handwritten. */
.card .note{
  width:min(100%, clamp(270px,24vw,360px)) !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px,2.35vw,34px) !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:4px 5px 3px 4px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #ffd76d 0%, #ffca49 100%),
    radial-gradient(rgba(120,82,0,.10) .7px, transparent .7px) !important;
  background-size:100% 100%, 100% 100%, 7px 7px !important;
  box-shadow:
    0 24px 34px rgba(0,0,0,.18),
    0 8px 12px rgba(105,72,0,.12),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -18px 28px rgba(150,97,0,.08) !important;
  color:#211707 !important;
  font-family:var(--font-script) !important;
  font-size:clamp(19px,1.55vw,25px) !important;
  line-height:1.18 !important;
  letter-spacing:.01em !important;
  transform:rotate(-1.4deg) !important;
}

.card:nth-child(2n) .note{
  transform:rotate(1.1deg) !important;
}

.card .note b{
  font-size:1.08em;
  line-height:1.08;
  display:block;
  margin-bottom:clamp(12px,1.3vw,18px);
}

.card .checks{
  margin-top:clamp(12px,1.2vw,18px) !important;
  gap:clamp(5px,.75vw,8px) !important;
  font-size:clamp(16px,1.18vw,21px) !important;
  line-height:1.12 !important;
}

.card .checks span:before{
  margin-right:6px !important;
}

@media (max-width:820px){
  .card .note{
    width:min(72vw,300px) !important;
    justify-self:center;
    align-self:center;
    justify-content:flex-start !important;
    padding:22px !important;
    font-size:clamp(17px,4.15vw,22px) !important;
  }
  .card .checks{
    font-size:clamp(14px,3.55vw,18px) !important;
    gap:5px !important;
  }
}

@media (max-width:430px){
  .card .note{
    width:min(72vw,258px) !important;
    padding:18px !important;
    justify-content:flex-start !important;
    font-size:clamp(15px,4vw,18px) !important;
    line-height:1.14 !important;
  }
  .card .checks{
    margin-top:9px !important;
    font-size:clamp(12.5px,3.35vw,15px) !important;
    line-height:1.1 !important;
    gap:4px !important;
  }
  .card .checks span:before{
    margin-right:4px !important;
  }
}

/* Sticky note content order: scope first, effect second. */
.card .note .checks{
  margin-top:0 !important;
}

.card .note .note-effect{
  margin:clamp(18px,1.9vw,26px) 0 0 !important;
  color:#211707 !important;
  font-family:var(--font-script) !important;
  font-size:inherit !important;
  font-weight:400 !important;
  line-height:1.18 !important;
  letter-spacing:.01em !important;
  max-width:none !important;
}

.card .note .note-effect b{
  display:inline !important;
  margin:0 !important;
  color:#111 !important;
  font-family:var(--font-script) !important;
  font-weight:700 !important;
  font-size:1.08em !important;
  line-height:inherit !important;
}

@media (max-width:820px){
  .card .note .note-effect{
    margin-top:16px !important;
  }
}

@media (max-width:430px){
  .card .note .note-effect{
    margin-top:14px !important;
  }
}

/* Final mobile contact-card fit: keep the whole form and social links visible. */
@media (max-width:820px){
  .cta-card{
    height:calc(100svh - 112px) !important;
    max-height:calc(100svh - 112px) !important;
    min-height:0 !important;
    padding:18px 24px 16px !important;
    align-content:start !important;
    overflow:visible !important;
  }
  .cta-card .logo-mark{
    width:clamp(92px,29vw,126px) !important;
  }
  .cta-card > div:not(.logo-mark){
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    padding-top:clamp(48px,13vw,66px) !important;
  }
  .cta-card h2{
    max-width:100% !important;
    font-size:clamp(24px,7vw,34px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:8px !important;
    max-width:100% !important;
    font-size:clamp(10px,3.05vw,13px) !important;
    line-height:1.28 !important;
  }
  .cta-card .social-follow{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    margin-top:8px !important;
  }
  .cta-card .social-follow > p{
    margin:0 0 7px !important;
    font-size:clamp(14px,4.25vw,17px) !important;
    line-height:1.12 !important;
  }
  .cta-card .contact-form{
    display:grid;
    gap:6px !important;
    width:100%;
    max-width:100%;
    margin-top:0 !important;
  }
  .cta-card .contact-form .form-row{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:16px !important;
    border-radius:6px !important;
  }
  .cta-card .contact-form textarea{
    height:40px !important;
    min-height:40px !important;
    padding:8px 10px !important;
    font-size:16px !important;
    line-height:1.2 !important;
    border-radius:6px !important;
  }
  .cta-card .form-consent{
    grid-template-columns:16px 1fr !important;
    gap:7px !important;
    margin:0 !important;
    font-size:8.7px !important;
    line-height:1.22 !important;
  }
  .cta-card .contact-form .form-consent input{
    width:16px !important;
    height:16px !important;
    min-height:16px !important;
  }
  .cta-card .contact-form .form-submit{
    min-height:36px !important;
    padding:8px 14px !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }
  .cta-card .social-follow .social-icons{
    display:flex !important;
    justify-content:center !important;
    gap:16px !important;
    margin-top:6px !important;
    padding-bottom:0 !important;
  }
  .cta-card .social-icons a{
    width:28px !important;
    height:28px !important;
  }
  .cta-card .social-icons svg{
    width:24px !important;
    height:24px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card{
    --y:-46px;
    height:calc(100svh - 92px) !important;
    max-height:calc(100svh - 92px) !important;
    padding:13px 20px 12px !important;
  }
  .cta-card .logo-mark{
    top:12px !important;
    left:20px !important;
    width:88px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:46px !important;
  }
  .cta-card h2{
    font-size:clamp(21px,6vw,25px) !important;
    line-height:1 !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:5px !important;
    font-size:9.4px !important;
    line-height:1.22 !important;
  }
  .cta-card .social-follow{
    margin-top:6px !important;
  }
  .cta-card .social-follow > p{
    font-size:13.5px !important;
    margin-bottom:5px !important;
  }
  .cta-card .contact-form{
    gap:5px !important;
  }
  .cta-card .contact-form .form-row{
    gap:5px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:33px !important;
    min-height:33px !important;
  }
  .cta-card .contact-form textarea{
    height:34px !important;
    min-height:34px !important;
    padding-block:7px !important;
  }
  .cta-card .form-consent{
    font-size:7.8px !important;
    line-height:1.16 !important;
  }
  .cta-card .contact-form .form-submit{
    min-height:34px !important;
    padding:7px 12px !important;
    font-size:11.5px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:3px !important;
  }
}

/* Mobile contact card: keep the same card size as the rest of the deck. */
@media (max-width:820px){
  .cta-card{
    width:88vw !important;
    min-width:88vw !important;
    height:min(84svh, calc(88vw * 16 / 9)) !important;
    max-height:84svh !important;
    min-height:0 !important;
    padding:18px 22px 16px !important;
  }
  .cta-card .logo-mark{
    top:16px !important;
    left:22px !important;
    width:clamp(88px,26vw,118px) !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:clamp(42px,11vw,58px) !important;
  }
  .cta-card h2{
    font-size:clamp(23px,6.45vw,31px) !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:7px !important;
    font-size:clamp(9.5px,2.75vw,12px) !important;
    line-height:1.22 !important;
  }
  .cta-card .social-follow{
    margin-top:7px !important;
  }
  .cta-card .social-follow > p{
    margin-bottom:5px !important;
    font-size:clamp(13px,3.8vw,15px) !important;
  }
  .cta-card .contact-form{
    gap:5px !important;
  }
  .cta-card .contact-form .form-row{
    gap:5px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:32px !important;
    min-height:32px !important;
    padding:0 10px !important;
    font-size:15px !important;
  }
  .cta-card .contact-form textarea{
    height:34px !important;
    min-height:34px !important;
    padding:7px 10px !important;
    font-size:14px !important;
    line-height:1.15 !important;
  }
  .cta-card .form-consent{
    grid-template-columns:15px 1fr !important;
    gap:6px !important;
    font-size:7.7px !important;
    line-height:1.16 !important;
  }
  .cta-card .contact-form .form-consent input{
    width:15px !important;
    height:15px !important;
    min-height:15px !important;
  }
  .cta-card .contact-form .form-submit{
    min-height:32px !important;
    padding:7px 12px !important;
    font-size:11.5px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:4px !important;
  }
  .cta-card .social-icons a{
    width:26px !important;
    height:26px !important;
  }
  .cta-card .social-icons svg{
    width:22px !important;
    height:22px !important;
  }
}

@media (max-width:430px){
  .cta-card{
    height:min(76svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 150px) !important;
    padding:14px 20px 13px !important;
  }
  .cta-card .logo-mark{
    top:13px !important;
    left:20px !important;
    width:84px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:40px !important;
  }
  .cta-card h2{
    font-size:clamp(20px,5.8vw,24px) !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    font-size:8.9px !important;
    line-height:1.18 !important;
  }
  .cta-card .social-follow > p{
    font-size:12.5px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card{
    --y:-18px;
    height:min(76svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 150px) !important;
    padding:12px 20px 12px !important;
  }
  .cta-card .logo-mark{
    top:12px !important;
    width:78px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:36px !important;
  }
  .cta-card h2{
    font-size:clamp(19px,5.45vw,22px) !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:4px !important;
    font-size:8.2px !important;
  }
  .cta-card .social-follow{
    margin-top:5px !important;
  }
  .cta-card .contact-form{
    gap:4px !important;
  }
  .cta-card .contact-form .form-row{
    gap:4px !important;
  }
  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:30px !important;
    min-height:30px !important;
    font-size:14px !important;
  }
  .cta-card .contact-form textarea{
    height:31px !important;
    min-height:31px !important;
    font-size:13px !important;
  }
  .cta-card .form-consent{
    font-size:7px !important;
    line-height:1.1 !important;
  }
  .cta-card .contact-form .form-submit{
    min-height:30px !important;
    font-size:11px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:2px !important;
  }
}

/* Mobile typography fill: larger content without changing card dimensions. */
@media (max-width:820px){
  .card:not(.hero-card):not(.cta-card){
    align-content:space-between !important;
    gap:clamp(18px,5vw,28px) !important;
  }
  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(36px,9.4vw,48px) !important;
    line-height:1 !important;
    letter-spacing:-.052em !important;
    margin:18px 0 16px !important;
  }
  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(16px,4.35vw,20px) !important;
    line-height:1.42 !important;
  }
  .card .note{
    width:min(76vw,330px) !important;
    padding:24px !important;
    font-size:clamp(19px,4.85vw,25px) !important;
    line-height:1.18 !important;
  }
  .card .checks{
    margin-top:clamp(11px,2.8vw,16px) !important;
    font-size:clamp(15px,4vw,20px) !important;
    line-height:1.12 !important;
    gap:6px !important;
  }
  .hero-card h1{
    font-size:clamp(40px,10.8vw,56px) !important;
    line-height:1.02 !important;
  }
  .hero-card p{
    font-size:clamp(16px,4.2vw,20px) !important;
    line-height:1.45 !important;
  }
}

@media (max-width:430px){
  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(31px,8.7vw,40px) !important;
    margin:15px 0 13px !important;
  }
  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(14.8px,4vw,17px) !important;
    line-height:1.42 !important;
  }
  .card .note{
    width:min(76vw,282px) !important;
    padding:20px !important;
    font-size:clamp(17px,4.7vw,21px) !important;
  }
  .card .checks{
    display:grid !important;
    font-size:clamp(13px,3.65vw,16px) !important;
    line-height:1.08 !important;
    gap:4px !important;
  }
  .hero-card h1{
    font-size:clamp(34px,9.4vw,45px) !important;
  }
  .hero-card p{
    font-size:clamp(14px,3.9vw,17px) !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(29px,8vw,36px) !important;
  }
  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(13.5px,3.7vw,15.5px) !important;
  }
  .card .note{
    width:min(74vw,262px) !important;
    padding:18px !important;
    font-size:clamp(15.5px,4.25vw,18.5px) !important;
  }
  .card .checks{
    font-size:clamp(12px,3.25vw,14px) !important;
  }
}

/* Mobile contact-card breathing room: keep content higher and leave the lower paper area clear. */
@media (max-width:820px){
  .cta-card > div:not(.logo-mark){
    justify-content:flex-start !important;
  }
  .cta-card h2{
    margin-top:0 !important;
  }
  .cta-card .social-follow{
    margin-bottom:clamp(18px,5.5vw,34px) !important;
  }
}

@media (max-width:430px){
  .cta-card{
    padding-bottom:24px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:38px !important;
  }
  .cta-card h2{
    font-size:clamp(19px,5.55vw,23px) !important;
    line-height:1 !important;
  }
  .cta-card > div:not(.logo-mark) > p{
    margin-top:7px !important;
  }
  .cta-card .social-follow{
    margin-bottom:42px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:7px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card{
    padding-bottom:22px !important;
  }
  .cta-card > div:not(.logo-mark){
    padding-top:34px !important;
  }
  .cta-card h2{
    font-size:clamp(18px,5.15vw,21px) !important;
  }
  .cta-card .social-follow{
    margin-bottom:34px !important;
  }
}

/* Mobile contact form: distribute elements and place social icons at the bottom of the card. */
@media (max-width:820px){
  .cta-card > div:not(.logo-mark){
    min-height:100%;
  }
  .cta-card .social-follow{
    flex:1 1 auto;
    min-height:0;
    margin-bottom:0 !important;
  }
  .cta-card .contact-form{
    flex:0 0 auto;
  }
  .cta-card .social-follow .social-icons{
    margin-top:auto !important;
    padding-top:clamp(14px,4vw,22px) !important;
    padding-bottom:clamp(8px,2.6vw,14px) !important;
  }
}

@media (max-width:430px){
  .cta-card .social-follow .social-icons{
    padding-top:18px !important;
    padding-bottom:10px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card .social-follow .social-icons{
    padding-top:14px !important;
    padding-bottom:8px !important;
  }
}

/* Mobile contact form: move consent, submit and social links into a calmer lower block. */
@media (max-width:820px){
  .cta-card .social-follow{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }
  .cta-card .contact-form{
    display:grid !important;
    gap:5px !important;
  }
  .cta-card .form-consent{
    margin-top:clamp(14px,4.5vw,24px) !important;
  }
  .cta-card .contact-form .form-submit{
    margin-top:clamp(9px,3.2vw,18px) !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:clamp(14px,4.5vw,24px) !important;
    padding-top:0 !important;
    padding-bottom:clamp(10px,3vw,16px) !important;
  }
}

@media (max-width:430px){
  .cta-card .form-consent{
    margin-top:18px !important;
  }
  .cta-card .contact-form .form-submit{
    margin-top:12px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:18px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card .form-consent{
    margin-top:14px !important;
  }
  .cta-card .contact-form .form-submit{
    margin-top:10px !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:14px !important;
  }
}

/* Mobile consent readability: clearer gap, larger tap target and stronger privacy link. */
.cta-card .form-consent{
  align-items:flex-start !important;
}

.cta-card .form-consent span{
  display:block;
  padding-top:1px;
}

.cta-card .form-consent a{
  color:#080808 !important;
  font-weight:950 !important;
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:3px;
  text-underline-offset:2px;
}

@media (max-width:820px){
  .cta-card .form-consent{
    grid-template-columns:20px 1fr !important;
    gap:12px !important;
    margin-top:clamp(16px,5vw,26px) !important;
    font-size:clamp(9.4px,2.55vw,11.5px) !important;
    line-height:1.36 !important;
  }
  .cta-card .contact-form .form-consent input{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
  }
}

@media (max-width:430px){
  .cta-card .form-consent{
    grid-template-columns:19px 1fr !important;
    gap:11px !important;
    margin-top:18px !important;
    font-size:9.8px !important;
    line-height:1.32 !important;
  }
  .cta-card .contact-form .form-consent input{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card .form-consent{
    gap:10px !important;
    margin-top:15px !important;
    font-size:9px !important;
    line-height:1.28 !important;
  }
}

/* Hero social links: same icon component as the contact slide. */
.hero-actions{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
  flex-wrap:wrap;
  margin-top:36px;
}

.hero-actions .btn{
  flex:0 0 auto;
}

.hero-social{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero-social p{
  margin:0 !important;
  color:#161616 !important;
  font:900 14px/1.15 var(--font-heading) !important;
  letter-spacing:.01em;
}

.hero-social-icons{
  gap:10px;
}

@media (max-width:820px){
  .hero-actions{
    align-items:flex-start;
    gap:16px;
    margin-top:26px;
  }
  .hero-social{
    width:100%;
  }
  .hero-social-icons{
    gap:10px;
  }
  .social-icons a{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  .social-icons svg{
    width:24px !important;
    height:24px !important;
  }
}

@media (max-width:430px){
  .hero-actions{
    margin-top:22px;
  }
  .hero-social{
    gap:12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .social-icons a:hover{
    transform:none;
  }
}

/* Contact success view: keep the thank-you message inside the final card. */
.contact-success h3:focus{
  outline:none;
}

.contact-success h3:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:6px;
}

@media (min-width:821px){
  .cta-card .social-follow.is-success{
    top:clamp(46px,7vh,78px);
    bottom:auto;
    width:clamp(300px,25vw,370px);
  }
  .cta-card .social-follow.is-success .contact-success{
    justify-items:center;
    gap:clamp(9px,1.1vw,14px);
    max-width:100%;
    text-align:center;
  }
  .cta-card .social-follow.is-success .contact-success h3{
    font-size:clamp(30px,2.8vw,44px);
    line-height:.98;
  }
  .cta-card .social-follow.is-success .contact-success p{
    max-width:340px !important;
    font-size:clamp(14px,1vw,17px) !important;
    line-height:1.3 !important;
  }
  .cta-card .social-follow.is-success .contact-response-time{
    margin-top:clamp(4px,.7vw,10px) !important;
  }
  .cta-card .social-follow.is-success .contact-success .btn{
    margin-top:clamp(3px,.7vw,8px);
  }
  .cta-card .social-follow.is-success .contact-social-note{
    margin-top:clamp(6px,.9vw,12px) !important;
  }
  .cta-card .social-follow.is-success .contact-success .social-icons{
    margin-top:clamp(3px,.6vw,8px);
  }
}

@media (min-width:821px) and (max-height:760px){
  .cta-card .social-follow.is-success{
    top:34px;
    width:clamp(285px,24vw,340px);
  }
  .cta-card .social-follow.is-success .contact-success{
    gap:8px;
  }
  .cta-card .social-follow.is-success .contact-success h3{
    font-size:clamp(28px,2.45vw,36px);
  }
  .cta-card .social-follow.is-success .contact-success p{
    font-size:14px !important;
    line-height:1.24 !important;
  }
  .cta-card .social-follow.is-success .contact-success .btn{
    min-height:42px;
    padding:10px 18px;
  }
}

@media (max-width:820px){
  .cta-card .social-follow.is-success{
    justify-content:flex-start !important;
  }
  .cta-card .social-follow.is-success .contact-success{
    gap:clamp(9px,2.7vw,14px);
    max-width:100%;
    text-align:left;
  }
  .cta-card .social-follow.is-success .contact-success h3{
    font-size:clamp(25px,7vw,34px);
    line-height:1.02;
  }
  .cta-card .social-follow.is-success .contact-success p{
    font-size:clamp(12px,3.4vw,15px) !important;
    line-height:1.32 !important;
  }
  .cta-card .social-follow.is-success .contact-success .btn{
    width:100%;
    margin-top:4px;
  }
  .cta-card .social-follow.is-success .contact-success .social-icons{
    justify-content:flex-start;
    margin-top:2px !important;
  }
}

@media (max-width:430px){
  .cta-card .social-follow.is-success .contact-success{
    gap:9px;
  }
  .cta-card .social-follow.is-success .contact-success h3{
    font-size:clamp(23px,6.35vw,28px);
  }
  .cta-card .social-follow.is-success .contact-success p{
    font-size:12px !important;
    line-height:1.25 !important;
  }
}

/* Mobile contact card: reserve real space for the logo so it never overlaps the form. */
@media (max-width:820px){
  .cta-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:clamp(10px,3vw,16px) !important;
  }
  .cta-card .logo-mark{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:clamp(96px,27vw,126px) !important;
    margin:0 0 clamp(2px,1vw,6px) !important;
    flex:0 0 auto !important;
  }
  .cta-card > div:not(.logo-mark){
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    padding-top:0 !important;
  }
  .cta-card .social-follow{
    flex:1 1 auto !important;
    min-height:0 !important;
  }
}

@media (max-width:430px){
  .cta-card{
    gap:10px !important;
  }
  .cta-card .logo-mark{
    width:clamp(92px,26vw,112px) !important;
    margin-bottom:2px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .cta-card{
    gap:8px !important;
    height:min(79svh, calc(88vw * 16 / 9)) !important;
  }
  .cta-card .logo-mark{
    width:88px !important;
    margin-bottom:0 !important;
  }
  .cta-card .social-follow .social-icons{
    margin-top:10px !important;
    padding-bottom:0 !important;
  }
}

@media (max-width:360px){
  .cta-card .social-follow .social-icons{
    margin-top:6px !important;
  }
  .cta-card .social-icons a{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }
  .cta-card .social-icons svg{
    width:22px !important;
    height:22px !important;
  }
}

/* Mobile hero card: give the logo its own row, just like on the contact card. */
@media (max-width:820px){
  .hero-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:clamp(8px,2.5vw,14px) !important;
  }
  .hero-card .logo-mark{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:clamp(108px,30vw,136px) !important;
    margin:0 0 clamp(10px,3vw,16px) !important;
    flex:0 0 auto !important;
  }
  .hero-card > div:not(.logo-mark){
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    padding-top:0 !important;
  }
  .hero-card .tag{
    align-self:flex-start;
    margin-top:0 !important;
  }
}

@media (max-width:430px){
  .hero-card{
    gap:8px !important;
  }
  .hero-card .logo-mark{
    width:clamp(100px,28vw,118px) !important;
    margin-bottom:12px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .hero-card{
    gap:7px !important;
  }
  .hero-card .logo-mark{
    width:96px !important;
    margin-bottom:10px !important;
  }
}

/* Mobile performance mode: static background and lighter compositing. */
@media (max-width:820px){
  #dotsCanvas{
    display:none !important;
  }
  body:after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(circle, rgba(28,28,28,.38) 0 2px, transparent 2.4px) 9vw 10vh / 122px 148px,
      radial-gradient(circle, rgba(28,28,28,.28) 0 1.6px, transparent 2px) 62vw 6vh / 158px 174px,
      radial-gradient(circle, rgba(255,203,87,.26) 0 1.7px, transparent 2.1px) 26vw 78vh / 136px 152px;
    opacity:.72;
    transform:translateZ(0);
  }
  body.theme-sunset:after,
  body.theme-night:after{
    background:
      radial-gradient(circle, rgba(255,203,87,.46) 0 2px, transparent 2.4px) 9vw 10vh / 122px 148px,
      radial-gradient(circle, rgba(255,203,87,.32) 0 1.6px, transparent 2px) 62vw 6vh / 158px 174px,
      radial-gradient(circle, rgba(255,203,87,.22) 0 1.7px, transparent 2.1px) 26vw 78vh / 136px 152px;
  }
  .track{
    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
  }
  .card{
    will-change:transform;
    transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.965) !important;
    box-shadow:
      0 18px 38px rgba(0,0,0,.18),
      0 4px 9px rgba(0,0,0,.10),
      inset 0 0 0 1px rgba(255,255,255,.52) !important;
    transition:none !important;
  }
  .card.is-active,
  .hero-card,
  .cta-card,
  .hero-card.is-active,
  .cta-card.is-active{
    box-shadow:
      0 20px 44px rgba(0,0,0,.22),
      0 5px 11px rgba(0,0,0,.11),
      inset 0 0 0 1px rgba(255,255,255,.58) !important;
  }
  .note{
    box-shadow:
      0 10px 20px rgba(0,0,0,.13),
      0 2px 5px rgba(96,67,0,.10),
      inset 0 1px 0 rgba(255,255,255,.45) !important;
  }
  .card:before{
    opacity:.38 !important;
  }
  .social-icons a,
  .contact-form .form-submit,
  .btn{
    transition:background .16s ease, color .16s ease !important;
  }
}

/* Mobile fit pass: keep hero/contact actions inside their paper cards. */
@media (max-width:820px){
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    align-self:flex-start !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero-card .logo-mark{
    width:clamp(96px,27vw,118px) !important;
    margin-bottom:clamp(6px,2vw,10px) !important;
  }

  .hero-card > div:not(.logo-mark){
    justify-content:flex-start !important;
  }

  .hero-card .tag{
    max-width:100% !important;
    font-size:clamp(10px,2.8vw,13px) !important;
    line-height:1 !important;
    padding:4px 8px !important;
    white-space:normal !important;
  }

  .hero-card h1{
    font-size:clamp(30px,8.1vw,42px) !important;
    line-height:.98 !important;
    margin-top:10px !important;
  }

  .hero-card p{
    margin-top:clamp(18px,4vw,26px) !important;
    font-size:clamp(15px,4vw,19px) !important;
    line-height:1.38 !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:clamp(12px,3vw,18px) !important;
    margin-top:clamp(16px,4vw,24px) !important;
  }

  .hero-actions .btn{
    width:max-content !important;
    min-height:44px !important;
    padding:12px 22px !important;
    font-size:clamp(14px,3.8vw,17px) !important;
  }

  .hero-social{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    flex-wrap:nowrap !important;
  }

  .hero-social p{
    flex:1 1 auto !important;
    min-width:0 !important;
    font-size:clamp(13px,3.6vw,17px) !important;
    line-height:1.05 !important;
  }

  .hero-social-icons{
    flex:0 0 auto !important;
    gap:10px !important;
  }

  .hero-card .social-icons a{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .hero-card .social-icons svg{
    width:23px !important;
    height:23px !important;
  }

  .cta-card .logo-mark{
    width:clamp(84px,24vw,104px) !important;
    margin-bottom:0 !important;
  }

  .cta-card h2{
    font-size:clamp(23px,6.35vw,31px) !important;
    line-height:1 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    margin-top:clamp(8px,2.4vw,12px) !important;
    font-size:clamp(10px,2.7vw,12px) !important;
    line-height:1.28 !important;
  }

  .cta-card .social-follow{
    margin-top:clamp(8px,2.5vw,12px) !important;
  }

  .cta-card .social-follow > p{
    margin-bottom:6px !important;
    font-size:clamp(14px,3.8vw,17px) !important;
    line-height:1 !important;
  }

  .cta-card .contact-form{
    gap:6px !important;
    margin-top:0 !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:38px !important;
    min-height:38px !important;
    padding:0 12px !important;
    font-size:16px !important;
  }

  .cta-card .contact-form textarea{
    height:38px !important;
    min-height:38px !important;
    padding:9px 12px !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  .cta-card .form-consent{
    margin-top:10px !important;
    gap:10px !important;
    font-size:clamp(9px,2.45vw,11px) !important;
    line-height:1.25 !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:38px !important;
    margin-top:8px !important;
    padding:8px 14px !important;
    font-size:clamp(12px,3.3vw,14px) !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:8px !important;
    padding:0 !important;
    gap:12px !important;
    justify-content:center !important;
  }

  .cta-card .social-icons a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .cta-card .social-icons svg{
    width:22px !important;
    height:22px !important;
  }
}

@media (max-width:430px){
  .hero-card .logo-mark{
    width:96px !important;
    margin-bottom:7px !important;
  }

  .hero-card h1{
    font-size:clamp(29px,7.75vw,36px) !important;
  }

  .hero-card p{
    font-size:clamp(14px,3.75vw,17px) !important;
  }

  .hero-actions{
    gap:12px !important;
    margin-top:16px !important;
  }

  .hero-card .social-icons a{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }

  .cta-card .logo-mark{
    width:84px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:36px !important;
    min-height:36px !important;
  }

  .cta-card .contact-form textarea{
    height:36px !important;
    min-height:36px !important;
  }

  .cta-card .form-consent{
    margin-top:9px !important;
    font-size:9px !important;
  }
}

@media (max-width:430px) and (max-height:700px){
  .hero-card h1{
    font-size:clamp(27px,7.2vw,33px) !important;
  }

  .hero-card p{
    margin-top:14px !important;
    font-size:14px !important;
  }

  .hero-actions .btn{
    min-height:40px !important;
    padding:10px 18px !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .hero-card .social-icons svg,
  .cta-card .social-icons svg{
    width:20px !important;
    height:20px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:34px !important;
    min-height:34px !important;
  }

  .cta-card .contact-form textarea{
    height:34px !important;
    min-height:34px !important;
  }

  .cta-card .form-consent{
    margin-top:8px !important;
    font-size:8.5px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:34px !important;
    margin-top:7px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:6px !important;
  }
}

/* Desktop restore: keep the wide layout independent from mobile fit fixes. */
@media (min-width:821px){
  .card:not(.hero-card):not(.cta-card){
    align-items:center !important;
    gap:clamp(42px,5vw,82px) !important;
    padding:clamp(42px,4vw,66px) !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    align-self:center !important;
    max-width:min(680px,47vw) !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    max-width:min(680px,47vw) !important;
    margin:clamp(20px,2vw,30px) 0 clamp(18px,1.8vw,26px) !important;
    font-size:clamp(44px,4.25vw,70px) !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    max-width:min(640px,44vw) !important;
    font-size:clamp(18px,1.45vw,23px) !important;
    line-height:1.38 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    justify-self:center !important;
    align-self:center !important;
    width:clamp(320px,28vw,460px) !important;
    min-height:clamp(320px,28vw,460px) !important;
    padding:clamp(34px,3.4vw,54px) !important;
    font-size:clamp(20px,1.62vw,27px) !important;
    line-height:1.22 !important;
  }

  .cta-card{
    display:block !important;
    padding:clamp(42px,4vw,66px) !important;
  }

  .cta-card .logo-mark{
    position:absolute !important;
    top:clamp(34px,3.4vw,54px) !important;
    left:clamp(42px,4vw,64px) !important;
    width:clamp(150px,13vw,210px) !important;
    margin:0 !important;
  }

  .cta-card > div:not(.logo-mark){
    position:static !important;
    width:min(56vw,760px) !important;
    max-width:min(56vw,760px) !important;
    padding-top:clamp(92px,9vw,130px) !important;
  }

  .cta-card > div:not(.logo-mark) > h2,
  .cta-card > div:not(.logo-mark) > p{
    position:relative !important;
    z-index:4 !important;
  }

  .cta-card h2{
    max-width:min(650px,47vw) !important;
    font-size:clamp(46px,4.05vw,64px) !important;
    line-height:1.03 !important;
    letter-spacing:-.02em !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    max-width:min(610px,43vw) !important;
    margin-top:22px !important;
    font-size:clamp(17px,1.25vw,21px) !important;
    line-height:1.45 !important;
  }

  .cta-card .social-follow{
    position:absolute !important;
    top:50% !important;
    right:clamp(60px,6.5vw,110px) !important;
    bottom:auto !important;
    width:clamp(330px,29vw,455px) !important;
    margin:0 !important;
    transform:translateY(-45%) !important;
    text-align:left !important;
    z-index:5 !important;
  }

  .cta-card .social-follow > p{
    margin:0 0 16px !important;
    font-size:clamp(22px,1.45vw,28px) !important;
    line-height:1.05 !important;
    text-align:left !important;
  }

  .cta-card .contact-form{
    gap:12px !important;
    margin-top:0 !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:52px !important;
    min-height:52px !important;
    padding:0 14px !important;
    font-size:15px !important;
  }

  .cta-card .contact-form textarea{
    height:88px !important;
    min-height:88px !important;
    padding:14px !important;
    font-size:15px !important;
    line-height:1.35 !important;
  }

  .cta-card .form-consent{
    margin-top:4px !important;
    gap:12px !important;
    grid-template-columns:22px 1fr !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }

  .cta-card .contact-form .form-submit{
    width:100% !important;
    min-height:52px !important;
    margin-top:18px !important;
    padding:12px 22px !important;
    font-size:16px !important;
  }

  .cta-card .social-follow .social-icons{
    justify-content:center !important;
    gap:18px !important;
    margin-top:18px !important;
  }

  .cta-card .social-icons a{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }

  .cta-card .social-icons svg{
    width:26px !important;
    height:26px !important;
  }
}

@media (min-width:821px) and (max-height:760px){
  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(40px,3.75vw,62px) !important;
    line-height:.96 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(17px,1.25vw,20px) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:clamp(300px,25vw,410px) !important;
    min-height:clamp(300px,25vw,410px) !important;
    padding:clamp(28px,3vw,44px) !important;
    font-size:clamp(18px,1.42vw,24px) !important;
  }

  .cta-card h2{
    font-size:clamp(42px,3.6vw,58px) !important;
  }

  .cta-card .social-follow{
    transform:translateY(-47%) !important;
    width:clamp(320px,28vw,430px) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:46px !important;
    min-height:46px !important;
  }

  .cta-card .contact-form textarea{
    height:74px !important;
    min-height:74px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:48px !important;
    margin-top:14px !important;
  }
}

/* Final pinned note: transparent horizontal asset rotated together with text. */
.card:not(.hero-card):not(.cta-card) .note{
  width:clamp(420px,34vw,640px) !important;
  height:clamp(273px,22.1vw,416px) !important;
  min-height:auto !important;
  aspect-ratio:800 / 520 !important;
  display:block !important;
  position:relative !important;
  justify-self:center !important;
  align-self:center !important;
  padding:0 !important;
  overflow:visible !important;
  color:#17130a !important;
  background-color:transparent !important;
  background-image:url("../images/na-serio-karteczka.png") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-transform:translateZ(0) rotate(-4deg) !important;
  transform:translateZ(0) rotate(-4deg) !important;
  -webkit-transform-origin:center center !important;
  transform-origin:center center !important;
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
  isolation:isolate !important;
}

.card:nth-child(2n):not(.hero-card):not(.cta-card) .note{
  -webkit-transform:translateZ(0) rotate(-4deg) !important;
  transform:translateZ(0) rotate(-4deg) !important;
}

.card .note:before,
.card .note:after{
  display:none !important;
}

.card .note .checks{
  display:none !important;
}

.card .note .note-effect{
  position:absolute !important;
  left:17% !important;
  top:42% !important;
  width:66% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(24px,1.85vw,34px) !important;
  line-height:1.05 !important;
  text-align:center !important;
  text-wrap:normal !important;
  -webkit-transform:none !important;
  transform:none !important;
  -webkit-transform-origin:center center !important;
  transform-origin:center center !important;
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}

.card .note .note-effect b{
  display:block !important;
  margin:0 0 .28em !important;
  font-weight:900 !important;
}

.card:nth-child(4) .note .note-effect,
.card:nth-child(6) .note .note-effect,
.card:nth-child(7) .note .note-effect{
  left:16% !important;
  top:41% !important;
  width:68% !important;
  font-size:clamp(22px,1.62vw,30px) !important;
  line-height:1.03 !important;
}

.card:nth-child(6) .note .note-effect{
  font-size:clamp(20px,1.48vw,28px) !important;
  line-height:1.02 !important;
}

@media (max-width:820px){
  .card:not(.hero-card):not(.cta-card){
    grid-template-rows:auto minmax(0, 1fr) !important;
    grid-template-columns:minmax(0, 1fr) !important;
    align-content:stretch !important;
    justify-items:center !important;
    gap:0 !important;
    min-height:0 !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    width:100% !important;
    align-self:start !important;
    justify-self:stretch !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    grid-column:1 / -1 !important;
    width:min(86%, 340px) !important;
    height:min(65vw, 221px) !important;
    max-width:340px !important;
    max-height:221px !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
  }

  .card .note .note-effect{
    left:17% !important;
    top:35% !important;
    width:66% !important;
    font-size:clamp(16px,4.35vw,21px) !important;
    line-height:1.02 !important;
  }

  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:16% !important;
    top:34.5% !important;
    width:68% !important;
    font-size:clamp(14px,3.85vw,18px) !important;
    line-height:1.01 !important;
  }

  .card:nth-child(6) .note .note-effect{
    font-size:clamp(13px,3.55vw,17px) !important;
    line-height:1 !important;
  }
}

@media (max-width:430px){
  .card:not(.hero-card):not(.cta-card) .note{
    width:min(86%, 315px) !important;
    height:min(65vw, 205px) !important;
    max-width:315px !important;
    max-height:205px !important;
  }

  .card .note .note-effect{
    top:35% !important;
    font-size:clamp(15px,4.15vw,19px) !important;
  }

  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    top:34.5% !important;
    font-size:clamp(13px,3.65vw,17px) !important;
  }

  .card:nth-child(6) .note .note-effect{
    font-size:clamp(12.2px,3.35vw,15.5px) !important;
  }
}

@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    html{
      scroll-behavior:auto !important;
    }

    body:after{
      display:none !important;
    }

    .track{
      -webkit-backface-visibility:hidden !important;
      backface-visibility:hidden !important;
      contain:layout style paint !important;
    }

    .card:not(.hero-card):not(.cta-card){
      height:min(84svh, calc(88vw * 16 / 9)) !important;
      max-height:84svh !important;
      -webkit-transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.965) !important;
      transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.965) !important;
      will-change:auto !important;
      contain:layout paint style !important;
      box-shadow:
        0 14px 30px rgba(0,0,0,.16),
        0 3px 8px rgba(0,0,0,.10),
        inset 0 0 0 1px rgba(255,255,255,.52) !important;
    }

    .card:not(.hero-card):not(.cta-card) .note{
      width:86% !important;
      height:auto !important;
      aspect-ratio:800 / 520 !important;
      -webkit-transform:translate3d(0,0,0) rotate(-4deg) !important;
      transform:translate3d(0,0,0) rotate(-4deg) !important;
      -webkit-backface-visibility:hidden !important;
      backface-visibility:hidden !important;
      will-change:auto !important;
    }

    .card .note .note-effect{
      top:35% !important;
      font-size:clamp(15.5px,4.25vw,20px) !important;
      line-height:1.02 !important;
    }

    .card:nth-child(4) .note .note-effect,
    .card:nth-child(6) .note .note-effect,
    .card:nth-child(7) .note .note-effect{
      top:34.5% !important;
      font-size:clamp(13.5px,3.75vw,17.5px) !important;
      line-height:1 !important;
    }

    .card:nth-child(6) .note .note-effect{
      font-size:clamp(12.5px,3.45vw,16px) !important;
    }
  }

  @media (max-width:430px){
    .card:not(.hero-card):not(.cta-card) .note{
      width:86% !important;
    }
  }
}

/* Phone landscape: show the wide/desktop composition instead of the portrait mobile stack. */
@media (max-width:820px) and (orientation:landscape){
  .stage{
    height:820vh !important;
  }

  .viewport{
    height:100vh !important;
    align-items:center !important;
  }

  .track{
    gap:4.2vw !important;
    padding-left:7vw !important;
    align-items:center !important;
    will-change:transform !important;
  }

  .card{
    width:82vw !important;
    min-width:82vw !important;
    height:min(86svh, 86vh) !important;
    max-height:none !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1.08fr .72fr !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    align-content:center !important;
    justify-items:stretch !important;
    gap:clamp(18px,3.4vw,34px) !important;
    padding:clamp(18px,4.6vh,34px) clamp(26px,4vw,44px) !important;
    border-radius:28px !important;
    overflow:visible !important;
    transform:
      translate3d(0,0,0)
      translateY(calc(var(--y,0px) + var(--lift, 0px)))
      rotate(var(--r,0deg))
      scale(var(--scale, .965)) !important;
    transition:
      opacity .42s ease,
      transform .42s ease,
      box-shadow .42s ease !important;
  }

  .hero-card,
  .cta-card{
    grid-template-columns:1fr !important;
    display:grid !important;
    align-items:center !important;
    align-content:center !important;
    justify-content:stretch !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:absolute !important;
    top:clamp(18px,5vh,34px) !important;
    left:clamp(26px,4vw,44px) !important;
    width:clamp(108px,15vw,170px) !important;
    margin:0 !important;
    align-self:auto !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    display:block !important;
    width:min(57vw,620px) !important;
    max-width:min(57vw,620px) !important;
    padding-top:clamp(34px,9vh,56px) !important;
  }

  .hero-card .tag{
    display:inline-block !important;
    width:auto !important;
    max-width:100% !important;
    padding:4px 10px !important;
    font-size:clamp(9px,1.7vw,12px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-card h1,
  .cta-card h2{
    max-width:min(57vw,620px) !important;
    margin:clamp(10px,2.6vh,16px) 0 0 !important;
    font-size:clamp(28px,5.5vw,54px) !important;
    line-height:.92 !important;
    letter-spacing:-.045em !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    max-width:min(48vw,540px) !important;
    margin-top:clamp(10px,2.6vh,16px) !important;
    font-size:clamp(12px,2vw,17px) !important;
    line-height:1.3 !important;
  }

  .hero-actions{
    display:flex !important;
    align-items:center !important;
    gap:clamp(12px,2.6vw,22px) !important;
    margin-top:clamp(12px,3.4vh,22px) !important;
  }

  .hero-actions .btn{
    width:auto !important;
    min-height:38px !important;
    padding:10px 18px !important;
    font-size:clamp(12px,1.9vw,15px) !important;
  }

  .hero-social{
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
  }

  .hero-social p{
    flex:0 0 auto !important;
    margin:0 !important;
    font-size:clamp(11px,1.75vw,14px) !important;
    white-space:nowrap !important;
  }

  .hero-social-icons,
  .cta-card .social-follow .social-icons{
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  .hero-card .social-icons svg,
  .cta-card .social-icons svg{
    width:21px !important;
    height:21px !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    width:100% !important;
    align-self:center !important;
    justify-self:stretch !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    max-width:min(48vw,540px) !important;
    margin:clamp(12px,2.5vh,18px) 0 clamp(10px,2vh,15px) !important;
    font-size:clamp(29px,5vw,48px) !important;
    line-height:.94 !important;
    letter-spacing:-.04em !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    max-width:min(43vw,500px) !important;
    font-size:clamp(12px,2vw,16px) !important;
    line-height:1.28 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    grid-column:auto !important;
    width:clamp(230px,31vw,350px) !important;
    height:auto !important;
    max-width:350px !important;
    max-height:none !important;
    aspect-ratio:800 / 520 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
    transform:translate3d(0,0,0) rotate(-4deg) !important;
  }

  .card .note .note-effect{
    left:17% !important;
    top:42% !important;
    width:66% !important;
    font-size:clamp(13px,2.15vw,19px) !important;
    line-height:1.03 !important;
  }

  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:16% !important;
    top:41% !important;
    width:68% !important;
    font-size:clamp(12px,1.92vw,17px) !important;
    line-height:1.01 !important;
  }

  .card:nth-child(6) .note .note-effect{
    font-size:clamp(11px,1.76vw,16px) !important;
  }

  .cta-card > div:not(.logo-mark){
    width:min(52vw,580px) !important;
    max-width:min(52vw,580px) !important;
    padding-top:clamp(34px,8vh,52px) !important;
  }

  .cta-card h2{
    max-width:min(47vw,500px) !important;
    font-size:clamp(24px,4vw,42px) !important;
    line-height:.96 !important;
    margin-top:0 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    max-width:min(43vw,470px) !important;
    font-size:clamp(10px,1.5vw,13px) !important;
    line-height:1.24 !important;
  }

  .cta-card .social-follow{
    position:absolute !important;
    top:50% !important;
    right:clamp(26px,5vw,54px) !important;
    bottom:auto !important;
    width:min(35vw,360px) !important;
    margin:0 !important;
    transform:translateY(-45%) !important;
    text-align:left !important;
  }

  .cta-card .social-follow > p{
    margin:0 0 8px !important;
    font-size:clamp(15px,2.1vw,20px) !important;
    line-height:1 !important;
    text-align:left !important;
  }

  .cta-card .contact-form{
    gap:6px !important;
    margin:0 !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:30px !important;
    min-height:30px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }

  .cta-card .contact-form textarea{
    height:42px !important;
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1.18 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:16px 1fr !important;
    gap:7px !important;
    margin-top:3px !important;
    font-size:8.5px !important;
    line-height:1.15 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:32px !important;
    margin-top:7px !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:8px !important;
  }

  .progress{
    left:7vw !important;
    right:7vw !important;
    bottom:18px !important;
  }

  .step-label{
    left:7vw !important;
    bottom:30px !important;
    font-size:11px !important;
  }
}

/* Tight portrait phones: keep notes and the contact form fully inside the card. */
@media (max-width:430px) and (max-height:760px) and (orientation:portrait){
  .card{
    height:min(78svh, calc(88vw * 16 / 9)) !important;
  }

  .card:not(.hero-card):not(.cta-card){
    padding:clamp(21px,5.3vw,26px) clamp(22px,5.8vw,28px) !important;
    align-content:space-between !important;
    gap:clamp(8px,2.6vw,14px) !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(27px,7.4vw,34px) !important;
    line-height:.98 !important;
    margin:clamp(9px,2.5vw,13px) 0 clamp(8px,2.3vw,12px) !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(12.5px,3.45vw,14.5px) !important;
    line-height:1.35 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(82%, 286px) !important;
    height:auto !important;
    max-width:286px !important;
    max-height:none !important;
    aspect-ratio:800 / 520 !important;
    align-self:center !important;
    justify-self:center !important;
  }

  .card .note .note-effect{
    top:33.5% !important;
    font-size:clamp(13px,3.62vw,16px) !important;
    line-height:1.02 !important;
  }

  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    top:33% !important;
    font-size:clamp(11.5px,3.2vw,14px) !important;
    line-height:1 !important;
  }

  .card:nth-child(6) .note .note-effect{
    font-size:clamp(10.8px,3vw,13px) !important;
  }

  .cta-card{
    padding:clamp(14px,3.8vw,18px) clamp(18px,5vw,24px) clamp(16px,4.5vw,22px) !important;
    gap:clamp(4px,1.5vw,7px) !important;
    overflow:visible !important;
  }

  .cta-card .logo-mark{
    width:clamp(74px,20vw,88px) !important;
    margin-bottom:0 !important;
  }

  .cta-card > div:not(.logo-mark){
    flex:1 1 auto !important;
    min-height:0 !important;
    padding-top:0 !important;
  }

  .cta-card h2{
    font-size:clamp(21px,5.65vw,25px) !important;
    line-height:.98 !important;
    margin:0 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    margin-top:clamp(6px,1.8vw,8px) !important;
    font-size:clamp(8.8px,2.45vw,10.5px) !important;
    line-height:1.22 !important;
  }

  .cta-card .social-follow{
    flex:1 1 auto !important;
    min-height:0 !important;
    margin-top:clamp(6px,1.8vw,8px) !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .cta-card .social-follow > p{
    margin:0 0 5px !important;
    font-size:clamp(13px,3.55vw,15px) !important;
    line-height:1 !important;
  }

  .cta-card .contact-form{
    gap:5px !important;
  }

  .cta-card .contact-form .form-row{
    gap:5px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:31px !important;
    min-height:31px !important;
    padding:0 10px !important;
    font-size:14px !important;
  }

  .cta-card .contact-form textarea{
    height:32px !important;
    min-height:32px !important;
    padding:8px 10px !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:17px 1fr !important;
    gap:9px !important;
    margin-top:9px !important;
    font-size:8.2px !important;
    line-height:1.18 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:34px !important;
    margin-top:9px !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:10px !important;
    padding:0 !important;
    gap:12px !important;
    flex:0 0 auto !important;
    justify-content:center !important;
  }

  .cta-card .social-icons a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .cta-card .social-icons svg{
    width:20px !important;
    height:20px !important;
  }
}

@media (max-width:380px) and (max-height:700px) and (orientation:portrait){
  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(25px,7.05vw,31px) !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:12.2px !important;
    line-height:1.3 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(80%, 260px) !important;
  }

  .card .note .note-effect{
    font-size:clamp(12px,3.38vw,14.5px) !important;
  }

  .cta-card h2{
    font-size:clamp(19px,5.35vw,22px) !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:8px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:29px !important;
    min-height:29px !important;
    font-size:13px !important;
  }

  .cta-card .contact-form textarea{
    height:30px !important;
    min-height:30px !important;
  }

  .cta-card .form-consent{
    margin-top:7px !important;
    font-size:7.6px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:31px !important;
    margin-top:7px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:8px !important;
  }
}

/* Final responsive safety layer: prevent cramped portrait phones from spilling CTAs outside the paper. */
@media (max-width:430px) and (orientation:portrait){
  .stage{
    height:880svh !important;
  }

  .viewport{
    height:100svh !important;
  }

  .track{
    padding-left:6vw !important;
    padding-right:6vw !important;
    gap:6vw !important;
  }

  .card{
    width:88vw !important;
    min-width:88vw !important;
    height:min(78svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 126px) !important;
    border-radius:clamp(24px,7vw,34px) !important;
  }

  .hero-card,
  .cta-card{
    padding:clamp(18px,5vw,26px) !important;
  }

  .hero-card .logo-mark,
  .cta-card .logo-mark{
    align-self:flex-start !important;
    width:clamp(82px,23vw,104px) !important;
  }

  .hero-card h1{
    font-size:clamp(29px,8.1vw,38px) !important;
    line-height:.98 !important;
    margin-top:clamp(8px,2.4vw,12px) !important;
  }

  .hero-card p{
    font-size:clamp(13.5px,3.75vw,16px) !important;
    line-height:1.36 !important;
    margin-top:clamp(14px,4vw,20px) !important;
  }

  .hero-actions{
    margin-top:auto !important;
    padding-top:clamp(12px,3.5vw,18px) !important;
    gap:clamp(10px,3vw,14px) !important;
  }

  .hero-social{
    align-items:center !important;
  }

  .hero-social p{
    font-size:clamp(12.5px,3.45vw,15px) !important;
  }

  .hero-card .social-icons a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .card:not(.hero-card):not(.cta-card){
    padding:clamp(22px,6vw,30px) !important;
    grid-template-rows:auto 1fr !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(27px,7.6vw,36px) !important;
    line-height:.98 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(12.5px,3.55vw,15px) !important;
    line-height:1.34 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(82%, 292px) !important;
    max-width:292px !important;
    align-self:center !important;
  }

  .cta-card{
    position:relative !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .cta-card > div:not(.logo-mark){
    display:block !important;
    width:100% !important;
    flex:0 0 auto !important;
    min-height:0 !important;
  }

  .cta-card h2{
    font-size:clamp(20px,5.6vw,25px) !important;
    line-height:.98 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(8.6px,2.42vw,10px) !important;
    line-height:1.22 !important;
    margin-top:6px !important;
  }

  .cta-card .social-follow{
    display:block !important;
    margin-top:6px !important;
    padding-bottom:84px !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(12.8px,3.55vw,15px) !important;
    margin:0 0 5px !important;
  }

  .cta-card .contact-form{
    display:grid !important;
    gap:5px !important;
    position:static !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:31px !important;
    min-height:31px !important;
    font-size:14px !important;
  }

  .cta-card .contact-form textarea{
    height:32px !important;
    min-height:32px !important;
    font-size:12.5px !important;
  }

  .cta-card .form-consent{
    grid-template-columns:17px 1fr !important;
    gap:9px !important;
    margin-top:8px !important;
    font-size:8px !important;
    line-height:1.18 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }

  .cta-card .contact-form .form-submit{
    position:absolute !important;
    left:clamp(18px,5vw,24px) !important;
    right:clamp(18px,5vw,24px) !important;
    bottom:58px !important;
    width:auto !important;
    min-height:34px !important;
    margin:0 !important;
    font-size:12px !important;
  }

  .cta-card .contact-default-social{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:17px !important;
    display:flex !important;
    justify-content:center !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .cta-card .social-icons a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

@media (max-width:360px) and (max-height:690px) and (orientation:portrait){
  .card{
    height:min(76svh, calc(88vw * 16 / 9)) !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(24px,7.05vw,30px) !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:11.8px !important;
    line-height:1.28 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(80%, 252px) !important;
  }

  .cta-card .logo-mark{
    width:76px !important;
  }

  .cta-card h2{
    font-size:18.5px !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:7.6px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:28px !important;
    min-height:28px !important;
    font-size:12.5px !important;
  }

  .cta-card .contact-form textarea{
    height:29px !important;
    min-height:29px !important;
  }

  .cta-card .form-consent{
    font-size:7.2px !important;
    line-height:1.12 !important;
  }

  .cta-card .social-follow{
    padding-bottom:70px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:30px !important;
    bottom:54px !important;
  }

  .cta-card .contact-default-social{
    bottom:15px !important;
  }
}

/* Landscape fine-tuning: keep desktop-like layout inside short viewports. */
@media (max-width:820px) and (orientation:landscape){
  .card:not(.hero-card):not(.cta-card) .note{
    width:clamp(198px,29vw,318px) !important;
    max-width:318px !important;
  }

  .card .note .note-effect{
    font-size:clamp(12px,1.92vw,17px) !important;
  }

  .card:nth-child(2) .note .note-effect{
    top:38% !important;
    font-size:clamp(11px,1.72vw,15px) !important;
    line-height:1 !important;
  }

  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    font-size:clamp(11px,1.72vw,15px) !important;
  }

  .cta-card .social-follow{
    transform:translateY(-50%) !important;
  }

  .cta-card .contact-form textarea{
    height:36px !important;
    min-height:36px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:30px !important;
    margin-top:5px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:5px !important;
  }
}

@media (min-width:821px) and (max-width:1180px) and (orientation:landscape){
  .cta-card .social-follow{
    transform:translateY(-53%) !important;
    width:clamp(300px,28vw,380px) !important;
  }

  .cta-card .contact-form{
    gap:8px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:44px !important;
    min-height:44px !important;
  }

  .cta-card .contact-form textarea{
    height:62px !important;
    min-height:62px !important;
  }

  .cta-card .form-consent{
    margin-top:2px !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:44px !important;
    margin-top:10px !important;
  }

  .cta-card .social-follow .social-icons{
    margin-top:10px !important;
  }
}

/* Consent checkbox: keep it a true square, never a stretched text input. */
.contact-form .form-consent input[type="checkbox"],
.cta-card .contact-form .form-consent input[type="checkbox"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  aspect-ratio:1 / 1 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:4px !important;
  justify-self:start !important;
  align-self:start !important;
  flex:0 0 18px !important;
}

@media (max-width:430px){
  .contact-form .form-consent input[type="checkbox"],
  .cta-card .contact-form .form-consent input[type="checkbox"]{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
    flex-basis:17px !important;
  }
}

/* Production responsive pass: keep mobile readable, restore static dots and make landscape desktop-like. */
@media (max-width:820px){
  #dotsCanvas{
    display:none !important;
  }

  body:after{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    opacity:.72 !important;
    background:
      radial-gradient(circle, rgba(28,28,28,.38) 0 2px, transparent 2.4px) 9vw 10vh / 122px 148px,
      radial-gradient(circle, rgba(28,28,28,.28) 0 1.6px, transparent 2px) 62vw 6vh / 158px 174px,
      radial-gradient(circle, rgba(255,203,87,.42) 0 1.8px, transparent 2.2px) 34vw 88vh / 142px 166px,
      radial-gradient(circle, rgba(28,28,28,.24) 0 1.4px, transparent 1.9px) 78vw 68vh / 132px 156px !important;
    transform:translateZ(0) !important;
  }

  body.theme-night:after,
  body.theme-sunset:after{
    background:
      radial-gradient(circle, rgba(255,203,87,.40) 0 1.8px, transparent 2.2px) 9vw 10vh / 122px 148px,
      radial-gradient(circle, rgba(255,203,87,.24) 0 1.4px, transparent 1.9px) 62vw 6vh / 158px 174px,
      radial-gradient(circle, rgba(255,203,87,.34) 0 1.7px, transparent 2.1px) 34vw 88vh / 142px 166px,
      radial-gradient(circle, rgba(255,203,87,.22) 0 1.4px, transparent 1.9px) 78vw 68vh / 132px 156px !important;
  }
}

.card:not(.hero-card):not(.cta-card) .note .note-effect,
.card:nth-child(2) .note .note-effect,
.card:nth-child(4) .note .note-effect,
.card:nth-child(6) .note .note-effect,
.card:nth-child(7) .note .note-effect{
  left:16.5% !important;
  top:40.5% !important;
  width:67% !important;
  font-size:clamp(25px,1.72vw,32px) !important;
  line-height:1.04 !important;
  text-align:center !important;
}

.card:not(.hero-card):not(.cta-card) .note .note-effect b{
  display:block !important;
  margin-bottom:.24em !important;
}

@media (max-width:430px) and (orientation:portrait){
  .stage{
    height:880svh !important;
  }

  .viewport{
    height:100svh !important;
    overflow:hidden !important;
  }

  .track{
    padding-left:6vw !important;
    padding-right:6vw !important;
    gap:6vw !important;
    will-change:transform !important;
  }

  .card{
    width:88vw !important;
    min-width:88vw !important;
    height:min(78svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 118px) !important;
  }

  .hero-card,
  .cta-card{
    padding:clamp(18px,5vw,24px) !important;
  }

  .hero-card .logo-mark,
  .cta-card .logo-mark{
    align-self:flex-start !important;
    width:clamp(84px,22vw,100px) !important;
    margin:0 !important;
  }

  .hero-card h1{
    font-size:clamp(28px,7.7vw,36px) !important;
    line-height:.98 !important;
  }

  .hero-card p{
    font-size:clamp(13px,3.55vw,15.5px) !important;
    line-height:1.34 !important;
  }

  .hero-actions{
    margin-top:auto !important;
    padding-top:10px !important;
    gap:10px !important;
  }

  .hero-social{
    display:grid !important;
    grid-template-columns:auto auto !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:8px !important;
  }

  .hero-social p{
    font-size:clamp(13px,3.45vw,15px) !important;
    white-space:nowrap !important;
  }

  .hero-social-icons{
    gap:10px !important;
  }

  .hero-card .social-icons a{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  .card:not(.hero-card):not(.cta-card){
    padding:clamp(22px,6vw,28px) !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:0 !important;
    overflow:hidden !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(27px,7.45vw,35px) !important;
    line-height:.98 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(12.4px,3.45vw,14.6px) !important;
    line-height:1.32 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(84%, 300px) !important;
    max-width:300px !important;
    height:auto !important;
    aspect-ratio:800 / 520 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:2px auto 0 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:10.5% !important;
    top:24% !important;
    width:79% !important;
    font-size:clamp(15.2px,4.08vw,18px) !important;
    line-height:1.02 !important;
  }

  .cta-card{
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .cta-card > div:not(.logo-mark){
    width:100% !important;
    max-width:100% !important;
    padding-top:0 !important;
  }

  .cta-card h2{
    font-size:clamp(22px,5.75vw,26px) !important;
    line-height:.98 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(8.3px,2.35vw,9.6px) !important;
    line-height:1.2 !important;
    margin-top:5px !important;
  }

  .cta-card .social-follow{
    display:block !important;
    margin-top:5px !important;
    padding-bottom:82px !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(12.5px,3.35vw,14px) !important;
    margin:0 0 5px !important;
  }

  .cta-card .contact-form{
    display:grid !important;
    gap:5px !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr !important;
    gap:5px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:30px !important;
    min-height:30px !important;
    padding:0 10px !important;
    font-size:13.5px !important;
  }

  .cta-card .contact-form textarea{
    height:31px !important;
    min-height:31px !important;
    padding:7px 10px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:17px 1fr !important;
    gap:9px !important;
    margin-top:8px !important;
    font-size:7.6px !important;
    line-height:1.15 !important;
  }

  .cta-card .contact-form .form-submit{
    position:absolute !important;
    left:clamp(18px,5vw,24px) !important;
    right:clamp(18px,5vw,24px) !important;
    bottom:54px !important;
    width:auto !important;
    min-height:32px !important;
    margin:0 !important;
    padding:7px 14px !important;
    font-size:12px !important;
  }

  .cta-card .contact-default-social{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:13px !important;
    display:flex !important;
    justify-content:center !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .cta-card .contact-default-social a,
  .cta-card .social-icons a{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
}

@media (max-width:390px) and (max-height:680px) and (orientation:portrait){
  .card{
    height:min(77svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 110px) !important;
  }

  .hero-card h1{
    font-size:clamp(27px,7.25vw,34px) !important;
  }

  .hero-card p{
    font-size:clamp(12.5px,3.35vw,14.5px) !important;
    line-height:1.3 !important;
  }

  .hero-card .social-icons a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(82%, 276px) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    top:23.5% !important;
    font-size:clamp(15px,3.9vw,16.8px) !important;
    line-height:1.01 !important;
  }

  .cta-card .logo-mark{
    width:78px !important;
  }

  .cta-card h2{
    font-size:20px !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:7.6px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:28px !important;
    min-height:28px !important;
    font-size:12.4px !important;
  }

  .cta-card .contact-form textarea{
    height:28px !important;
    min-height:28px !important;
  }

  .cta-card .form-consent{
    font-size:7px !important;
    line-height:1.1 !important;
  }

  .cta-card .social-follow{
    padding-bottom:74px !important;
  }

  .cta-card .contact-form .form-submit{
    bottom:49px !important;
    min-height:30px !important;
  }

  .cta-card .contact-default-social{
    bottom:11px !important;
  }

  .cta-card .contact-default-social a,
  .cta-card .social-icons a{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
  }
}

@media (max-width:820px) and (orientation:landscape){
  .stage{
    height:820vh !important;
  }

  .viewport{
    height:100svh !important;
    overflow:hidden !important;
  }

  .track{
    padding-left:5.5vw !important;
    padding-right:5.5vw !important;
    gap:4vw !important;
  }

  .card{
    width:86vw !important;
    min-width:86vw !important;
    height:calc(100svh - 34px) !important;
    max-height:calc(100svh - 34px) !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1.06fr .72fr !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:clamp(14px,3vw,28px) !important;
    padding:clamp(14px,4svh,24px) clamp(22px,4vw,38px) !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }

  .hero-card,
  .cta-card{
    grid-template-columns:1fr .78fr !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:absolute !important;
    top:clamp(14px,4svh,24px) !important;
    left:clamp(22px,4vw,38px) !important;
    width:clamp(86px,14vw,128px) !important;
    margin:0 !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    padding-top:clamp(28px,9svh,44px) !important;
  }

  .hero-card h1,
  .cta-card h2{
    max-width:100% !important;
    font-size:clamp(29px,5.15vw,43px) !important;
    line-height:.92 !important;
    margin-top:clamp(7px,2svh,12px) !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    max-width:100% !important;
    font-size:clamp(10.5px,1.82vw,14px) !important;
    line-height:1.24 !important;
    margin-top:clamp(8px,2.2svh,12px) !important;
  }

  .hero-actions{
    margin-top:clamp(9px,2.6svh,16px) !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }

  .hero-actions .btn{
    min-height:32px !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }

  .hero-social{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
  }

  .hero-social p{
    margin:0 !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    align-self:center !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    max-width:100% !important;
    font-size:clamp(28px,4.75vw,42px) !important;
    line-height:.94 !important;
    margin:clamp(8px,2svh,14px) 0 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    max-width:100% !important;
    font-size:clamp(10.5px,1.8vw,14px) !important;
    line-height:1.24 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    grid-column:auto !important;
    width:clamp(220px,31vw,318px) !important;
    max-width:318px !important;
    height:auto !important;
    aspect-ratio:800 / 520 !important;
    align-self:center !important;
    justify-self:center !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:16% !important;
    top:39% !important;
    width:68% !important;
    font-size:clamp(13px,1.92vw,17px) !important;
    line-height:1.01 !important;
  }

  .cta-card .social-follow{
    position:absolute !important;
    top:50% !important;
    right:clamp(22px,4vw,38px) !important;
    bottom:auto !important;
    width:min(36vw,300px) !important;
    max-width:min(36vw,300px) !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    text-align:left !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(14px,2vw,17px) !important;
    margin:0 0 6px !important;
  }

  .cta-card .contact-form{
    gap:5px !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:28px !important;
    min-height:28px !important;
    padding:0 9px !important;
    font-size:11.5px !important;
  }

  .cta-card .contact-form textarea{
    height:34px !important;
    min-height:34px !important;
    padding:7px 9px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:16px 1fr !important;
    gap:8px !important;
    margin-top:4px !important;
    font-size:7px !important;
    line-height:1.08 !important;
  }

  .cta-card .contact-form .form-submit{
    position:static !important;
    width:100% !important;
    min-height:29px !important;
    margin-top:4px !important;
    padding:6px 12px !important;
    font-size:11px !important;
  }

  .cta-card .contact-default-social{
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;
    margin:6px 0 0 !important;
    padding:0 !important;
  }
}

@media (max-width:700px) and (max-height:380px) and (orientation:landscape){
  .card{
    width:88vw !important;
    min-width:88vw !important;
    height:calc(100svh - 26px) !important;
    max-height:calc(100svh - 26px) !important;
    padding:12px 22px !important;
    gap:14px !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    width:82px !important;
    top:12px !important;
    left:22px !important;
  }

  .hero-card h1,
  .cta-card h2{
    font-size:clamp(26px,4.75vw,35px) !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    font-size:10px !important;
    line-height:1.18 !important;
  }

  .hero-actions{
    margin-top:8px !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(25px,4.5vw,34px) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:clamp(198px,30vw,260px) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    font-size:clamp(11.5px,1.85vw,14px) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:25px !important;
    min-height:25px !important;
  }

  .cta-card .contact-form textarea{
    height:29px !important;
    min-height:29px !important;
  }
}

.service-scope{
  list-style:none;
  margin:clamp(14px,1.5vw,22px) 0 0 !important;
  padding:0 !important;
  display:grid;
  gap:clamp(5px,.55vw,8px);
  max-width:min(560px,42vw);
  color:#161616;
  font-family:var(--font-body);
  font-size:clamp(15px,1.12vw,18px);
  font-weight:650;
  line-height:1.22;
}

.service-scope li{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.service-scope li:before{
  content:"";
  flex:0 0 auto;
  width:.48em;
  height:.48em;
  margin-top:.36em;
  border-radius:999px;
  background:var(--yellow);
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}

@media (max-width:430px) and (orientation:portrait){
  .service-scope{
    margin-top:clamp(9px,2.5vw,12px) !important;
    gap:3px !important;
    max-width:100% !important;
    font-size:clamp(11.2px,3.05vw,13px) !important;
    line-height:1.14 !important;
  }

  .service-scope li{
    gap:7px !important;
  }
}

@media (max-width:390px) and (max-height:680px) and (orientation:portrait){
  .service-scope{
    margin-top:8px !important;
    gap:2px !important;
    font-size:clamp(10.4px,2.95vw,11.8px) !important;
    line-height:1.1 !important;
  }
}

@media (max-width:820px) and (orientation:landscape){
  .service-scope{
    margin-top:clamp(7px,1.8svh,10px) !important;
    gap:2px !important;
    max-width:100% !important;
    font-size:clamp(9.5px,1.55vw,12px) !important;
    line-height:1.12 !important;
  }

  .service-scope li{
    gap:6px !important;
  }
}

.cta-card.is-contact-success > div:not(.logo-mark) > p{
  display:none !important;
}

.cta-card.is-contact-success .contact-default-social,
.cta-card .social-follow.is-success .contact-default-social{
  display:none !important;
}

.contact-success .success-start-button{
  display:none !important;
}

.cta-card.is-contact-success .social-follow.is-success .contact-success{
  align-content:start !important;
}

.cta-card.is-contact-success .contact-social-note{
  margin-top:clamp(6px,1.2vw,12px) !important;
}

@media (max-width:430px) and (orientation:portrait){
  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    top:30% !important;
    line-height:1 !important;
  }

  .cta-card.is-contact-success h2{
    font-size:clamp(26px,7.2vw,34px) !important;
    margin-bottom:0 !important;
  }

  .cta-card.is-contact-success .social-follow{
    margin-top:clamp(10px,2.8vw,16px) !important;
    padding-bottom:0 !important;
  }

  .cta-card.is-contact-success .contact-success{
    gap:clamp(8px,2.35vw,12px) !important;
    text-align:left !important;
  }

  .cta-card.is-contact-success .contact-success .tag{
    font-size:clamp(10px,2.95vw,12px) !important;
    line-height:1 !important;
  }

  .cta-card.is-contact-success .contact-success h3{
    font-size:clamp(28px,7.8vw,36px) !important;
    line-height:.96 !important;
    margin:0 !important;
  }

  .cta-card.is-contact-success .contact-success p{
    font-size:clamp(12.5px,3.45vw,15px) !important;
    line-height:1.2 !important;
    margin:0 !important;
  }

  .cta-card.is-contact-success .contact-social-note{
    margin-top:clamp(6px,1.8vw,10px) !important;
    font-size:clamp(14px,3.8vw,16px) !important;
  }

  .cta-card.is-contact-success .contact-success .social-icons{
    justify-content:flex-start !important;
    gap:12px !important;
    margin-top:0 !important;
  }

  .cta-card.is-contact-success .contact-success .social-icons a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

@media (max-width:390px) and (max-height:680px) and (orientation:portrait){
  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    top:29% !important;
    font-size:clamp(14px,3.65vw,16px) !important;
  }

  .cta-card.is-contact-success .logo-mark{
    width:74px !important;
  }

  .cta-card.is-contact-success h2{
    font-size:clamp(24px,6.65vw,30px) !important;
  }

  .cta-card.is-contact-success .social-follow{
    margin-top:8px !important;
  }

  .cta-card.is-contact-success .contact-success{
    gap:7px !important;
  }

  .cta-card.is-contact-success .contact-success h3{
    font-size:clamp(24px,6.6vw,30px) !important;
    line-height:.96 !important;
  }

  .cta-card.is-contact-success .contact-success p{
    font-size:11.4px !important;
    line-height:1.16 !important;
  }

  .cta-card.is-contact-success .contact-social-note{
    font-size:13px !important;
  }

  .cta-card.is-contact-success .contact-success .social-icons a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

@media (max-width:820px) and (orientation:landscape){
  .cta-card.is-contact-success > div:not(.logo-mark) > p{
    display:none !important;
  }

  .cta-card.is-contact-success .social-follow{
    top:52% !important;
    transform:translateY(-50%) !important;
  }

  .cta-card.is-contact-success .contact-success{
    gap:6px !important;
  }

  .cta-card.is-contact-success .contact-success h3{
    font-size:clamp(24px,4.2vw,34px) !important;
    line-height:.95 !important;
  }

  .cta-card.is-contact-success .contact-success p{
    font-size:clamp(10.5px,1.65vw,13px) !important;
    line-height:1.16 !important;
  }

  .cta-card.is-contact-success .contact-social-note{
    margin-top:4px !important;
  }
}
@font-face{
  font-family:"Biro Script Plus";
  src:url("../fonts/BiroScriptPlus.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Biro Script Plus";
  src:url("../fonts/BiroScriptPlus-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

.hero-scope{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  color:#161616;
  font-family:var(--font-body);
  font-size:clamp(17px,1.18vw,21px);
  font-weight:750;
  line-height:1.2;
}

.hero-scope li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.hero-scope li + li{
  margin-top:clamp(10px,.9vw,15px);
}

.hero-scope li:before{
  content:"";
  flex:0 0 auto;
  width:.52em;
  height:.52em;
  margin-top:.34em;
  border-radius:999px;
  background:var(--yellow);
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}

@media (min-width:700px){
  .hero-card{
    position:relative !important;
  }

  .hero-card > div:not(.logo-mark){
    position:static !important;
    max-width:min(47vw, 700px) !important;
  }

  .hero-scope{
    position:absolute !important;
    left:auto !important;
    right:clamp(96px,12vw,230px) !important;
    top:51% !important;
    width:clamp(285px,25vw,430px) !important;
    max-width:34% !important;
    transform:translateY(-50%) !important;
    z-index:4 !important;
  }

  .hero-card h1{
    max-width:min(660px,45vw) !important;
  }

  .hero-card p{
    max-width:min(600px,42vw) !important;
    margin-top:clamp(14px,2.2vh,20px) !important;
  }

  .hero-actions{
    margin-top:clamp(16px,2.6vh,24px) !important;
    padding-top:0 !important;
    gap:clamp(16px,2vw,28px) !important;
    align-items:center !important;
  }
}

@media (min-width:700px) and (max-width:1180px){
  .hero-scope{
    right:clamp(54px,8vw,92px) !important;
    width:clamp(230px,27vw,310px) !important;
    max-width:34% !important;
    font-size:clamp(12px,1.25vw,15px);
    line-height:1.15;
  }

  .hero-card h1{
    max-width:min(470px,41vw) !important;
  }

  .hero-card p{
    max-width:min(420px,37vw) !important;
  }
}

@media (min-width:700px) and (max-height:760px){
  .hero-card > div:not(.logo-mark){
    padding-top:clamp(72px,8vh,88px) !important;
  }

  .hero-card p{
    margin-top:clamp(12px,1.9vh,16px) !important;
  }

  .hero-actions{
    margin-top:clamp(12px,2vh,18px) !important;
  }
}

@media (max-width:699px){
  .hero-scope{
    display:grid !important;
    gap:clamp(3px,1vw,6px) !important;
    margin:clamp(9px,2.6vw,13px) 0 clamp(8px,2.4vw,12px) !important;
    font-size:clamp(10.2px,2.75vw,12.8px) !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    max-width:100% !important;
    position:static !important;
    transform:none !important;
    width:100% !important;
  }

  .hero-scope li{
    gap:7px !important;
  }

  .hero-scope li + li{
    margin-top:0 !important;
  }

  .hero-scope li:before{
    width:.46em;
    height:.46em;
    margin-top:.36em;
  }

  .hero-actions{
    margin-top:auto !important;
  }
}

/* Desktop hero balance: left copy under the logo, service list in the right column. */
@media (min-width:821px){
  .hero-card > div:not(.logo-mark){
    align-self:stretch !important;
    justify-self:stretch !important;
    display:grid !important;
    grid-template-columns:minmax(0, min(45vw, 700px)) minmax(280px, 34vw) !important;
    grid-template-rows:auto auto auto auto !important;
    column-gap:clamp(60px,8vw,170px) !important;
    width:100% !important;
    max-width:none !important;
    min-height:100% !important;
    padding-top:clamp(98px,12vh,142px) !important;
    padding-bottom:clamp(38px,6vh,70px) !important;
    transform:none !important;
    align-content:center !important;
  }

  .hero-card .tag,
  .hero-card h1,
  .hero-card p,
  .hero-card .hero-actions{
    grid-column:1 !important;
  }

  .hero-scope{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    position:static !important;
    transform:none !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(100%, 430px) !important;
    max-width:430px !important;
    margin:0 !important;
    z-index:4 !important;
  }

  .hero-card h1{
    max-width:100% !important;
  }

  .hero-card p{
    max-width:min(100%,600px) !important;
  }

  .hero-actions{
    align-self:start !important;
    margin-top:clamp(22px,3vh,34px) !important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .hero-card > div:not(.logo-mark){
    grid-template-columns:minmax(0, min(44vw, 520px)) minmax(220px, 30vw) !important;
    column-gap:clamp(34px,5vw,76px) !important;
    padding-top:clamp(82px,10vh,112px) !important;
    padding-bottom:clamp(32px,5vh,56px) !important;
  }

  .hero-scope{
    width:min(100%,320px) !important;
    max-width:320px !important;
    font-size:clamp(12px,1.25vw,15px) !important;
    line-height:1.15 !important;
  }
}

@media (min-width:821px) and (max-height:760px){
  .hero-card > div:not(.logo-mark){
    padding-top:clamp(72px,10vh,100px) !important;
    padding-bottom:clamp(28px,4vh,44px) !important;
  }

  .hero-actions{
    margin-top:clamp(16px,2.2vh,24px) !important;
  }
}

/* Mobile stability pass: keep portrait scrolling light and make phone landscape use a desktop-like layout. */
@media (max-width:820px) and (orientation:portrait){
  html{
    scroll-behavior:auto !important;
  }

  .track{
    transition:none !important;
    will-change:transform !important;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }

  .card{
    transition:none !important;
    will-change:auto !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
  }

  body:after{
    will-change:auto !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}

@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  html{
    scroll-behavior:auto !important;
  }

  body{
    overflow-x:hidden !important;
  }

  #dotsCanvas{
    display:none !important;
  }

  body:after{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    opacity:.62 !important;
    background:
      radial-gradient(circle, rgba(28,28,28,.34) 0 2px, transparent 2.4px) 9vw 10vh / 122px 148px,
      radial-gradient(circle, rgba(28,28,28,.24) 0 1.6px, transparent 2px) 62vw 6vh / 158px 174px,
      radial-gradient(circle, rgba(255,203,87,.36) 0 1.8px, transparent 2.2px) 34vw 88vh / 142px 166px,
      radial-gradient(circle, rgba(28,28,28,.20) 0 1.4px, transparent 1.9px) 78vw 68vh / 132px 156px !important;
    -webkit-transform:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  .stage{
    height:820vh !important;
  }

  .viewport{
    height:100svh !important;
    min-height:100svh !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .track{
    height:100% !important;
    padding-left:6vw !important;
    padding-right:6vw !important;
    gap:4.4vw !important;
    align-items:center !important;
    transition:none !important;
    will-change:transform !important;
  }

  .card{
    width:86vw !important;
    min-width:86vw !important;
    height:calc(100svh - 34px) !important;
    min-height:0 !important;
    max-height:calc(100svh - 34px) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(170px,.72fr) !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    align-content:center !important;
    justify-items:stretch !important;
    gap:clamp(16px,3.2vw,30px) !important;
    padding:clamp(13px,4svh,24px) clamp(22px,4vw,40px) !important;
    border-radius:clamp(22px,4vw,30px) !important;
    overflow:hidden !important;
    transition:none !important;
    will-change:auto !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    grid-column:1 !important;
    align-self:center !important;
    justify-self:stretch !important;
    max-width:100% !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    grid-column:2 !important;
    align-self:center !important;
    justify-self:center !important;
    width:min(100%, clamp(190px,30vw,310px)) !important;
    max-width:310px !important;
    height:auto !important;
    aspect-ratio:800 / 520 !important;
    margin:0 !important;
    -webkit-transform:translate3d(0,0,0) rotate(-4deg) !important;
    transform:translate3d(0,0,0) rotate(-4deg) !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    max-width:100% !important;
    font-size:clamp(25px,4.6vw,42px) !important;
    line-height:.94 !important;
    margin:clamp(7px,1.7svh,12px) 0 !important;
  }

  .card:not(.hero-card):not(.cta-card) p,
  .card:not(.hero-card):not(.cta-card) .service-scope{
    max-width:100% !important;
    font-size:clamp(10px,1.72vw,14px) !important;
    line-height:1.22 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:15.5% !important;
    top:39.5% !important;
    width:69% !important;
    font-size:clamp(12.4px,1.88vw,17px) !important;
    line-height:1.01 !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:absolute !important;
    top:clamp(13px,4svh,24px) !important;
    left:clamp(22px,4vw,40px) !important;
    width:clamp(84px,13.5vw,132px) !important;
    margin:0 !important;
    align-self:auto !important;
    justify-self:auto !important;
  }

  .hero-card,
  .cta-card{
    grid-template-columns:minmax(0,1.08fr) minmax(170px,.72fr) !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(160px,.72fr) !important;
    grid-template-rows:auto auto auto auto !important;
    column-gap:clamp(18px,4vw,40px) !important;
    grid-column:1 / -1 !important;
    align-self:center !important;
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    padding-top:clamp(34px,10svh,52px) !important;
    padding-bottom:0 !important;
    transform:none !important;
  }

  .hero-card .tag,
  .hero-card h1,
  .hero-card p,
  .hero-card .hero-actions{
    grid-column:1 !important;
  }

  .hero-scope{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    display:grid !important;
    align-self:center !important;
    justify-self:center !important;
    position:static !important;
    width:min(100%, 300px) !important;
    max-width:300px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    font-size:clamp(11px,1.8vw,15px) !important;
    line-height:1.12 !important;
    gap:clamp(4px,1svh,8px) !important;
  }

  .hero-scope li + li{
    margin-top:0 !important;
  }

  .hero-card .tag{
    display:inline-block !important;
    width:max-content !important;
    max-width:100% !important;
    padding:4px 10px !important;
    font-size:clamp(9px,1.55vw,12px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-card h1,
  .cta-card h2{
    max-width:100% !important;
    margin:clamp(7px,1.8svh,12px) 0 0 !important;
    font-size:clamp(25px,4.8vw,44px) !important;
    line-height:.92 !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    grid-column:1 !important;
    max-width:100% !important;
    margin-top:clamp(8px,2svh,12px) !important;
    font-size:clamp(10px,1.7vw,14px) !important;
    line-height:1.24 !important;
  }

  .hero-actions{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(9px,1.8vw,16px) !important;
    margin-top:clamp(9px,2.3svh,16px) !important;
  }

  .hero-actions .btn{
    min-height:31px !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }

  .hero-social{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }

  .hero-social p{
    margin:0 !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
  }

  .cta-card .social-follow{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    position:static !important;
    align-self:center !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    text-align:left !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(13px,1.9vw,16px) !important;
    margin:0 0 6px !important;
  }

  .cta-card .contact-form{
    display:grid !important;
    gap:5px !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:28px !important;
    min-height:28px !important;
    padding:0 9px !important;
    font-size:11.5px !important;
  }

  .cta-card .contact-form textarea{
    height:32px !important;
    min-height:32px !important;
    padding:7px 9px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:16px 1fr !important;
    gap:8px !important;
    margin-top:3px !important;
    font-size:7px !important;
    line-height:1.08 !important;
  }

  .cta-card .contact-form .form-submit{
    position:static !important;
    width:100% !important;
    min-height:29px !important;
    margin-top:4px !important;
    padding:6px 12px !important;
    font-size:11px !important;
  }

  .cta-card .contact-default-social{
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;
    margin:6px 0 0 !important;
    padding:0 !important;
  }
}

/* Contact card mobile parity: keep the final card the same size as the other portrait cards. */
@media (max-width:430px) and (orientation:portrait){
  .cta-card{
    --y:0px !important;
    width:88vw !important;
    min-width:88vw !important;
    height:min(78svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 118px) !important;
    padding:clamp(18px,5vw,24px) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .cta-card .logo-mark{
    width:clamp(84px,22vw,100px) !important;
    margin:0 !important;
    align-self:flex-start !important;
  }

  .cta-card > div:not(.logo-mark){
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    padding-top:0 !important;
  }

  .cta-card h2{
    font-size:clamp(22px,5.95vw,27px) !important;
    line-height:.98 !important;
    margin-top:clamp(8px,2.4vw,12px) !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(8.9px,2.55vw,10.5px) !important;
    line-height:1.24 !important;
    margin-top:clamp(6px,1.8vw,9px) !important;
  }

  .cta-card .social-follow{
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    margin-top:clamp(7px,2vw,10px) !important;
    padding-bottom:0 !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(13px,3.65vw,15px) !important;
    line-height:1.08 !important;
    margin:0 0 clamp(6px,1.8vw,9px) !important;
  }

  .cta-card .contact-form{
    display:grid !important;
    gap:clamp(6px,1.8vw,8px) !important;
    width:100% !important;
    max-width:100% !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr !important;
    gap:clamp(6px,1.8vw,8px) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:clamp(31px,8.8vw,36px) !important;
    min-height:clamp(31px,8.8vw,36px) !important;
    padding:0 10px !important;
    font-size:clamp(13px,3.75vw,16px) !important;
  }

  .cta-card .contact-form textarea{
    height:clamp(33px,9.2vw,40px) !important;
    min-height:clamp(33px,9.2vw,40px) !important;
    padding:8px 10px !important;
    font-size:clamp(12.5px,3.5vw,15px) !important;
    line-height:1.18 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:17px 1fr !important;
    gap:9px !important;
    margin-top:clamp(7px,2vw,10px) !important;
    font-size:clamp(7.6px,2.15vw,8.8px) !important;
    line-height:1.18 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }

  .cta-card .contact-form .form-submit{
    position:static !important;
    width:100% !important;
    min-height:clamp(34px,9.2vw,38px) !important;
    margin-top:clamp(8px,2.4vw,12px) !important;
    padding:8px 14px !important;
    font-size:clamp(12px,3.35vw,13.5px) !important;
  }

  .cta-card .contact-default-social{
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:clamp(12px,3.8vw,18px) !important;
    margin-top:clamp(9px,2.6vw,14px) !important;
    padding:0 !important;
  }

  .cta-card .contact-default-social a,
  .cta-card .social-icons a{
    width:clamp(32px,9vw,38px) !important;
    height:clamp(32px,9vw,38px) !important;
    min-width:clamp(32px,9vw,38px) !important;
    min-height:clamp(32px,9vw,38px) !important;
  }
}

@media (max-width:390px) and (max-height:680px) and (orientation:portrait){
  .cta-card{
    height:min(77svh, calc(88vw * 16 / 9)) !important;
    max-height:calc(100svh - 110px) !important;
    padding:clamp(15px,4.4vw,20px) !important;
  }

  .cta-card h2{
    font-size:clamp(20px,5.6vw,24px) !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(7.8px,2.25vw,9.2px) !important;
  }

  .cta-card .social-follow{
    margin-top:6px !important;
  }

  .cta-card .contact-form{
    gap:5px !important;
  }

  .cta-card .contact-form .form-row{
    gap:5px !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:29px !important;
    min-height:29px !important;
    font-size:12.8px !important;
  }

  .cta-card .contact-form textarea{
    height:30px !important;
    min-height:30px !important;
    font-size:12px !important;
  }

  .cta-card .form-consent{
    margin-top:6px !important;
    font-size:7.1px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:31px !important;
    margin-top:7px !important;
  }

  .cta-card .contact-default-social{
    margin-top:8px !important;
  }
}

/* Desktop first-card balance: keep the eyebrow clear of the logo without pushing the CTA down. */
@media (min-width:821px){
  .hero-card .logo-mark{
    top:clamp(26px,2.6vw,40px) !important;
    width:clamp(142px,11vw,190px) !important;
  }

  .hero-card > div:not(.logo-mark){
    padding-top:clamp(118px,13vh,142px) !important;
    padding-bottom:clamp(38px,6vh,70px) !important;
  }

  .hero-card .tag{
    display:inline-flex !important;
    align-items:center !important;
    width:max-content !important;
    max-width:min(100%, 320px) !important;
    min-width:0 !important;
    align-self:start !important;
    justify-self:start !important;
    padding:4px 12px !important;
    line-height:1 !important;
    text-transform:none !important;
    white-space:nowrap !important;
  }

  .hero-card h1{
    margin-top:clamp(10px,1.5vh,14px) !important;
    line-height:.88 !important;
  }

  .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:clamp(18px,2vw,30px) !important;
    margin-top:clamp(22px,3vh,32px) !important;
  }

  .hero-social{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:clamp(10px,1vw,14px) !important;
    margin:0 !important;
  }

  .hero-social p{
    margin:0 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-social-icons{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:clamp(8px,1vw,12px) !important;
  }
}

@media (min-width:821px) and (max-height:760px){
  .hero-card .logo-mark{
    top:clamp(18px,2.6vh,30px) !important;
    width:clamp(132px,10.2vw,172px) !important;
  }

  .hero-card > div:not(.logo-mark){
    padding-top:clamp(92px,13vh,112px) !important;
    padding-bottom:clamp(28px,4vh,44px) !important;
  }

  .hero-card h1{
    margin-top:clamp(8px,1.2vh,11px) !important;
    line-height:.84 !important;
  }

  .hero-actions{
    margin-top:clamp(16px,2vh,22px) !important;
  }
}

/* Short desktop screens: keep every card readable without leaking into the bottom progress area. */
@media (min-width:821px) and (max-height:760px){
  .card{
    height:80vh !important;
    padding:clamp(26px,3vw,46px) !important;
  }

  .hero-card,
  .cta-card{
    overflow:hidden !important;
  }

  .hero-card .logo-mark,
  .cta-card .logo-mark{
    top:clamp(18px,3vh,28px) !important;
    width:clamp(132px,10vw,172px) !important;
  }

  .hero-card > div:not(.logo-mark){
    padding-top:clamp(88px,12vh,108px) !important;
    padding-bottom:clamp(22px,3.4vh,34px) !important;
  }

  .hero-card .tag{
    max-width:min(100%, 430px) !important;
    padding:3px 10px !important;
    font-size:clamp(10px,.88vw,13px) !important;
    line-height:1 !important;
  }

  .hero-card h1{
    max-width:min(610px,43vw) !important;
    font-size:clamp(46px,4.35vw,68px) !important;
    line-height:.82 !important;
    margin-top:clamp(8px,1.2vh,11px) !important;
  }

  .hero-card p{
    max-width:min(560px,40vw) !important;
    margin-top:clamp(10px,1.7vh,14px) !important;
    font-size:clamp(16px,1.25vw,20px) !important;
    line-height:1.25 !important;
  }

  .hero-actions{
    flex-wrap:nowrap !important;
    margin-top:clamp(12px,2vh,18px) !important;
    gap:clamp(14px,1.8vw,24px) !important;
  }

  .hero-actions .btn{
    min-height:40px !important;
    padding:10px 22px !important;
    font-size:14px !important;
  }

  .hero-social{
    gap:10px !important;
  }

  .hero-social p{
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .hero-scope{
    right:clamp(86px,12vw,210px) !important;
    width:clamp(300px,28vw,410px) !important;
    max-width:36% !important;
    font-size:clamp(13px,1.22vw,16px) !important;
    line-height:1.14 !important;
  }

  .hero-scope li + li{
    margin-top:clamp(7px,1.15vh,10px) !important;
  }

  .card:not(.hero-card):not(.cta-card){
    align-items:center !important;
    overflow:hidden !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(42px,4.3vw,68px) !important;
    line-height:.84 !important;
    margin:clamp(8px,1.4vh,12px) 0 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    font-size:clamp(16px,1.3vw,20px) !important;
    line-height:1.24 !important;
  }

  .service-scope{
    margin-top:clamp(10px,1.6vh,14px) !important;
    font-size:clamp(13px,1.06vw,16px) !important;
    line-height:1.14 !important;
  }

  .service-scope li{
    margin-top:4px !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(100%, clamp(300px,34vw,520px)) !important;
    max-width:520px !important;
  }

  .cta-card > div:not(.logo-mark){
    padding-top:clamp(78px,11.5vh,100px) !important;
    padding-bottom:clamp(22px,3.4vh,34px) !important;
  }

  .cta-card h2{
    font-size:clamp(40px,4.25vw,66px) !important;
    line-height:.86 !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    margin-top:clamp(10px,1.8vh,14px) !important;
    font-size:clamp(15px,1.2vw,19px) !important;
    line-height:1.26 !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(18px,1.6vw,24px) !important;
    line-height:1.05 !important;
    margin-bottom:clamp(8px,1.3vh,12px) !important;
  }

  .cta-card .contact-form{
    gap:clamp(8px,1.2vh,12px) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    min-height:42px !important;
    height:42px !important;
    font-size:15px !important;
  }

  .cta-card .contact-form textarea{
    min-height:64px !important;
    height:64px !important;
    font-size:15px !important;
  }

  .cta-card .form-consent{
    font-size:11.5px !important;
    line-height:1.16 !important;
    margin-top:2px !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:42px !important;
    margin-top:clamp(8px,1.4vh,12px) !important;
    font-size:15px !important;
  }

  .cta-card .contact-default-social{
    margin-top:clamp(8px,1.3vh,12px) !important;
  }
}

/* Hero eyebrow: use one continuous yellow strip behind the full label. */
.hero-card .tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-decoration-break:slice !important;
  -webkit-box-decoration-break:slice !important;
  white-space:nowrap !important;
  overflow:visible !important;
  padding:0 !important;
}

.hero-card .tag .tag-text{
  display:inline-block !important;
  width:max-content !important;
  max-width:none !important;
  min-width:max-content !important;
  padding:4px 12px !important;
  border-radius:3px !important;
  background:var(--yellow) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-decoration-break:slice !important;
  -webkit-box-decoration-break:slice !important;
}

/* Desktop hero scope: keep right-column service items on one line. */
@media (min-width:821px){
  .hero-card > div:not(.logo-mark){
    grid-template-columns:minmax(0, min(43vw, 650px)) minmax(360px, max-content) !important;
    column-gap:clamp(44px,6vw,140px) !important;
  }

  .hero-scope{
    width:max-content !important;
    max-width:none !important;
    justify-self:center !important;
  }

  .hero-scope li{
    white-space:nowrap !important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .hero-card > div:not(.logo-mark){
    grid-template-columns:minmax(0, min(40vw, 470px)) minmax(330px, max-content) !important;
    column-gap:clamp(28px,4vw,52px) !important;
  }

  .hero-scope{
    width:max-content !important;
    max-width:none !important;
    font-size:clamp(11.5px,1.12vw,14px) !important;
    line-height:1.12 !important;
  }
}

/* iPhone SE and other narrow phones: keep the long hero eyebrow in one line inside the paper card. */
@media (max-width:430px) and (orientation:portrait){
  .hero-card .tag{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .hero-card .tag .tag-text{
    display:inline-block !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:3px 6px !important;
    font-size:clamp(8.2px,2.42vw,9.8px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-decoration-break:slice !important;
    -webkit-box-decoration-break:slice !important;
  }
}

/* Cross-browser RWD baseline: one mobile layout for Android Chrome and iOS Safari. */
@media (max-width:820px) and (orientation:portrait){
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:auto !important;
  }

  .stage{
    height:820svh !important;
  }

  .viewport{
    height:100svh !important;
    min-height:100svh !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .track{
    --mobile-card-w:min(88vw, 430px);
    width:auto !important;
    height:100% !important;
    padding-inline:calc((100vw - var(--mobile-card-w)) / 2) !important;
    gap:6vw !important;
    align-items:center !important;
    overflow:visible !important;
    transition:none !important;
    will-change:transform !important;
  }

  .card{
    width:var(--mobile-card-w) !important;
    min-width:var(--mobile-card-w) !important;
    height:min(82svh, calc(var(--mobile-card-w) * 1.72)) !important;
    max-height:calc(100svh - 5.8rem) !important;
    min-height:0 !important;
    padding:clamp(1rem,5.2vw,1.7rem) !important;
    border-radius:clamp(1.5rem,8vw,2.35rem) !important;
    overflow:hidden !important;
    transition:none !important;
    will-change:auto !important;
    transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.965) !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
  }

  .hero-card,
  .cta-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:relative !important;
    inset:auto !important;
    width:clamp(5.2rem,29%,8rem) !important;
    margin:0 !important;
    align-self:flex-start !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    padding:clamp(.8rem,4.2%,1.25rem) 0 0 !important;
    margin:0 !important;
    transform:none !important;
  }

  .hero-card .tag{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  .hero-card .tag .tag-text{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:.28em .45em !important;
    overflow:hidden !important;
    border-radius:.24rem !important;
    text-align:center !important;
    white-space:nowrap !important;
    letter-spacing:.045em !important;
    font-size:clamp(.48rem,2.16vw,.62rem) !important;
    line-height:1 !important;
  }

  .hero-card h1,
  .cta-card h2{
    max-width:100% !important;
    margin:clamp(.75rem,3.6%,1.15rem) 0 0 !important;
    font-size:clamp(1.9rem,9.35vw,3rem) !important;
    line-height:.96 !important;
    letter-spacing:-.075em !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    max-width:100% !important;
    margin-top:clamp(.75rem,3.4%,1.05rem) !important;
    font-size:clamp(.82rem,3.75vw,1.05rem) !important;
    line-height:1.32 !important;
  }

  .hero-scope{
    position:static !important;
    display:grid !important;
    width:100% !important;
    max-width:100% !important;
    margin:clamp(.8rem,3.4%,1rem) 0 0 !important;
    padding:0 !important;
    transform:none !important;
    gap:clamp(.18rem,.8vw,.32rem) !important;
    font-size:clamp(.68rem,3.05vw,.9rem) !important;
    line-height:1.14 !important;
  }

  .hero-scope li{
    gap:.55em !important;
    min-width:0 !important;
  }

  .hero-scope li + li{
    margin-top:0 !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:clamp(.7rem,3.5%,1rem) !important;
    margin-top:auto !important;
    padding-top:clamp(.75rem,3.8%,1rem) !important;
  }

  .hero-actions .btn{
    justify-self:start !important;
    min-height:clamp(2.6rem,10.8vw,3.2rem) !important;
    padding:0 clamp(1.3rem,7vw,2.2rem) !important;
    font-size:clamp(.9rem,4vw,1.1rem) !important;
  }

  .hero-social{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:clamp(.65rem,3vw,1rem) !important;
    margin:0 !important;
  }

  .hero-social p{
    margin:0 !important;
    font-size:clamp(.85rem,3.8vw,1.05rem) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-social-icons{
    display:flex !important;
    flex:0 0 auto !important;
    gap:clamp(.6rem,3vw,1rem) !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:clamp(2.3rem,10vw,2.8rem) !important;
    height:clamp(2.3rem,10vw,2.8rem) !important;
    min-width:clamp(2.3rem,10vw,2.8rem) !important;
    min-height:clamp(2.3rem,10vw,2.8rem) !important;
  }

  .card:not(.hero-card):not(.cta-card){
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;
  }

  .card:not(.hero-card):not(.cta-card) > div:first-child{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    max-width:100% !important;
    margin:clamp(.65rem,2.6%,1rem) 0 clamp(.55rem,2.2%,.85rem) !important;
    font-size:clamp(1.8rem,8.3vw,2.55rem) !important;
    line-height:.98 !important;
  }

  .card:not(.hero-card):not(.cta-card) p{
    max-width:100% !important;
    font-size:clamp(.82rem,3.55vw,1rem) !important;
    line-height:1.28 !important;
  }

  .service-scope{
    max-width:100% !important;
    margin-top:clamp(.7rem,3%,1rem) !important;
    gap:clamp(.16rem,.7vw,.28rem) !important;
    font-size:clamp(.72rem,3.12vw,.95rem) !important;
    line-height:1.14 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(82%, 20rem) !important;
    max-width:20rem !important;
    height:auto !important;
    aspect-ratio:800 / 520 !important;
    align-self:center !important;
    margin:auto auto 2% !important;
    transform:translate3d(0,0,0) rotate(-4deg) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note .note-effect,
  .card:nth-child(2) .note .note-effect,
  .card:nth-child(4) .note .note-effect,
  .card:nth-child(6) .note .note-effect,
  .card:nth-child(7) .note .note-effect{
    left:12% !important;
    top:31% !important;
    width:76% !important;
    font-size:clamp(.95rem,4.1vw,1.18rem) !important;
    line-height:1.02 !important;
    text-align:center !important;
  }

  .cta-card h2{
    font-size:clamp(1.45rem,6.4vw,2rem) !important;
  }

  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(.62rem,2.75vw,.8rem) !important;
    line-height:1.22 !important;
  }

  .cta-card .social-follow{
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    margin-top:clamp(.45rem,2.2%,.7rem) !important;
    padding:0 !important;
  }

  .cta-card .social-follow > p{
    font-size:clamp(.86rem,3.7vw,1rem) !important;
    line-height:1.08 !important;
    margin:0 0 clamp(.4rem,2%,.6rem) !important;
  }

  .cta-card .contact-form{
    display:grid !important;
    gap:clamp(.38rem,1.8vw,.52rem) !important;
    width:100% !important;
  }

  .cta-card .contact-form .form-row{
    grid-template-columns:1fr !important;
    gap:clamp(.38rem,1.8vw,.52rem) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    height:clamp(2rem,8.8vw,2.35rem) !important;
    min-height:clamp(2rem,8.8vw,2.35rem) !important;
    padding-inline:.75rem !important;
    font-size:clamp(.84rem,3.55vw,1rem) !important;
  }

  .cta-card .contact-form textarea{
    height:clamp(2.1rem,9vw,2.5rem) !important;
    min-height:clamp(2.1rem,9vw,2.5rem) !important;
    padding:.55rem .75rem !important;
    font-size:clamp(.8rem,3.35vw,.95rem) !important;
    line-height:1.16 !important;
  }

  .cta-card .form-consent{
    grid-template-columns:1.1rem 1fr !important;
    gap:.6rem !important;
    margin-top:clamp(.45rem,2.2%,.65rem) !important;
    font-size:clamp(.48rem,2.08vw,.58rem) !important;
    line-height:1.16 !important;
  }

  .cta-card .contact-form .form-consent input{
    width:1.1rem !important;
    height:1.1rem !important;
    min-width:1.1rem !important;
    min-height:1.1rem !important;
    aspect-ratio:1 / 1 !important;
  }

  .cta-card .contact-form .form-submit{
    position:static !important;
    width:100% !important;
    min-height:clamp(2.15rem,9.5vw,2.55rem) !important;
    margin-top:clamp(.55rem,2.6%,.8rem) !important;
    padding:.5rem 1rem !important;
    font-size:clamp(.82rem,3.35vw,.96rem) !important;
  }

  .cta-card .contact-default-social{
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:clamp(.8rem,4vw,1.2rem) !important;
    margin-top:clamp(.65rem,3%,.9rem) !important;
    padding:0 !important;
  }
}

@media (max-width:370px) and (orientation:portrait){
  .track{
    --mobile-card-w:87vw;
  }

  .card{
    height:min(77svh, calc(var(--mobile-card-w) * 1.58)) !important;
    max-height:calc(100svh - 6.5rem) !important;
    padding:clamp(.92rem,4.8vw,1.2rem) !important;
  }

  .hero-card .tag .tag-text{
    font-size:clamp(.43rem,2.04vw,.5rem) !important;
    letter-spacing:.035em !important;
    padding-inline:.25rem !important;
  }

  .hero-card h1{
    font-size:clamp(1.65rem,8.5vw,2.15rem) !important;
  }

  .hero-card p{
    font-size:clamp(.74rem,3.4vw,.9rem) !important;
  }

  .hero-scope{
    font-size:clamp(.62rem,2.9vw,.78rem) !important;
  }
}

@media (max-width:920px) and (orientation:landscape){
  .stage{
    height:820svh !important;
  }

  .viewport{
    height:100svh !important;
    min-height:100svh !important;
    overflow:hidden !important;
  }

  .track{
    --land-card-w:86vw;
    height:100% !important;
    padding-inline:calc((100vw - var(--land-card-w)) / 2) !important;
    gap:4.5vw !important;
    align-items:center !important;
    transition:none !important;
  }

  .card{
    width:var(--land-card-w) !important;
    min-width:var(--land-card-w) !important;
    height:88svh !important;
    max-height:88svh !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.04fr) minmax(34%,.74fr) !important;
    align-items:center !important;
    gap:clamp(1rem,4vw,2.2rem) !important;
    padding:clamp(.85rem,4svh,1.4rem) clamp(1.35rem,4vw,2.4rem) !important;
    border-radius:clamp(1.35rem,4vw,2rem) !important;
    overflow:hidden !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:absolute !important;
    top:7% !important;
    left:clamp(1.35rem,4vw,2.4rem) !important;
    width:clamp(5.3rem,14vw,8rem) !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(34%,.74fr) !important;
    grid-column:1 / -1 !important;
    column-gap:clamp(1rem,4vw,2.2rem) !important;
    width:100% !important;
    padding-top:clamp(2rem,12svh,3.25rem) !important;
  }

  .hero-card .tag,
  .hero-card h1,
  .hero-card p,
  .hero-card .hero-actions{
    grid-column:1 !important;
  }

  .hero-scope{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    align-self:center !important;
    justify-self:center !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    font-size:clamp(.65rem,1.72vw,.95rem) !important;
    line-height:1.12 !important;
    gap:clamp(.22rem,1svh,.45rem) !important;
  }

  .hero-card .tag .tag-text{
    font-size:clamp(.48rem,1.45vw,.75rem) !important;
  }

  .hero-card h1,
  .cta-card h2{
    font-size:clamp(1.7rem,5vw,3rem) !important;
    line-height:.92 !important;
  }

  .hero-card p,
  .cta-card > div:not(.logo-mark) > p{
    font-size:clamp(.65rem,1.75vw,.9rem) !important;
    line-height:1.22 !important;
  }

  .hero-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:clamp(.6rem,2vw,1rem) !important;
    margin-top:clamp(.55rem,2svh,.9rem) !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(100%, 38vw) !important;
    max-width:20rem !important;
  }
}

/* Final RWD guardrails: proportional layout for Android Chrome, iOS Safari and phone landscape. */
@media (max-width:820px) and (orientation:portrait){
  .track{
    --mobile-card-w:min(88vw, 430px);
    padding-inline:calc((100vw - var(--mobile-card-w)) / 2) !important;
    gap:6vw !important;
  }

  .card{
    width:var(--mobile-card-w) !important;
    min-width:var(--mobile-card-w) !important;
    height:min(82svh, calc(var(--mobile-card-w) * 1.72)) !important;
    max-height:calc(100svh - 5.8rem) !important;
    padding:clamp(1rem,5.1vw,1.65rem) !important;
  }

  .hero-card .tag{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .hero-card .tag .tag-text{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:.28em .42em !important;
    font-size:clamp(.42rem,1.92vw,.56rem) !important;
    letter-spacing:.03em !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  .hero-card h1{
    font-size:clamp(1.78rem,8.55vw,2.75rem) !important;
    line-height:.94 !important;
  }

  .hero-card p{
    font-size:clamp(.78rem,3.45vw,1rem) !important;
    line-height:1.28 !important;
  }

  .hero-scope{
    font-size:clamp(.64rem,2.88vw,.86rem) !important;
    line-height:1.12 !important;
    gap:clamp(.14rem,.62vw,.28rem) !important;
  }

  .hero-actions{
    grid-template-columns:1fr !important;
    gap:clamp(.65rem,3%,.95rem) !important;
  }

  .hero-social{
    justify-content:space-between !important;
  }

  .cta-card{
    min-height:0 !important;
  }

  .cta-card .logo-mark{
    align-self:flex-start !important;
  }

  .cta-card h2{
    font-size:clamp(1.5rem,6.65vw,2.08rem) !important;
    line-height:.96 !important;
  }

  .cta-card .social-follow{
    min-height:0 !important;
  }
}

@media (max-width:370px) and (orientation:portrait){
  .track{
    --mobile-card-w:87vw;
  }

  .card{
    height:min(81svh, calc(var(--mobile-card-w) * 1.72)) !important;
    max-height:calc(100svh - 5.6rem) !important;
    padding:clamp(.92rem,4.55vw,1.12rem) !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    width:clamp(4.9rem,28%,6.7rem) !important;
  }

  .hero-card .tag .tag-text{
    font-size:clamp(.39rem,1.76vw,.48rem) !important;
    letter-spacing:.02em !important;
    padding-inline:.32em !important;
  }

  .hero-card h1{
    font-size:clamp(1.55rem,8vw,2.05rem) !important;
    line-height:.95 !important;
  }

  .hero-card p{
    font-size:clamp(.69rem,3.22vw,.86rem) !important;
    line-height:1.24 !important;
  }

  .hero-scope{
    font-size:clamp(.58rem,2.65vw,.74rem) !important;
    line-height:1.08 !important;
  }
}

@media (max-width:920px) and (orientation:landscape){
  .stage{
    height:820svh !important;
  }

  .viewport{
    height:100svh !important;
    min-height:100svh !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .track{
    --land-card-w:min(86vw, 760px);
    height:100% !important;
    padding-inline:calc((100vw - var(--land-card-w)) / 2) !important;
    gap:4vw !important;
    align-items:center !important;
    transition:none !important;
  }

  .card{
    width:var(--land-card-w) !important;
    min-width:var(--land-card-w) !important;
    height:82svh !important;
    max-height:82svh !important;
    min-height:0 !important;
    padding:clamp(.72rem,3svh,1rem) clamp(1rem,3.4vw,1.7rem) !important;
    border-radius:clamp(1.15rem,3vw,1.75rem) !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(32%,.78fr) !important;
    gap:clamp(.75rem,3vw,1.55rem) !important;
    align-items:center !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    position:absolute !important;
    top:clamp(.55rem,2.5svh,.85rem) !important;
    left:clamp(1rem,3.4vw,1.7rem) !important;
    width:clamp(4.3rem,11vw,5.8rem) !important;
    margin:0 !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(32%,.78fr) !important;
    grid-column:1 / -1 !important;
    column-gap:clamp(.75rem,3vw,1.55rem) !important;
    width:100% !important;
    min-height:0 !important;
    padding-top:clamp(2rem,10svh,2.65rem) !important;
    padding-bottom:0 !important;
    align-self:center !important;
  }

  .hero-card .tag,
  .hero-card h1,
  .hero-card p,
  .hero-card .hero-actions{
    grid-column:1 !important;
  }

  .hero-card .tag{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .hero-card .tag .tag-text{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:.24em .42em !important;
    font-size:clamp(.38rem,1.08vw,.52rem) !important;
    letter-spacing:.03em !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .hero-card h1{
    max-width:100% !important;
    margin-top:clamp(.35rem,1.5svh,.58rem) !important;
    font-size:clamp(1.42rem,3.95vw,2.1rem) !important;
    line-height:.88 !important;
    letter-spacing:-.07em !important;
  }

  .hero-card p{
    max-width:100% !important;
    margin-top:clamp(.35rem,1.55svh,.62rem) !important;
    font-size:clamp(.52rem,1.45vw,.73rem) !important;
    line-height:1.15 !important;
  }

  .hero-scope{
    position:static !important;
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    justify-self:center !important;
    align-self:center !important;
    width:max-content !important;
    max-width:100% !important;
    transform:none !important;
    padding:0 !important;
    margin:0 !important;
    font-size:clamp(.54rem,1.45vw,.75rem) !important;
    line-height:1.08 !important;
    gap:clamp(.12rem,.65svh,.26rem) !important;
  }

  .hero-scope li{
    white-space:nowrap !important;
  }

  .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:clamp(.45rem,1.4vw,.8rem) !important;
    margin-top:clamp(.38rem,1.6svh,.68rem) !important;
    padding-top:0 !important;
  }

  .hero-actions .btn{
    flex:0 0 auto !important;
    min-height:clamp(1.75rem,7svh,2.18rem) !important;
    padding:0 clamp(.75rem,2.45vw,1.15rem) !important;
    font-size:clamp(.54rem,1.42vw,.72rem) !important;
  }

  .hero-social{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(.35rem,1.2vw,.65rem) !important;
  }

  .hero-social p{
    flex:0 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    font-size:clamp(.46rem,1.22vw,.62rem) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .hero-social-icons{
    display:flex !important;
    flex:0 0 auto !important;
    gap:clamp(.28rem,1vw,.5rem) !important;
  }

  .hero-card .social-icons a,
  .cta-card .social-icons a{
    width:clamp(1.55rem,6.2svh,1.95rem) !important;
    height:clamp(1.55rem,6.2svh,1.95rem) !important;
    min-width:clamp(1.55rem,6.2svh,1.95rem) !important;
    min-height:clamp(1.55rem,6.2svh,1.95rem) !important;
  }

  .card:not(.hero-card):not(.cta-card) h2{
    font-size:clamp(1.5rem,4.2vw,2.35rem) !important;
    line-height:.9 !important;
  }

  .card:not(.hero-card):not(.cta-card) p,
  .service-scope{
    font-size:clamp(.56rem,1.55vw,.78rem) !important;
    line-height:1.14 !important;
  }

  .card:not(.hero-card):not(.cta-card) .note{
    width:min(100%, 36vw) !important;
    max-width:19rem !important;
  }

  .cta-card h2{
    font-size:clamp(1.32rem,3.9vw,2rem) !important;
    line-height:.92 !important;
  }

  .cta-card .contact-form{
    gap:clamp(.24rem,1svh,.42rem) !important;
  }

  .cta-card .contact-form input,
  .cta-card .contact-form select{
    min-height:clamp(1.55rem,6.2svh,2rem) !important;
    height:clamp(1.55rem,6.2svh,2rem) !important;
    font-size:clamp(.56rem,1.45vw,.76rem) !important;
  }

  .cta-card .contact-form textarea{
    min-height:clamp(1.85rem,7.4svh,2.45rem) !important;
    height:clamp(1.85rem,7.4svh,2.45rem) !important;
    font-size:clamp(.54rem,1.38vw,.72rem) !important;
  }

  .cta-card .form-consent{
    font-size:clamp(.42rem,1.1vw,.58rem) !important;
    line-height:1.12 !important;
    gap:.42rem !important;
  }

  .cta-card .contact-form .form-submit{
    min-height:clamp(1.65rem,6.6svh,2.05rem) !important;
    margin-top:clamp(.25rem,1svh,.42rem) !important;
    font-size:clamp(.54rem,1.38vw,.72rem) !important;
  }

  .cta-card .contact-default-social{
    margin-top:clamp(.3rem,1.2svh,.5rem) !important;
  }
}

@media (max-width:700px) and (orientation:landscape){
  .track{
    --land-card-w:88vw;
  }

  .card{
    height:80svh !important;
    max-height:80svh !important;
    padding:clamp(.58rem,2.4svh,.78rem) clamp(.8rem,3vw,1.25rem) !important;
  }

  .logo-mark,
  .hero-card .logo-mark,
  .cta-card .logo-mark{
    width:clamp(3.85rem,10.5vw,4.75rem) !important;
  }

  .hero-card > div:not(.logo-mark),
  .cta-card > div:not(.logo-mark){
    padding-top:clamp(1.72rem,9svh,2.18rem) !important;
  }

  .hero-card h1{
    font-size:clamp(1.18rem,3.65vw,1.65rem) !important;
  }

  .hero-card p{
    font-size:clamp(.45rem,1.32vw,.62rem) !important;
  }

  .hero-scope{
    font-size:clamp(.46rem,1.3vw,.64rem) !important;
  }
}