:root{
  --blue:#3369e7;
  --pink:#fb00c0;
  --lavender:#8f7cff;
  --text:#31507e;
  --white:#fff;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  background:#fff;
}

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


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  padding:22px 28px;
}

.header-inner{
  width:min(1180px,100%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.site-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-size:21px;
  font-weight:800;
  letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(70,90,170,.25);
}

.brand-star{
  color:#ffe27a;
  font-size:23px;
  text-shadow:
    0 0 6px #fff,
    0 0 15px rgba(255,220,90,.9);
}

.global-nav{
  display:flex;
  align-items:center;
  gap:27px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}

.global-nav a{
  transition:opacity .25s ease,transform .25s ease;
}

.global-nav a:hover{
  opacity:.72;
  transform:translateY(-2px);
}

.global-nav .ripue-link{
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
}

.menu-button{
  display:none;
}


/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  min-height:760px;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  isolation:isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-5;
  background-image:url("/assets/images/hero-user-dog-v41.jpg");
  background-size:cover;
  background-position:center center;
  transform:scale(1.015);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(
      90deg,
      rgba(105,143,229,.28) 0%,
      rgba(159,151,233,.15) 42%,
      rgba(255,188,226,.08) 100%
    );
}

.hero-glow{
  position:absolute;
  width:700px;
  height:700px;
  left:-250px;
  top:50%;
  transform:translateY(-50%);
  z-index:-3;
  border-radius:50%;
  background:rgba(181,214,255,.24);
  filter:blur(65px);
}

.hero-content{
  width:min(1180px,calc(100% - 56px));
  margin:auto;
  position:relative;
  z-index:10;
  padding-top:50px;
}

.hero-kicker{
  display:flex;
  align-items:center;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.24em;
  margin-bottom:19px;
  text-shadow:0 2px 15px rgba(73,90,160,.2);
}

.hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(48px,6vw,82px);
  line-height:1.22;
  letter-spacing:.06em;
  font-weight:800;
  text-shadow:0 3px 24px rgba(81,102,173,.18);
}

.hero-message{
  margin:28px 0 0;
  color:#fff;
  font-size:17px;
  line-height:2;
  letter-spacing:.08em;
  font-weight:600;
  text-shadow:0 2px 13px rgba(69,89,155,.22);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:36px;
}

.button-primary,
.button-ripue{
  min-width:205px;
  padding:15px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  transition:transform .25s ease,box-shadow .25s ease;
}

.button-primary{
  color:var(--blue);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(72,103,178,.16);
}

.button-ripue{
  color:#fff;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
}

.button-primary:hover,
.button-ripue:hover{
  transform:translateY(-3px);
}


/* =========================================================
   CRESCENT MOON
========================================================= */

.hero-moon{
  display:inline-block;
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  margin-right:9px;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,244,180,.82));
  animation:moon-breathe 6.5s ease-in-out infinite;
}

.moon-crescent{
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 35% 32%,
      #fffef2 0 18%,
      #fff5bd 45%,
      #f7dc78 75%,
      #fff2aa 100%
    );
  box-shadow:
    0 0 9px rgba(255,244,170,.9),
    0 0 20px rgba(255,238,155,.58);
}

.moon-crescent::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  top:-4px;
  left:9px;
  border-radius:50%;
  background:rgba(245,242,255,.98);
}

@keyframes moon-breathe{
  0%,100%{
    opacity:.48;
    transform:scale(.92);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
  }
}


/* =========================================================
   ROTATING STAR SHAPE
========================================================= */

.hero-star-path{
  position:absolute;
  left:76%;
  top:57%;
  width:132px;
  height:132px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:6;
}

.star-shape{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  animation:star-orbit-spin 12s linear infinite;
  transform-origin:50% 50%;
}

.star-shape polygon{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:1.7;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.75));
}

