/* =========================================================
   STYLE.CSS — Common / reusable global CSS
   Load this file before header.css, footer.css and page CSS.
========================================================= */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

:root {
   --red: #DE253A;
   --red-h: #C41F32;
   --red-tint: #FBE9EB;
   --black: #0A0A0A;
   --gray-60: #565656;
   --gray-40: #8A8A8A;
   --gray-20: #D0D0D0;
   --gray-10: #E8E8E8;
   --gray-05: #F5F5F5;
   --gray-02: #F8F8F8;
   --white: #FFFFFF;
   --ink: #0E0E0F;
   --fd: 'Sora', sans-serif;
   --fb: 'Instrument Sans', sans-serif;
   --fm: 'Roboto Mono', monospace;
   --px: 80px;
   --py: 96px;
   --cont: 1170px;
	   --red: #de253a;
   --red-h: #c41f32;
   --red-tint: #fbe9eb;
   --red-soft: rgba(222, 37, 58, 0.12);
   --black: #0a0a0a;
   --ink: #0e0e0f;
   --white: #ffffff;
   --g60: #565656;
   --g40: #8a8a8a;
   --g20: #d0d0d0;
   --g10: #e8e8e8;
   --g05: #f5f5f5;
   --g02: #f8f8f8;
}

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--fb);
   background: var(--white);
   color: var(--gray-60);
   font-size: 16px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased
}

.wrap {
   max-width: var(--cont);
   margin: 0 auto;
   padding: 0 var(--px)
}

.sec {
   padding: var(--py) 0
}

.sec-w {
   background: var(--white)
}

.sec-g {
   background: var(--gray-05)
}

h1,
h2,
h3,
h4 {
   font-family: var(--fd);
   color: var(--black);
   letter-spacing: -.025em
}

h1 em,
h2 em,
h3 em {
   font-style: normal;
   color: var(--red)
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--fm);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 14px
}

.eyebrow::before {
   content: '';
   width: 20px;
   height: 1px;
   background: var(--red);
   flex-shrink: 0
}

.eyebrow-c {
   justify-content: center
}

.eyebrow-c::before {
   display: none
}

/* ── BUTTONS ── */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   padding: 0 28px;
   border-radius: 100px;
   font-family: var(--fd);
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .02em;
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
   border: none
}

.btn-lg {
   height: 56px;
   padding: 0 36px;
   font-size: 15px
}

.btn-sm {
   height: 40px;
   padding: 0 20px;
   font-size: 13px
}

.btn-p {
   position: relative;
   overflow: hidden;
   background: transparent;
   color: var(--black);
   border: 1.5px solid rgba(222, 37, 58, .4);
   border-radius: 100px;
   gap: 4px;
   transition: border-color 600ms cubic-bezier(.23, 1, .32, 1), border-radius 600ms cubic-bezier(.23, 1, .32, 1), color 600ms cubic-bezier(.23, 1, .32, 1)
}

.btn-p:hover {
   border-color: transparent;
   color: var(--white);
   border-radius: 12px
}

.btn-p:active {
   transform: scale(.95)
}

.btn-p .bc {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
   background: var(--red);
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
   z-index: 0;
   transition: width 800ms cubic-bezier(.19, 1, .22, 1), height 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

.btn-p:hover .bc {
   width: 300px;
   height: 300px;
   opacity: 1
}

.btn-p .bl {
   position: relative;
   z-index: 1;
   transform: translateX(-4px);
   transition: transform 800ms ease-out;
   padding: 0 8px
}

.btn-sm.btn-p .bl {
   padding: 0 16px
}

.btn-p:hover .bl {
   transform: translateX(4px)
}

.btn-p .ba-l {
   position: absolute;
   left: -20%;
   z-index: 9;
   color: var(--black);
   display: flex;
   align-items: center;
   transition: left 800ms cubic-bezier(.34, 1.56, .64, 1), color 600ms ease
}

.btn-p:hover .ba-l {
   left: 18px;
   color: var(--white)
}

.btn-p .ba-r {
   position: absolute;
   right: 18px;
   z-index: 9;
   color: var(--black);
   display: flex;
   align-items: center;
   transition: right 800ms cubic-bezier(.34, 1.56, .64, 1), color 600ms ease
}

.btn-p:hover .ba-r {
   right: -20%;
   color: var(--white)
}

.btn-p .ba-l svg,
.btn-p .ba-r svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round
}

