/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* === Migrated custom CSS (added via ChatGPT) === */

/* Faster custom fadeInUp for Flatsome */
[data-animate=fadeInUp] {
  opacity: 0;
  transform: translateY(40px) scale(0.96); /* slight offset + zoom */
  filter: blur(6px);
  transition:
    opacity 0.21s cubic-bezier(.2,.65,.2,1),
    transform 0.21s cubic-bezier(.2,.65,.2,1),
    filter 0.21s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform, filter;
}

/* Mobile: 2× faster + shorter travel so tall cards appear quicker */
@media (max-width: 767px){
  [data-animate=fadeInUp]{
    transform: translateY(24px) scale(0.96);
    transition:
      opacity 0.15s cubic-bezier(.2,.65,.2,1),
      transform 0.15s cubic-bezier(.2,.65,.2,1),
      filter 0.15s cubic-bezier(.2,.65,.2,1);
  }
}

[data-animate=fadeInUp][data-animated=true] {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ==============================
   HERO HEADING — ZOOM IN & STAY (SLOWER)
   ============================== */

.am-hero{
  --hero-color: #ffffff; /* change to match your design */
  color: var(--hero-color);
}

.am-hero .home-hero-heading{
  margin:0;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
  text-align:left;
  font-size:clamp(36px, 8vw, 110px);
}

.am-hero .home-hero-heading p{ margin:0; }
.am-hero .home-hero-heading br{ display:none !important; }

.am-hero .home-hero-heading .reveal-line{
  display:block;
  white-space:nowrap;
  margin-bottom:0.08em;
  overflow:visible;
}

.am-hero .home-hero-heading .reveal-word{
  display:inline-block;
  opacity:0;
  transform: scale(0.86);
  filter: blur(8px);
  will-change: transform, opacity, filter, letter-spacing;
  animation: am-zoom-in 1200ms cubic-bezier(.2,.65,.2,1) both 1;
}

/* Staggered line timing (more spread out) */
.am-hero .home-hero-heading .line-1 .reveal-word{ animation-delay:   0ms; }
.am-hero .home-hero-heading .line-2 .reveal-word{ animation-delay: 300ms; }
.am-hero .home-hero-heading .line-3 .reveal-word{ animation-delay: 600ms; }

/* Outlined ONLYFANS */
.am-hero .home-hero-heading .outlined{
  color: transparent;
  -webkit-text-stroke: 3px var(--hero-color);
  text-stroke: 3px var(--hero-color);
  paint-order: stroke fill;
}

/* Keyframes: zoom in and stay */
@keyframes am-zoom-in{
  0% {
    opacity:0;
    transform:scale(0.86);
    filter:blur(8px);
    letter-spacing:0.04em;
  }
  100% {
    opacity:1;
    transform:scale(1);
    filter:blur(0);
    letter-spacing:-0.02em;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .am-hero .home-hero-heading .reveal-word{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    letter-spacing:-0.02em !important;
  }
}

.tekstitehoste{
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 1s ease-out forwards;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eka-banner .text-box, .tekstitehoste { 
  z-index: 29!important; }

@media only screen and (max-width: 849px) {.am-card--mobile {
    bottom: 
15px!important;
    right: 15px!important;
}}

@media only screen and (min-width: 849px) {.am-head{
padding-right:19px!important;
}}
@media only screen and (max-width: 849px) {.am-head{
padding-right:6px!important;
}}
/* Desktop: hide the checkbox but keep it clickable via the label */
.am-card--desktop .am-desk-t{
  position:absolute;
  width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0;
}

/* When checked, OPEN the panel (same effect as .is-open) */
.am-card--desktop .am-desk-t:checked ~ .am-body{
  max-height: 90vh !important;
  padding-top: 30px !important;
}

/* When checked, swap icons */
.am-card--desktop .am-desk-t:checked ~ .am-head .am-burger{ display:none !important; }
.am-card--desktop .am-desk-t:checked ~ .am-head .am-close{ display:block !important; }

/* Ensure the label is on top and clickable */
.am-card--desktop .am-head{ z-index:999999 !important; }
.am-card--desktop .am-trigger{
  pointer-events:auto !important;
  position:relative; z-index:1000000 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&display=swap');

/* shared variables */
:root{
  --am-w: 260px;
  --am-r: 12px;
  --am-gap: 25px;
  --am-h: 88px;
  --am-bg: #000;
  --am-fg: #fff;
  --am-icon: 52px;          /* burger size (same as logo height) */
  --am-close-scale: 0.65;   /* X is 35% smaller */
  --am-accent: #fe019a;
}

/* base card */
.am-card[data-am]{
  position: fixed;
  z-index: 2147483647;
  width: var(--am-w);
  background: var(--am-bg);
  color: var(--am-fg);
  border-radius: var(--am-r);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  overflow: hidden;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* DESKTOP position (top-right) */
.am-card--desktop{ top: var(--am-gap); right: var(--am-gap); }
/* MOBILE position (bottom-right) */
.am-card--mobile{ bottom: var(--am-gap); right: var(--am-gap); }

/* show/hide per breakpoint */
@media (max-width: 768px){
  .am-card--desktop{ display: none; }
}
@media (min-width: 769px){
  .am-card--mobile{ display: none; }
}

/* header row */
.am-card[data-am] .am-head{
  height: var(--am-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 20px;
  
  column-gap: 12px;
  position: relative;
  z-index: 5;
}
.am-card[data-am] .am-logo img{ display:block; height:52px; width:auto; }

/* toggle button */
.am-card[data-am] .am-trigger{
  display:inline-grid; place-items:center;
  width: var(--am-icon); height: var(--am-icon);
  border:0; background:transparent; padding:0; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 6; position: relative;
}
.am-card[data-am] .am-trigger .am-ico{ pointer-events:none; display:block; }

/* icon sizes */
.am-card[data-am] .am-burger{
  width: var(--am-icon) !important; height: var(--am-icon) !important; object-fit: contain;
  display: block !important;
}
.am-card[data-am] .am-close{
  width: calc(var(--am-icon) * var(--am-close-scale)) !important;
  height: calc(var(--am-icon) * var(--am-close-scale)) !important;
  object-fit: contain;
  display: none !important;
  margin:auto;
}

/* swap icons when open */
.am-card[data-am].is-open .am-burger{ display:none !important; }
.am-card[data-am].is-open .am-close{ display:block !important; }

/* panel (height-only animation) */
.am-card[data-am] .am-body{
  max-height: 0; overflow:hidden;
  transition: max-height .28s ease, padding .28s ease;
  padding-top:0; padding-bottom:0;
  position: relative; z-index:1;
}
/* desktop opens downward */
.am-card--desktop.is-open .am-body{
  max-height: 90vh; padding-top: 30px;
}
/* mobile opens upward (render body first with order) */
.am-card--mobile .am-body{ order: -1; }
.am-card--mobile.is-open .am-body{
  max-height: 90vh; padding-top: 30px;
}

/* nav & items */
.am-card[data-am] .am-nav{ padding-left: 35px; padding-right: 22px; }
.am-card[data-am] .am-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px; text-align:left;
}
.am-card[data-am] .am-list a{
  color: var(--am-fg); text-decoration:none;
  font-weight:700; font-size:17px; line-height:1.25;
  transition: color .15s ease;
}
.am-card[data-am] .am-list a:hover,
.am-card[data-am] .am-list a:active,
.am-card[data-am] .am-list a[aria-current="page"],
.am-card[data-am] .am-list a.is-active{
  color: var(--am-accent);
}

/* socials */
.am-card[data-am] .am-social{
  margin: 26px 22px 22px 35px;
  display:flex; align-items:center; gap:26px;
}
.am-card[data-am] .am-social img{
  width:20px; height:auto; display:block; filter:brightness(0) invert(1);
}
/* === Desktop card quick fix (append at end) === */

/* Make sure the header and button are on top and clickable */
.am-card--desktop .am-head{
  z-index: 999999 !important;
  pointer-events: auto !important;
}
.am-card--desktop .am-trigger{
  pointer-events: auto !important;
  position: relative;
  z-index: 1000000 !important;
}

/* Force the open state to override collapsed state */
.am-card--desktop.is-open .am-body{
  max-height: 90vh !important;
  padding-top: 30px !important;
}

/* Make the icon swap bulletproof on desktop */
.am-card--desktop.is-open .am-burger{ display: none !important; }
.am-card--desktop.is-open .am-close { display: block !important; }

/* If some header overlay blocks clicks, re-enable clicks on the card */
.am-card--desktop{ pointer-events: auto !important; }

/* Extend the viewport to the right by 120px */
.phone-rails{
  padding-right: 120px;   /* reveal more of the right rail */
  overflow: hidden;       /* still crops top/bottom cleanly */
  box-sizing: content-box;/* so padding enlarges the crop instead of shrinking */
}

/* ===========================
   CONFIG: sizes, spacing, speed
   =========================== */
.phone-rails{
  --col-gap: 40px!important;     /* gap between LEFT/RIGHT columns */
  --row-gap: 25px;     /* gap between stacked phones */
  --tilt: 13deg;       /* rail tilt */
  --w-desktop: 350px;  /* desktop/tablet width */
  --h-desktop: 690px;  /* desktop/tablet height */
  --speed-up: 24s;     /* left column loop duration */
  --speed-down: 28s;   /* right column loop duration */

  /* this element acts as the viewport/cropper */
  position: relative;
  width: max-content;      
  height: 100%;            /* fill banner height */
  margin-left: auto;       /* hug the RIGHT edge */
  display: grid;
  place-items: center;
  overflow: hidden;        /* crop only at the outer viewport */
}

/* The 2-column layout inside the viewport */
.phone-rails .rails-inner{
  display: flex;               /* flexbox for easier gaps */
  justify-content: center;
  align-items: stretch;
  height: 100%;
  gap: var(--col-gap);         /* 25px between the two columns */
  overflow: visible;
}

/* Each column (rail) */
.phone-rails .rail{
  position: relative;
  height: 100%;
  overflow: visible;           /* don't clip phones inside */
  transform: rotate(var(--tilt));
  transform-origin: center;
}

/* The vertical stack inside each rail */
.phone-rails .track{
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);         /* 25px between stacked phones */
  will-change: transform;
}

/* Phone frames (explicit sizes, no aspect-ratio) */
.phone-rails .phone{
  width: var(--w-desktop);
  height: var(--h-desktop);
  border-radius: 24px;
  overflow: hidden;            /* rounds the video corners */
  background: #000;
  flex-shrink: 0;
}

/* Videos fill their frames */
.phone-rails .phone video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Infinite opposite scrolling (columns are duplicated in your HTML) */
@keyframes prRailUp   { 0%{transform:translateY(0)}     100%{transform:translateY(-50%)} }
@keyframes prRailDown { 0%{transform:translateY(-50%)}  100%{transform:translateY(0)} }

.phone-rails .rail-up  .track{ animation: prRailUp   var(--speed-up)  linear infinite; }
.phone-rails .rail-down .track{
  transform: translateY(-50%);
  animation: prRailDown var(--speed-down) linear infinite;
}

/* ===========================
   RESPONSIVE explicit sizes (no aspect-ratio)
   Your request:
   - 481–766px: width 370px, height 725px
   - ≤480px:    width 170px, height 330px
   =========================== */
@media (min-width: 481px) and (max-width: 766px){
  .phone-rails{
    --w-desktop: 300px;
    --h-desktop: 600px;
    --col-gap: 22px !important;
  }
  .phone-rails .rails-inner{ transform: none !important; }
}

/* Tablet: make individual videos smaller */
@media (min-width: 767px) and (max-width: 1024px){
  .phone-rails{
    --w-desktop: 300px;
    --h-desktop: 560px;
    --col-gap: 24px !important;
  }
  .phone-rails .rails-inner{ transform: none !important; }
}

@media (max-width: 480px){
  .phone-rails{
    --w-desktop: 230px;
    --h-desktop: 330px;
    --col-gap: 16px !important;
    padding-right: 0 !important;
  }
  .phone-rails .rails-inner{ transform: none !important; }
}

/* ===========================
   (Optional helper)
   Ensure parents don’t clip content
   =========================== */
.section, .banner, .row, .container, .container-width{
  overflow: visible;
}

/* Shift the rails left to reveal more of the right column (DESKTOP ONLY) */
@media (min-width: 1025px){
  .phone-rails .rails-inner{
    transform: translateX(-120px);
  }
}

.banner .edge-right {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  max-width: none !important;
  z-index: 9 !important;
}

/* Important: allow it to position relative to the banner, not the container */
.banner .banner-layers {
  position: static !important; /* reset so it's not the positioning context */
}

.wpcf7-form-control{
  border-radius:10px!important;
}
.wpcf7-submit{
  padding-left:40px!important;
  padding-right:40px!important;
  color:#000!important;
  padding-top:2px!important;
  border-radius:99px!important;
  font-family: hanson!important;
  font-size:15px!important
}

.button.is-xlarge{
  margin-top:0px!important;
  margin-bottom:0px!important;
  padding-bottom:0px!important;
  padding-top:3px!important;
  font-family: hanson!important;
  font-size:20px!important
}

.outlined {
  color: transparent;
  -webkit-text-stroke: 3px white; /* for WebKit browsers */
  text-stroke: 3px white; /* standard property (not widely supported) */
}

.paallevaan {
    margin-top: -500px!important;
}
.bannervideuut{
  background-color: transparent!important;
}

.html_topbar_right{
  margin-right:0px!important;
  margin-top:30px!important;
}

.is-small, .is-small.button {
  margin-top:30px!important;
  font-size: 1.85em;
}

.logo{
  display:none!important;
}

/* === Service card hover (.palvelu2) with split text movement === */
.palvelu2 .col-inner{
  --bg: #0b0b0b;         /* base background */
  --hover-bg: #fe019a;   /* hover background */
  --radius: 26px;
  --pad: 36px;
  --dur: 260ms;
  --ease: cubic-bezier(.25,.8,.25,1);

  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: hidden;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* smooth transforms/colors */
.palvelu2 .icon-box-img,
.palvelu2 .icon-box-img img,
.palvelu2 h2,
.palvelu2 p{
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  will-change: transform;
}

/* default colors */
.palvelu2 h2,
.palvelu2 p { color: rgba(255,255,255,.86); }

/* HOVER STATE */
.palvelu2:hover .col-inner,
.palvelu2:focus-within .col-inner{
  background: var(--hover-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Title: moves up less and turns black */
.palvelu2:hover h2,
.palvelu2:focus-within h2{
  transform: translateY(-3px); /* half the distance */
  color: #000 !important;
}

/* Paragraph: moves up more and turns black */
.palvelu2:hover p,
.palvelu2:focus-within p{
  transform: translateY(-6px);
  color: #000 !important;
}

/* Icon: moves down, no color change */
.palvelu2:hover .icon-box-img,
.palvelu2:hover .icon-box-img img,
.palvelu2:focus-within .icon-box-img,
.palvelu2:focus-within .icon-box-img img{
  transform: translateY(6px);
}

/* Whole column clickable via UX Builder link or overlay link */
.palvelu2 .card-link{
  position: absolute; inset: 0;
  z-index: 5; display: block;
  text-indent: -9999px; outline: none;
  border-radius: var(--radius);
}
.palvelu2 .card-link:focus-visible{
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.35);
}

/* === Smooth horizontal scroll — no mask === */
.eka-banner { position: relative; overflow: hidden; }

.eka-banner .bg.bg-loaded { 
  background: none !important; 
  position: relative; 
  z-index: 0;
}

.eka-banner .bg.bg-loaded::before,
.eka-banner .bg.bg-loaded::after {
  content: "";
  position: absolute;
  top: 0; 
  bottom: 0;
  height: 100%;
  aspect-ratio: 2448 / 1700;
  background-image: url("https://angelmedias.com/wp-content/uploads/2025/08/logo-background-2-scaled.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.eka-banner .bg.bg-loaded::before {
  left: 0;
  animation: eka-slide-a 120s linear infinite;
}

.eka-banner .bg.bg-loaded::after {
  left: 0;
  animation: eka-slide-b 120s linear infinite;
}

@keyframes eka-slide-a {
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}
@keyframes eka-slide-b {
  from { transform: translateX(100%); }
  to   { transform: translateX(0%); }
}

.eka-banner .banner-layers,
.eka-banner .ux-banner-content,
.eka-banner .container,
.eka-banner .row,
.eka-banner .col { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .eka-banner .bg.bg-loaded::before,
  .eka-banner .bg.bg-loaded::after { animation: none !important; }
}

.eka-banner .bg.bg-loaded {
  opacity:0.1!important;
}
.eka-banner{
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(135deg, #4ec8ed, #ed2791) !important;
}

.bannervideuut .fill{
   border-radius:19px!important;
}
.laatikuut .text-box-content{
     border-top-right-radius: 15px!important;
}

.footikka {
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(135deg, #4ec8ed, #ed2791) !important;
}

.absolute-footer{
    display:none!important;
}

/***.footikka {
    background-image: linear-gradient(135deg, var(--purple), var(--pink))}



.ux-shape-divider--style-curve-opacity {
  background-image: url('https://angelmedias.com/wp-content/uploads/2025/08/654503ea918dd29ece92b620_element-zigzag.svg');
  background-repeat: no-repeat;
  background-size: cover; /* or contain, depending on your SVG design */
  background-position: center;
  height: 100px; /* Adjust based on your SVG */
}
.ux-shape-divider--style-curve-opacity svg {
  display: none;
}
.laatikko{
  z-index: 1;
}

.kuvitus img{
  border-radius:10px!important;
}

/* === Service card hover (Flatsome) with split text movement === */
.palvelu1 .col-inner{
  --bg: #0b0b0b;         /* base background */
  --hover-bg: #04d9ff;   /* hover background */
  --radius: 26px;
  --pad: 36px;
  --dur: 260ms;
  --ease: cubic-bezier(.25,.8,.25,1);

  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: hidden;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* smooth transforms/colors */
.palvelu1 .icon-box-img,
.palvelu1 .icon-box-img img,
.palvelu1 h2,
.palvelu1 p{
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  will-change: transform;
}

/* default colors */
.palvelu1 h2,
.palvelu1 p { color: rgba(255,255,255,.86); }

/* HOVER STATE */
.palvelu1:hover .col-inner,
.palvelu1:focus-within .col-inner{
  background: var(--hover-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Title: moves up less and turns black */
.palvelu1:hover h2,
.palvelu1:focus-within h2{
  transform: translateY(-3px); /* half the distance */
  color: #000 !important;
}

/* Paragraph: moves up more and turns black */
.palvelu1:hover p,
.palvelu1:focus-within p{
  transform: translateY(-6px);
  color: #000 !important;
}

/* Icon: moves down, no color change */
.palvelu1:hover .icon-box-img,
.palvelu1:hover .icon-box-img img,
.palvelu1:focus-within .icon-box-img,
.palvelu1:focus-within .icon-box-img img{
  transform: translateY(6px);
}

/* Whole column clickable via UX Builder link or overlay link */
.palvelu1 .card-link{
  position: absolute; inset: 0;
  z-index: 5; display: block;
  text-indent: -9999px; outline: none;
  border-radius: var(--radius);
}
.palvelu1 .card-link:focus-visible{
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.35);
}

/* === Service card hover (.palvelu3) with split text movement === */
.palvelu3 .col-inner{
  --bg: #0b0b0b;         /* base background */
  --hover-bg: #ccff00;   /* hover background */
  --radius: 26px;
  --pad: 36px;
  --dur: 260ms;
  --ease: cubic-bezier(.25,.8,.25,1);

  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: hidden;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* smooth transforms/colors */
.palvelu3 .icon-box-img,
.palvelu3 .icon-box-img img,
.palvelu3 h2,
.palvelu3 p{
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  will-change: transform;
}

/* default colors */
.palvelu3 h2,
.palvelu3 p { color: rgba(255,255,255,.86); }

/* HOVER STATE */
.palvelu3:hover .col-inner,
.palvelu3:focus-within .col-inner{
  background: var(--hover-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Title: moves up less and turns black */
.palvelu3:hover h2,
.palvelu3:focus-within h2{
  transform: translateY(-3px);
  color: #000 !important;
}

/* Paragraph: moves up more and turns black */
.palvelu3:hover p,
.palvelu3:focus-within p{
  transform: translateY(-6px);
  color: #000 !important;
}

/* Icon: moves down, no color change */
.palvelu3:hover .icon-box-img,
.palvelu3:hover .icon-box-img img,
.palvelu3:focus-within .icon-box-img,
.palvelu3:focus-within .icon-box-img img{
  transform: translateY(6px);
}

/* Whole column clickable via UX Builder link or overlay link */
.palvelu3 .card-link{
  position: absolute; inset: 0;
  z-index: 5; display: block;
  text-indent: -9999px; outline: none;
  border-radius: var(--radius);
}
.palvelu3 .card-link:focus-visible{
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.35);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ===== Mobile viewport alignment fix: push visible area to the RIGHT ===== */
@media (max-width: 766px){
  /* Keep the viewport hugging the right edge, but shift inner rails right */
  .phone-rails{ 
    padding-right: 0 !important;   /* remove extra right padding on mobile */
    padding-left: 0 !important;    /* ensure no unintended left padding */
    margin-left: auto !important;  /* keep aligned to the right */
    box-sizing: content-box !important;
  }
  .phone-rails .rails-inner{
    transform: translateX(80px) !important; /* move content 80px to the right */
  }
}

@media (max-width: 480px){
  /* Slightly smaller nudge for very small screens */
  .phone-rails .rails-inner{
    transform: translateX(60px) !important; /* fine‑tune on narrow phones */
  }
}

/* ==============================
   Sanakerrallaan — word reveal (manual spans or JS)
   Works with: <h2 class="sanakerrallaan"><span class="sk-word" style="--i:0">THIS </span>...</h2>
   ============================== */
.sanakerrallaan{
  --sk-duration: 0.45s;                  /* per-unit duration */
  --sk-stagger: 70ms;                    /* delay between words */
  --sk-ease: cubic-bezier(.2,.65,.2,1);  /* smooth ease */
  --sk-translate: 12px;                  /* start offset */
  --sk-blur: 3px;                        /* start blur */
}

/* Base: visible by default (no JS? the text still shows) */
.sanakerrallaan .sk-word,
.sanakerrallaan .sk-char{
  display: inline-block;
  vertical-align: baseline;
  will-change: transform, opacity, filter;
}

/* Pre-state: JS adds .sk-pre right before animating */
.sanakerrallaan.sk-pre .sk-word,
.sanakerrallaan.sk-pre .sk-char{
  opacity: 0;
  transform: translateY(var(--sk-translate));
  filter: blur(var(--sk-blur));
}

/* Play: JS adds .sk-in when heading is in view */
.sanakerrallaan.sk-in .sk-word,
.sanakerrallaan.sk-in .sk-char{
  animation: sk-fadeup var(--sk-duration) var(--sk-ease) both;
  animation-delay: calc(var(--i, 0) * var(--sk-stagger));
}

/* Debug helper: add 'sk-test' alongside the class to force play without JS */
.sanakerrallaan.sk-test .sk-word,
.sanakerrallaan.sk-test .sk-char{
  animation: sk-fadeup var(--sk-duration) var(--sk-ease) both;
  animation-delay: calc(var(--i, 0) * var(--sk-stagger));
}

@keyframes sk-fadeup{
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .sanakerrallaan .sk-word,
  .sanakerrallaan .sk-char{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Slow the reveal a bit on phones */
@media (max-width: 767px){
  .sanakerrallaan{
    --sk-duration: 0.65s;   /* was 0.45s */
    --sk-stagger: 110ms;    /* was 70ms */
  }
}
/* ==============================
   FOOTER REVEAL — trigger only when in view
   Scope: .footikka (footer) so other sections stay untouched
   ============================== */

/* 1) Stop the default keyframe animation in the footer and set a calm pre-state */
.footikka .home-hero-heading .reveal-word{
  /* cancel the global am-hero keyframes so it doesn't auto-play on page load */
  animation: none !important;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition:
    opacity .65s cubic-bezier(.2,.65,.2,1),
    transform .65s cubic-bezier(.2,.65,.2,1),
    filter .65s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform, filter;
}

/* Optional: subtle stagger across words for nicer cascade */
.footikka .home-hero-heading .reveal-word:nth-child(2){ transition-delay: .06s; }
.footikka .home-hero-heading .reveal-word:nth-child(3){ transition-delay: .12s; }
.footikka .home-hero-heading .reveal-word:nth-child(4){ transition-delay: .18s; }
.footikka .home-hero-heading .reveal-word:nth-child(5){ transition-delay: .24s; }
.footikka .home-hero-heading .reveal-word:nth-child(6){ transition-delay: .30s; }

/* 2) When JS marks them as in-view, reveal smoothly */
.footikka .home-hero-heading .reveal-word[data-animated="true"]{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Keep outlined style intact in the footer */
.footikka .home-hero-heading .reveal-word.outlined{
  color: transparent;
  -webkit-text-stroke: 3px var(--hero-color, #fff);
  text-stroke: 3px var(--hero-color, #fff);
  paint-order: stroke fill;
}

/* Mobile: slightly shorter travel & faster reveal so it feels snappier at the bottom of the page */
@media (max-width: 767px){
  .footikka .home-hero-heading .reveal-word{
    transform: translateY(24px);
    filter: blur(4px);
    transition-duration: .48s;
  }
}