.path-star{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  display:block;
  font-family:Arial,sans-serif;
  font-size:18px;
  line-height:18px;
  text-align:center;
  font-weight:700;
  z-index:7;
  animation:path-star-twinkle 1.8s ease-in-out infinite;
  text-shadow:
    0 0 4px #fff,
    0 0 11px currentColor;
}

.ps1{left:50%;top:4%;color:#ff4fa3;}
.ps2{left:91%;top:34%;color:#47d9ff;}
.ps3{left:76%;top:85%;color:#ffd83d;}
.ps4{left:24%;top:85%;color:#b47cff;}
.ps5{left:9%;top:34%;color:#43e6a8;}
.ps6{left:50%;top:50%;color:#ff8a55;}

@keyframes star-orbit-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes path-star-twinkle{
  0%,100%{
    opacity:.55;
    filter:brightness(1);
  }
  50%{
    opacity:1;
    filter:brightness(1.8);
  }
}


/* =========================================================
   FLOATING YELLOW STARS
========================================================= */

.yellow-star{
  position:absolute;
  z-index:7;
  color:#ffe28a;
  pointer-events:none;
  line-height:1;
  text-shadow:
    0 0 5px #fff,
    0 0 12px rgba(255,211,89,.95),
    0 0 22px rgba(255,211,89,.55);
  animation:yellow-twinkle 2.2s ease-in-out infinite;
}

.yellow-star-1{
  right:7%;
  top:39%;
  font-size:20px;
}

.yellow-star-2{
  right:17%;
  top:24%;
  font-size:12px;
  animation-delay:-1.1s;
}

@keyframes yellow-twinkle{
  0%,100%{
    opacity:.65;
    transform:scale(.9);
  }
  50%{
    opacity:1;
    transform:scale(1.15);
  }
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-guide{
  position:absolute;
  left:50%;
  bottom:27px;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  color:#fff;
}

.scroll-guide span{
  font-size:9px;
  letter-spacing:.28em;
  font-weight:700;
}

.scroll-guide i{
  display:block;
  width:1px;
  height:38px;
  background:rgba(255,255,255,.75);
  animation:scroll-line 2s ease-in-out infinite;
  transform-origin:top;
}

@keyframes scroll-line{
  0%{transform:scaleY(.2);opacity:.2;}
  50%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(.2);opacity:.2;}
}


/* =========================================================
   INTRO
========================================================= */

.intro{
  position:relative;
  padding:110px 24px 120px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(190,221,255,.22),transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(255,192,230,.18),transparent 30%),
    #fff;
}

.section-inner{
  width:min(920px,100%);
  margin:auto;
}

.section-kicker{
  display:block;
  margin-bottom:15px;
  color:var(--pink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
}

.intro h2{
  margin:0;
  color:var(--blue);
  font-size:clamp(34px,5vw,54px);
  letter-spacing:.05em;
}

.intro p{
  margin:27px 0 0;
  font-size:16px;
  line-height:2.2;
  letter-spacing:.05em;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .75s ease,
    transform .75s ease;
  will-change:opacity,transform;
}

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


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .site-header{
    padding:18px 18px;
  }

  .site-brand{
    font-size:17px;
  }

  .global-nav{
    display:none;
  }

  .menu-button{
    width:42px;
    height:42px;
    padding:10px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;
    background:rgba(255,255,255,.13);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
  }

  .menu-button span{
    width:18px;
    height:1.5px;
    background:#fff;
    border-radius:10px;
  }

  .hero{
    min-height:700px;
  }

  .hero-bg{
    background-position:center center;
  }

  .hero-content{
    width:calc(100% - 36px);
    padding-top:80px;
  }

  .hero-kicker{
    font-size:12px;
    letter-spacing:.18em;
  }

  .hero h1{
    font-size:clamp(40px,12vw,57px);
    line-height:1.25;
  }

  .hero-message{
    margin-top:22px;
    font-size:14px;
    line-height:1.9;
  }

  .hero-actions{
    margin-top:28px;
    gap:10px;
  }

  .button-primary,
  .button-ripue{
    min-width:0;
    padding:13px 17px;
    font-size:11px;
  }

  .hero-moon{
    width:31px;
    height:31px;
    margin-right:7px;
  }

  .moon-crescent::after{
    width:25px;
    height:25px;
    left:8px;
    top:-4px;
  }

  .hero-star-path{
    left:76%;
    top:57%;
    width:132px;
    height:132px;
  }

  .path-star{
    font-size:15px;
    width:16px;
    height:16px;
    line-height:16px;
    margin:-8px 0 0 -8px;
  }

  .yellow-star-1{
    right:5%;
    top:40%;
    font-size:16px;
  }

  .yellow-star-2{
    right:12%;
    top:27%;
    font-size:10px;
  }

  .intro{
    padding:85px 22px 95px;
  }

  .intro p{
    font-size:14px;
    line-height:2;
  }

  .pc-only{
    display:none;
  }
}


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

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }

  .reveal-on-scroll{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   FLOWING STAR FIELD
   旧 Star polygon サイトから移植
========================================================= */

.star-stream {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.star-stream span {
    position: absolute;
    top: -30px;
    color: #fff;
    text-shadow:
        0 0 8px rgba(120, 164, 235, .75),
        0 0 16px rgba(239, 116, 177, .45);
    opacity: 0;
    animation: star-fall linear infinite;
    will-change: transform, opacity;
}

.star-stream span:nth-child(1) {
    left: 5%;
    font-size: 10px;
    animation-duration: 9s;
    animation-delay: 0s;
}

.star-stream span:nth-child(2) {
    left: 13%;
    font-size: 14px;
    animation-duration: 12s;
    animation-delay: 2s;
}

.star-stream span:nth-child(3) {
    left: 22%;
    font-size: 8px;
    animation-duration: 10s;
    animation-delay: 5s;
}

.star-stream span:nth-child(4) {
    left: 31%;
    font-size: 12px;
    animation-duration: 14s;
    animation-delay: 1s;
}

.star-stream span:nth-child(5) {
    left: 42%;
    font-size: 9px;
    animation-duration: 11s;
    animation-delay: 6s;
}

.star-stream span:nth-child(6) {
    left: 54%;
    font-size: 14px;
    animation-duration: 13s;
    animation-delay: 3s;
}

.star-stream span:nth-child(7) {
    left: 66%;
    font-size: 8px;
    animation-duration: 10s;
    animation-delay: 7s;
}

.star-stream span:nth-child(8) {
    left: 76%;
    font-size: 12px;
    animation-duration: 15s;
    animation-delay: 4s;
}

.star-stream span:nth-child(9) {
    left: 87%;
    font-size: 9px;
    animation-duration: 11s;
    animation-delay: 8s;
}

.star-stream span:nth-child(10) {
    left: 94%;
    font-size: 13px;
    animation-duration: 13s;
    animation-delay: 1s;
}

@keyframes star-fall {
    0% {
        transform: translate3d(0, -30px, 0) rotate(0deg) scale(.6);
        opacity: 0;
    }

    12% {
        opacity: .75;
    }

    55% {
        opacity: .9;
    }

    100% {
        transform: translate3d(35px, 110vh, 0) rotate(180deg) scale(1);
        opacity: 0;
    }
}

/* =========================================================
   FLOWING STAR FIELD - PRODUCTION VISUAL
========================================================= */

.star-stream span {
    font-size: clamp(17px, 2vw, 30px) !important;
    font-weight: 700;
    text-shadow:
        0 0 7px currentColor,
        0 0 15px currentColor,
        0 0 24px rgba(255,255,255,.7);
    opacity: .9;
}

.star-stream span:nth-child(1)  { left:3%;  color:#79a9ff; animation-duration:10s; animation-delay:0s; }
.star-stream span:nth-child(2)  { left:9%;  color:#ff82bd; animation-duration:12s; animation-delay:2s; }
.star-stream span:nth-child(3)  { left:16%; color:#ffd86b; animation-duration:9s;  animation-delay:4s; }
.star-stream span:nth-child(4)  { left:23%; color:#9d8cff; animation-duration:13s; animation-delay:1s; }
.star-stream span:nth-child(5)  { left:30%; color:#65d9ff; animation-duration:11s; animation-delay:6s; }
.star-stream span:nth-child(6)  { left:38%; color:#ff9bd1; animation-duration:14s; animation-delay:3s; }
.star-stream span:nth-child(7)  { left:46%; color:#ffe26f; animation-duration:10s; animation-delay:7s; }
.star-stream span:nth-child(8)  { left:54%; color:#7db5ff; animation-duration:13s; animation-delay:4s; }
.star-stream span:nth-child(9)  { left:62%; color:#c28cff; animation-duration:9s;  animation-delay:8s; }
.star-stream span:nth-child(10) { left:70%; color:#ff82b7; animation-duration:12s; animation-delay:2s; }
.star-stream span:nth-child(11) { left:78%; color:#69dfff; animation-duration:11s; animation-delay:5s; }
.star-stream span:nth-child(12) { left:86%; color:#ffd66e; animation-duration:14s; animation-delay:1s; }
.star-stream span:nth-child(13) { left:93%; color:#a48dff; animation-duration:10s; animation-delay:6s; }
.star-stream span:nth-child(14) { left:98%; color:#ff91c7; animation-duration:13s; animation-delay:3s; }

.star-stream span:nth-child(15) { left:7%;  color:#8ab6ff; animation-duration:11s; animation-delay:3s; }
.star-stream span:nth-child(16) { left:19%; color:#ff9acb; animation-duration:14s; animation-delay:7s; }
.star-stream span:nth-child(17) { left:28%; color:#ffe27a; animation-duration:10s; animation-delay:2s; }
.star-stream span:nth-child(18) { left:35%; color:#b19aff; animation-duration:12s; animation-delay:8s; }
.star-stream span:nth-child(19) { left:49%; color:#72dcff; animation-duration:15s; animation-delay:5s; }
.star-stream span:nth-child(20) { left:59%; color:#ff8fbd; animation-duration:11s; animation-delay:9s; }
.star-stream span:nth-child(21) { left:72%; color:#ffd96e; animation-duration:13s; animation-delay:4s; }
.star-stream span:nth-child(22) { left:82%; color:#a991ff; animation-duration:10s; animation-delay:6s; }


/* =========================================================
   HERO STAR ORBIT - PRODUCTION SIZE
========================================================= */

@media (min-width: 701px) {
    .sp-hero-star-path {
        left: 76% !important;
        top: 55% !important;
        width: 190px !important;
        height: 190px !important;
    }

    .sp-path-star {
        width: 23px !important;
        height: 23px !important;
        margin: -11.5px 0 0 -11.5px !important;
        font-size: 22px !important;
        line-height: 23px !important;
    }

    .sp-ps1 { left: 50% !important; top: 1% !important; }
    .sp-ps2 { left: 94% !important; top: 31% !important; }
    .sp-ps3 { left: 78% !important; top: 92% !important; }
    .sp-ps4 { left: 22% !important; top: 92% !important; }
    .sp-ps5 { left: 6% !important; top: 31% !important; }
    .sp-ps6 { left: 50% !important; top: 50% !important; }
}


/* =========================================================
   HOME HERO - PRODUCTION PROPORTION
========================================================= */

.hero {
    min-height: 475px !important;
    height: 475px !important;
    background: linear-gradient(180deg,#fff,#f7fbff);
}

.hero-bg {
    background-size: cover !important;
    background-position: 54% 48% !important;
    transform: none !important;
}

.hero-overlay {
    background:
        radial-gradient(
            circle at 72% 38%,
            rgba(255,226,240,.28),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.86) 29%,
            rgba(255,255,255,.25) 52%,
            rgba(255,255,255,.02) 75%
        ) !important;
}

@media (max-width: 900px) {
    .hero-bg {
        background-position: 55% 47% !important;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: 0 !important;
        height: clamp(390px, 92vw, 500px) !important;
    }

    .hero-bg {
        background-size: cover !important;
        background-position: 55% 34% !important;
        transform: none !important;
    }
}


/* =========================================================
   HOME HERO - COPY PRODUCTION BALANCE
========================================================= */

.hero-content {
    padding-top: 0 !important;
}

.hero h1 {
    font-size: clamp(40px, 4.1vw, 59px) !important;
    line-height: 1.25 !important;
}

.hero h1 span {
    color: #fb00c0;
}

.hero-message {
    margin-top: 22px !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
}

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

@media (max-width: 900px) {
    .hero-content {
        align-self: stretch;
        padding-top: 44px !important;
        padding-bottom: 45px !important;
    }
}

@media (max-width: 560px) {
    .hero-content {
        width: calc(100% - 32px) !important;
        padding-top: 25px !important;
        padding-bottom: 30px !important;
    }

    .hero h1 {
        font-size: 33px !important;
    }

    .hero-message {
        font-size: 11px !important;
        line-height: 1.75 !important;
    }
}


/* =========================================================
   HOME HERO - PRODUCTION WAVES
========================================================= */

.wave {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 92px;
    bottom: -31px;
    z-index: 20;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.wave-one {
    background:
        linear-gradient(
            90deg,
            rgba(133,197,244,.95),
            rgba(216,240,255,.8),
            rgba(255,255,255,.8),
            rgba(255,206,229,.92)
        );
    transform: rotate(-2deg);
}

.wave-two {
    bottom: -43px;
    height: 68px;
    background: rgba(255,255,255,.76);
    transform: rotate(2deg);
}

.wave-one::before,
.wave-two::before,
.wave-one::after,
.wave-two::after {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.wave-one::before,
.wave-two::before {
    content: "✦   ✦   ˚   ✧   ˚   ☆   ✦   ✦";
    font-size: clamp(9px,1.25vw,16px);
    letter-spacing: clamp(4px,1vw,12px);
    opacity: .68;
    text-shadow:
        0 0 7px rgba(255,255,255,.9),
        0 0 14px rgba(255,164,207,.5);
}

.wave-one::before {
    top: 18%;
    color: #fff;
}

.wave-two::before {
    top: 43%;
    color: #d9caff;
}

.wave-one::after,
.wave-two::after {
    content: "✦  ˚  ✧  ˚  ☆  ˚  ✦  ˚  ✧";
    font-size: clamp(10px,1.4vw,18px);
    letter-spacing: clamp(5px,1.5vw,16px);
    text-shadow:
        0 0 6px rgba(255,255,255,.95),
        0 0 13px rgba(142,185,255,.6);
    opacity: .85;
}

.wave-one::after {
    top: 34%;
    color: #fff;
}

.wave-two::after {
    top: 58%;
    color: #ffd6ea;
    opacity: .7;
    transform: translateX(10px);
}

@media (max-width:560px) {
    .wave-one::before,
    .wave-two::before {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .wave-one::after,
    .wave-two::after {
        font-size: 10px;
        letter-spacing: 5px;
    }
}


/* =========================================================
   HEADER + HERO TYPOGRAPHY - PRODUCTION BALANCE
========================================================= */

/* Header */
.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid rgba(89,116,165,.10);
    box-shadow: 0 2px 12px rgba(70,94,140,.04);
}

.header-inner {
    min-height: 76px;
}

.site-brand {
    color: #315f9f !important;
}

.brand-star {
    color: #fb00c0 !important;
}

.global-nav a {
    color: #46566d !important;
    text-shadow: none !important;
}

.global-nav .ripue-link {
    color: #3369e7 !important;
    border-color: rgba(51,105,231,.30) !important;
    background: rgba(255,255,255,.82) !important;
}

/* Hero copy */
.hero-kicker {
    color: #3369e7 !important;
    text-shadow: none !important;
}

.hero h1 {
    color: #3369e7 !important;
    text-shadow: none !important;
}

.hero h1 span {
    color: #f04b98 !important;
}

.hero-message {
    color: #536782 !important;
    text-shadow: none !important;
}

/* Buttons */
.button-primary {
    color: #fff !important;
    background: linear-gradient(90deg,#3478df,#2e63c3) !important;
}

.button-ripue {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(90deg,#ef5b9e,#e93682) !important;
}

/* Scroll guide is unnecessary on the compact production hero */
.scroll-guide {
    display: none !important;
}

@media (max-width: 900px) {
    .header-inner {
        min-height: 68px;
    }
}


/* =========================================================
   HEADER POSITION - RESTORE OVER HERO
========================================================= */

.site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.header-inner {
    min-height: 88px !important;
}

.site-brand {
    color: #fff !important;
}

.brand-star {
    color: #ffe36e !important;
}

.global-nav a {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(61,75,120,.18) !important;
}

.global-nav .ripue-link {
    color: #fff !important;
    border-color: rgba(255,255,255,.75) !important;
    background: rgba(255,255,255,.08) !important;
}

@media (max-width: 900px) {
    .header-inner {
        min-height: 76px !important;
    }
}


/* =========================================================
   HEADER BRAND - HIDE ON HOME HERO
========================================================= */

.site-brand {
    visibility: hidden !important;
}


/* =========================================================
   COMMON HEADER v1
   New PHP site / shared header
   Hero design is intentionally untouched.
========================================================= */

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:58px !important;
  padding:0 20px !important;
  z-index:10000 !important;
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(89,116,165,.10) !important;
  box-shadow:0 2px 12px rgba(70,94,140,.06) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.site-header .header-inner{
  width:min(1180px,100%) !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}

.site-header .site-brand{
  visibility:visible !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#315f9f !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-shadow:none !important;
  white-space:nowrap;
}

.site-header .brand-star{
  color:#fb00c0 !important;
  font-size:18px !important;
  text-shadow:none !important;
}

.site-header .global-nav{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  color:#46566d !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
}

.site-header .global-nav a{
  color:#46566d !important;
  text-shadow:none !important;
  transition:opacity .2s ease,transform .2s ease;
}

.site-header .global-nav a:hover{
  opacity:.65;
  transform:none;
}

.site-header .global-nav .ripue-link{
  padding:7px 13px !important;
  color:#3369e7 !important;
  border:1px solid rgba(51,105,231,.28) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.8) !important;
}

.site-header .menu-button{
  display:none;
  width:38px;
  height:38px;
  padding:7px;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.site-header .menu-button span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  border-radius:999px;
  background:#3369e7;
  transition:transform .25s ease,opacity .25s ease;
}

@media(max-width:768px){

  .site-header{
    height:54px !important;
    padding:0 12px !important;
  }

  .site-header .header-inner{
    height:54px !important;
    min-height:54px !important;
  }

  .site-header .site-brand{
    font-size:14px !important;
  }

  .site-header .brand-star{
    font-size:17px !important;
  }

  .site-header .global-nav{
    display:none !important;
  }

  .site-header .menu-button{
    display:block !important;
  }

  .site-header .global-nav.is-open{
    display:flex !important;
    position:absolute !important;
    top:54px !important;
    left:10px !important;
    right:10px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid #e1e8f4 !important;
    border-radius:14px !important;
    box-shadow:0 14px 32px rgba(61,93,148,.12) !important;
  }

  .site-header .global-nav.is-open a{
    display:block !important;
    padding:12px 13px !important;
    border-bottom:1px solid #edf1f6 !important;
    color:#46566d !important;
  }

  .site-header .global-nav.is-open a:last-child{
    border-bottom:0 !important;
  }

  .site-header .global-nav.is-open .ripue-link{
    margin-top:5px;
    text-align:center;
    border:1px solid rgba(51,105,231,.25) !important;
  }

}