.btn-p-w {
   color: var(--white);
   border-color: rgba(255, 255, 255, .3)
}

.btn-p-w .ba-l,
.btn-p-w .ba-r {
   color: var(--white)
}

.btn-p-w:hover {
   color: var(--white)
}

.btn-p-w .bc {
   background: var(--red)
}

.btn-o {
   background: transparent;
   color: var(--black);
   border: 1.5px solid var(--gray-20);
   transition: background 200ms, border-color 200ms, transform 200ms
}

.btn-o:hover {
   background: var(--gray-05);
   border-color: var(--gray-40);
   transform: translateY(-2px)
}

.btn-o-w {
   color: rgba(255, 255, 255, .65);
   border-color: rgba(255, 255, 255, .2)
}

.btn-o-w:hover {
   background: rgba(255, 255, 255, .07);
   border-color: rgba(255, 255, 255, .4);
   color: var(--white);
   transform: translateY(-2px)
}

/* ── REVEAL ── */
[data-r] {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity 500ms cubic-bezier(.16, 1, .3, 1), transform 500ms cubic-bezier(.16, 1, .3, 1)
}

[data-r].vis {
   opacity: 1;
   transform: none
}


/* ── BRAND / LOGO — shared by header and footer ── */
.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   flex-shrink: 0
}

.logo-t {
   font-family: var(--fd);
   font-size: 17px;
   font-weight: 700;
   color: var(--white);
   letter-spacing: -.02em
}


/* ── SHARED ANIMATIONS ── */
@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .3
   }
}


/* ── COMMON RESPONSIVE TOKENS ── */
@media(max-width:1024px) {
   :root {
      --px: 40px
   }
}

@media(max-width:640px) {
   :root {
      --px: 24px;
      --py: 64px
   }
}

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

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



/* Modal CSS Start */
/* ── MODAL OVERLAY ── */
.modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 500;
   background: rgba(10, 10, 10, .7);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .25s
}

.modal-overlay.open {
   opacity: 1;
   pointer-events: auto
}

.modal-box {
   background: var(--white);
   border-radius: 16px;
   padding: 44px;
   max-width: 500px;
   width: 90%;
   position: relative;
   transform: translateY(24px) scale(.97);
   transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
}

.modal-overlay.open .modal-box {
   transform: none
}

.modal-close {
   position: absolute;
   top: 18px;
   right: 18px;
   background: none;
   border: none;
   cursor: pointer;
   color: var(--gray-40);
   padding: 4px;
   transition: color .15s;
   display: flex;
   align-items: center;
   justify-content: center
}

.modal-close:hover {
   color: var(--black)
}

.modal-close svg {
   width: 20px;
   height: 20px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round
}

.modal-eyebrow {
   font-family: var(--fm);
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 12px
}

.modal-box h3 {
   font-family: var(--fd);
   font-size: 24px;
   font-weight: 700;
   color: var(--black);
   letter-spacing: -.02em;
   margin-bottom: 8px
}

.modal-box>p {
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.7;
   margin-bottom: 24px
}

.mf-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.mf-field {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 12px
}

.mf-label {
   font-family: var(--fm);
   font-size: 10px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--gray-40)
}

.mf-input {
   width: 100%;
   height: 44px;
   padding: 0 13px;
   background: var(--gray-02);
   border: 1.5px solid var(--gray-10);
   border-radius: 5px;
   font-family: var(--fb);
   font-size: 14px;
   color: var(--black);
   outline: none;
   transition: border-color .15s
}

.mf-input:focus {
   border-color: var(--red)
}

.mf-input::placeholder {
   color: var(--gray-20)
}

.mf-submit {
   width: 100%;
   height: 48px;
   background: var(--red);
   color: var(--white);
   border: none;
   border-radius: 6px;
   font-family: var(--fd);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background .15s;
   margin-top: 4px;
   letter-spacing: .02em
}

.mf-submit:hover {
   background: var(--red-h)
}

.mf-note {
   font-family: var(--fm);
   font-size: 10px;
   color: var(--gray-40);
   text-align: center;
   margin-top: 10px;
   letter-spacing: .06em
}

@media (max-width: 640px) {
   .modal-box {
      padding: 20px;
   }
}

/* Modal CSS End */