@import url(https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap);
/* special-elite-latin-ext-400-normal */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(123effcbbbbc2830afae.woff2) format('woff2'), url(27e72f2403350b77c263.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* special-elite-latin-400-normal */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(210560970aebbb05cdc5.woff2) format('woff2'), url(b552a6edf05a990e4396.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* permanent-marker-latin-400-normal */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(bd982c23c848c3486469.woff2) format('woff2'), url(620e313233adb6e7af76.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* manrope-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(dd6629a5ac96b1b9496b.woff2) format('woff2'), url(d706d6c43b0214bfb650.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(67d2f5cd27a74c066bb7.woff2) format('woff2'), url(803cbd0e719151df3d8f.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(91c29e2e99de39ffd2db.woff2) format('woff2'), url(94e36a3348e01178daa1.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(07b7f29f8b0fb89c929a.woff2) format('woff2'), url(96dac2f6286e1a04f9b9.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(a05ad2a2eb9002767f90.woff2) format('woff2'), url(5519f7a0fd74c0aa3aac.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(84d41d78bb782fb0f969.woff2) format('woff2'), url(0d1ad757ee42bab20614.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* manrope-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(089722617bc2a1516cec.woff2) format('woff2'), url(4bbf09a9b13d319bf5fd.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fc7005426b89f1e8a5a0.woff2) format('woff2'), url(09ed6ca36d257b1a4881.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(728f66dc2faf2d2a642d.woff2) format('woff2'), url(5fc8a48033a208313724.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(7b668eb50143b685afd7.woff2) format('woff2'), url(a240bc5d3e2b56b8dd99.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(908f435aaf9ae938320e.woff2) format('woff2'), url(16b78ad10143191b033d.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-600-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(af1782c892c03046369d.woff2) format('woff2'), url(2b64d70a40d9de82bb19.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* manrope-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(4ee2708831b279ef20f1.woff2) format('woff2'), url(b2b2b1d8ddf951e3ba37.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(682e60cb17fbaab47031.woff2) format('woff2'), url(b3861ca8cfacc88c54ff.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(8b5144f5aa9ba2f87b92.woff2) format('woff2'), url(f68cae99ba31ccd12a09.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(5d5f32888990c62b5471.woff2) format('woff2'), url(1d5cbbeae3c8b8b0b3fa.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(7559db14fbd483e845ce.woff2) format('woff2'), url(d75558844f2c31e07286.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(bee86ea645ea6bd5d499.woff2) format('woff2'), url(86549a2403b1726731ce.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* manrope-cyrillic-ext-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fa6c2a853a401d0b7323.woff2) format('woff2'), url(653a86fb0dde04c5d67b.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(bf391c5f5929ee7dae46.woff2) format('woff2'), url(adff08dfb58b366929a1.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(e855627ebd5f299a0696.woff2) format('woff2'), url(92555cde25344c2a33c9.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(255fcd44c960fc685414.woff2) format('woff2'), url(2c4dc9e45dd0af517673.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(c4e14ceb7de4b7e6a2ac.woff2) format('woff2'), url(bf48bc6f90ffbc28de47.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(dfaa3215b31de9a0e360.woff2) format('woff2'), url(a522549d0f2dd5ec2b48.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-\[calc\(11\.75rem\+env\(safe-area-inset-bottom\)\)\]{
  bottom: calc(11.75rem + env(safe-area-inset-bottom));
}
.isolate{
  isolation: isolate;
}
.-z-10{
  z-index: -10;
}
.-z-20{
  z-index: -20;
}
.z-10{
  z-index: 10;
}
.z-\[10080\]{
  z-index: 10080;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.block{
  display: block;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-full{
  height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-full{
  width: 100%;
}
.min-w-\[6rem\]{
  min-width: 6rem;
}
.min-w-\[7\.5rem\]{
  min-width: 7.5rem;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[20rem\]{
  max-width: 20rem;
}
.max-w-\[22rem\]{
  max-width: 22rem;
}
.shrink-0{
  flex-shrink: 0;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.items-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.rounded-\[1\.5rem\]{
  border-radius: 1.5rem;
}
.rounded-full{
  border-radius: 9999px;
}
.border{
  border-width: 1px;
}
.border-\[\#5a3824\]\/15{
  border-color: rgb(90 56 36 / 0.15);
}
.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25{
  border-color: rgb(255 255 255 / 0.25);
}
.bg-\[\#09090b\]{
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5a3824\]{
  --tw-bg-opacity: 1;
  background-color: rgb(90 56 36 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff8ef\]\/95{
  background-color: rgb(255 248 239 / 0.95);
}
.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}
.bg-nico-black{
  --tw-bg-opacity: 1;
  background-color: rgb(27 26 29 / var(--tw-bg-opacity, 1));
}
.bg-nico-red{
  --tw-bg-opacity: 1;
  background-color: rgb(220 2 41 / var(--tw-bg-opacity, 1));
}
.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/60{
  background-color: rgb(255 255 255 / 0.6);
}
.bg-\[radial-gradient\(circle_at_78\%_20\%\2c rgba\(220\2c 2\2c 41\2c 0\.24\)\2c transparent_28\%\)\2c linear-gradient\(90deg\2c rgba\(27\2c 26\2c 29\2c 0\.98\)_0\%\2c rgba\(27\2c 26\2c 29\2c 0\.88\)_46\%\2c rgba\(27\2c 26\2c 29\2c 0\.48\)_100\%\)\]{
  background-image: radial-gradient(circle at 78% 20%,rgba(220,2,41,0.24),transparent 28%),linear-gradient(90deg,rgba(27,26,29,0.98) 0%,rgba(27,26,29,0.88) 46%,rgba(27,26,29,0.48) 100%);
}
.bg-\[radial-gradient\(circle_at_82\%_16\%\2c rgba\(220\2c 2\2c 41\2c 0\.20\)\2c transparent_34\%\)\2c linear-gradient\(180deg\2c rgba\(9\2c 9\2c 11\2c 0\.08\)_0\%\2c rgba\(9\2c 9\2c 11\2c 0\.04\)_38\%\2c rgba\(9\2c 9\2c 11\2c 0\.40\)_58\%\2c rgba\(9\2c 9\2c 11\2c 0\.92\)_100\%\)\]{
  background-image: radial-gradient(circle at 82% 16%,rgba(220,2,41,0.20),transparent 34%),linear-gradient(180deg,rgba(9,9,11,0.08) 0%,rgba(9,9,11,0.04) 38%,rgba(9,9,11,0.40) 58%,rgba(9,9,11,0.92) 100%);
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.object-\[center_24\%\]{
  -o-object-position: center 24%;
     object-position: center 24%;
}
.object-center{
  -o-object-position: center;
     object-position: center;
}
.p-3{
  padding: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pt-32{
  padding-top: 8rem;
}
.text-left{
  text-align: left;
}
.text-\[0\.9rem\]{
  font-size: 0.9rem;
}
.text-\[1\.08rem\]{
  font-size: 1.08rem;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-8{
  line-height: 2rem;
}
.leading-\[1\.45\]{
  line-height: 1.45;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}
.tracking-\[0\.22em\]{
  letter-spacing: 0.22em;
}
.text-\[\#241a16\]{
  --tw-text-opacity: 1;
  color: rgb(36 26 22 / var(--tw-text-opacity, 1));
}
.text-\[\#5a3824\]{
  --tw-text-opacity: 1;
  color: rgb(90 56 36 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a35\]{
  --tw-text-opacity: 1;
  color: rgb(138 90 53 / var(--tw-text-opacity, 1));
}
.text-\[\#ff718a\]{
  --tw-text-opacity: 1;
  color: rgb(255 113 138 / var(--tw-text-opacity, 1));
}
.text-nico-steel{
  --tw-text-opacity: 1;
  color: rgb(182 187 194 / var(--tw-text-opacity, 1));
}
.text-nico-white{
  --tw-text-opacity: 1;
  color: rgb(244 242 238 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/95{
  color: rgb(255 255 255 / 0.95);
}
.text-zinc-300{
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.no-underline{
  text-decoration-line: none;
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.shadow-\[0_10px_24px_rgba\(90\2c 56\2c 36\2c 0\.20\)\]{
  --tw-shadow: 0 10px 24px rgba(90,56,36,0.20);
  --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_60px_rgba\(36\2c 26\2c 22\2c 0\.18\)\]{
  --tw-shadow: 0 18px 60px rgba(36,26,22,0.18);
  --tw-shadow-colored: 0 18px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-redglow{
  --tw-shadow: 0 18px 55px rgba(220, 2, 41, 0.20);
  --tw-shadow-colored: 0 18px 55px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.drop-shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.95\)\]{
  --tw-drop-shadow: drop-shadow(0 2px 8px rgba(0,0,0,0.95));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl{
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;

  --nico-black: #1b1a1d;
  --nico-graphite: #242327;
  --nico-red: #dc0229;
  --nico-wine: #81000f;
  --nico-steel: #b6bbc2;
  --nico-metal: #959ca2;
  --nico-warm: #c08977;
  --nico-brown: #6b534d;
  --nico-white: #f4f2ee;
}

html {
  scroll-behavior: smooth;
  background: var(--nico-black);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--nico-black);
  color: var(--nico-white);
}

h1,
h2,
h3,
.font-display {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
}

a {
  color: inherit;
}

::-moz-selection {
  background: var(--nico-red);
  color: white;
}

::selection {
  background: var(--nico-red);
  color: white;
}

#top,
#palvelut,
#keikat,
#bt-live,
#yhteys {
  scroll-margin-top: 88px;
}


/* NICO HERO SPLATS */

html,
body,
button,
input,
textarea,
select {
  font-family: "Manrope", Arial, sans-serif;
}

h2,
h3 {
  font-family: "Lobster Two", Georgia, serif;
  font-weight: 700;
}

.hero-logo-heading {
  margin: 1.5rem 0 1.25rem;
}

.hero-main-logo {
  display: block;
  width: clamp(20rem, 38vw, 35rem);
  max-width: 92%;
  height: auto;
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 45%));
}

.paint-splats {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

.paint-splat {
  position: absolute;
  display: block;
  fill: #030303;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  mix-blend-mode: multiply;
  animation: nico-splat-in 850ms
    cubic-bezier(.2, .9, .25, 1.2) forwards;
}

.paint-splat-one {
  top: 7%;
  right: 1%;
  width: clamp(14rem, 25vw, 26rem);
  --splat-opacity: .82;
  --splat-rotation: -10deg;
  animation-delay: 120ms;
}

.paint-splat-two {
  right: 24%;
  bottom: -5%;
  width: clamp(11rem, 18vw, 20rem);
  --splat-opacity: .68;
  --splat-rotation: 18deg;
  animation-delay: 310ms;
}

.paint-splat-three {
  top: 43%;
  right: -4%;
  width: clamp(9rem, 15vw, 16rem);
  --splat-opacity: .74;
  --splat-rotation: 8deg;
  animation-delay: 490ms;
}

@keyframes nico-splat-in {
  0% {
    opacity: 0;
    transform: scale(.04) rotate(var(--splat-rotation));
    filter: blur(8px);
  }

  58% {
    opacity: var(--splat-opacity);
    transform: scale(1.15) rotate(var(--splat-rotation));
    filter: blur(0);
  }

  78% {
    opacity: var(--splat-opacity);
    transform: scale(.93) rotate(var(--splat-rotation));
  }

  100% {
    opacity: var(--splat-opacity);
    transform: scale(1) rotate(var(--splat-rotation));
  }
}

@media (max-width: 767px) {
  .hero-main-logo {
    width: min(88vw, 28rem);
  }

  .paint-splat-one {
    right: -20%;
    width: 18rem;
  }

  .paint-splat-two {
    right: 27%;
    width: 12rem;
  }

  .paint-splat-three {
    top: 55%;
    right: -17%;
    width: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paint-splat {
    opacity: var(--splat-opacity);
    transform: scale(1) rotate(var(--splat-rotation));
    animation: none;
  }
}


/* HERO PAINT SPLATS: visibility fix */

.paint-splats {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.paint-splat {
  position: absolute;
  display: block;
  fill: #000;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nico-splat-impact 900ms
    cubic-bezier(.18, .9, .3, 1.25) forwards;
}

.paint-splat-one {
  top: 8%;
  right: -2%;
  width: clamp(20rem, 34vw, 38rem);
  --opacity: .92;
  --rotation: -12deg;
  animation-delay: 150ms;
}

.paint-splat-two {
  right: 28%;
  bottom: -8%;
  width: clamp(14rem, 23vw, 25rem);
  --opacity: .86;
  --rotation: 17deg;
  animation-delay: 360ms;
}

.paint-splat-three {
  top: 46%;
  right: -5%;
  width: clamp(12rem, 19vw, 21rem);
  --opacity: .9;
  --rotation: 7deg;
  animation-delay: 560ms;
}

@keyframes nico-splat-impact {
  0% {
    opacity: 0;
    transform: scale(.03) rotate(var(--rotation));
    filter: blur(10px);
  }

  60% {
    opacity: var(--opacity);
    transform: scale(1.16) rotate(var(--rotation));
    filter: blur(0);
  }

  80% {
    opacity: var(--opacity);
    transform: scale(.94) rotate(var(--rotation));
  }

  100% {
    opacity: var(--opacity);
    transform: scale(1) rotate(var(--rotation));
  }
}

/* Hero logo only: slight angle and movement */

.hero-main-logo {
  transform-origin: center;
  animation: nico-logo-float 5.5s ease-in-out infinite;
}

@keyframes nico-logo-float {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }

  50% {
    transform: rotate(-2deg) translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paint-splat {
    opacity: var(--opacity);
    transform: scale(1) rotate(var(--rotation));
    animation: none;
  }

  .hero-main-logo {
    transform: rotate(-3deg);
    animation: none;
  }
}


/* CLEAN NICO HEADINGS */

h1,
h2,
h3,
h4,
.nico-script-heading {
  font-family: "Manrope", Arial, sans-serif !important;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(2.25rem, 5vw, 4.75rem);
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}


/* Remove failed paint splats */
.paint-splats {
  display: none !important;
}


/* NICO SETLIST NAVIGATION */

section[id] {
  scroll-margin-top: 6.5rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  border-bottom: 1px solid transparent;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    backdrop-filter 220ms ease;
}

.site-header--scrolled {
  border-bottom-color: rgb(255 255 255 / 10%);
  background: rgb(10 10 11 / 88%);
  backdrop-filter: blur(18px);
}

.site-header__inner {
  display: flex;
  width: min(100% - 2.5rem, 80rem);
  min-height: 5rem;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 2.75rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.site-header__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.site-header__nav a {
  position: relative;
  color: rgb(255 255 255 / 74%);
  text-decoration: none;
  transition: color 180ms ease;
}

.site-header__nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.55rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #dc0229;
  content: "";
  opacity: 0;
  transform: scaleX(0.25) rotate(-2deg);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.site-header__nav a:hover,
.site-header__nav a.is-active {
  color: #ffffff;
}

.site-header__nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1) rotate(-2deg);
}

.site-header__cta {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc0229;
  padding-inline: 1.15rem;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 35px rgb(220 2 41 / 24%);
  transition:
    transform 180ms ease,
    background-color 180ms ease;
}

.site-header__cta:hover {
  background: #b70222;
  transform: translateY(-2px);
}

.setlist-navigation {
  position: fixed;
  z-index: 60;
  top: 50%;
  right: 1.35rem;
  display: none;
  width: 13.75rem;
  transform: translateY(-50%) rotate(1.2deg);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 40%));
}

.setlist-navigation__paper {
  position: relative;
  overflow: visible;
  background:
    repeating-linear-gradient(
      0deg,
      rgb(40 35 28 / 3%) 0,
      rgb(40 35 28 / 3%) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(135deg, #eee8da, #dcd4c3);
  padding: 2rem 1.15rem 1.55rem 1.35rem;
  color: #161311;
  clip-path: polygon(
    1% 0,
    99% 1%,
    100% 96%,
    97% 100%,
    2% 99%,
    0 4%
  );
}

.setlist-navigation__paper::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 25% 15%,
      rgb(255 255 255 / 34%),
      transparent 22%
    ),
    radial-gradient(
      circle at 76% 80%,
      rgb(0 0 0 / 6%),
      transparent 32%
    );
  content: "";
  pointer-events: none;
}

.setlist-navigation__tape {
  position: absolute;
  z-index: 3;
  left: 50%;
  border: 1px solid rgb(255 255 255 / 12%);
  background: linear-gradient(
    180deg,
    rgb(125 128 134 / 76%),
    rgb(76 79 85 / 72%)
  );
  opacity: 0.82;
  backdrop-filter: blur(0.8px);
  -webkit-backdrop-filter: blur(0.8px);
  box-shadow:
    0 5px 9px rgb(0 0 0 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
  clip-path: polygon(
    2% 5%,
    98% 1%,
    100% 94%,
    1% 100%
  );
}

.setlist-navigation__tape--top {
  top: -0.48rem;
  width: 6.4rem;
  height: 1.2rem;
  transform:
    translateX(-50%)
    rotate(-2.5deg);
}

.setlist-navigation__tape--bottom {
  bottom: -0.38rem;
  width: 5.3rem;
  height: 1rem;
  transform:
    translateX(-50%)
    rotate(2deg);
}

.setlist-navigation__heading {
  position: relative;
  z-index: 1;
  margin-bottom: 1.1rem;
  border-bottom: 3px solid #171411;
  padding-bottom: 0.4rem;
  font-family: "Permanent Marker", cursive;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-align: center;
  transform: rotate(-1deg);
}

.setlist-navigation ol {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0 0 0.65rem;
  list-style: none;
}

.setlist-navigation__link {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 0.2rem;
  min-height: 2rem;
  color: #181411;
  font-family: "Permanent Marker", cursive;
  font-size: 0.88rem;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-0.35deg);
  transition:
    color 150ms ease,
    transform 150ms ease;
}

.setlist-navigation li:nth-child(even)
  .setlist-navigation__link {
  transform: rotate(0.45deg);
}

.setlist-navigation__link:hover {
  color: #81000f;
  transform: translateX(-3px) rotate(-0.7deg);
}

.setlist-navigation__link.is-active {
  color: #c50428;
  transform: translateX(-4px) rotate(-1deg);
}

.setlist-navigation__link.is-active::after {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  left: 2rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #c50428;
  content: "";
  opacity: 0.9;
  transform: rotate(-2deg);
  box-shadow:
    0 2px 0 rgb(197 4 40 / 18%),
    0 -2px 0 rgb(197 4 40 / 12%);
}

.setlist-navigation__number {
  font-size: 0.72rem;
  opacity: 0.66;
}

.setlist-navigation__progress {
  position: absolute;
  z-index: 2;
  top: 4.65rem;
  bottom: 1.65rem;
  left: 0.8rem;
  width: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(24 20 17 / 15%);
}

.setlist-navigation__progress span {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: inherit;
  background: #c50428;
  transition: height 120ms linear;
}

.mobile-setlist-dock {
  position: fixed;
  z-index: 80;
  right: 0.8rem;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
  left: 0.8rem;
  display: flex;
  min-height: 4.2rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.3rem;
  background: rgb(18 17 19 / 92%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 48%);
  backdrop-filter: blur(18px);
}

.mobile-setlist-dock__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #dc0229;
  transition: width 120ms linear;
}

.mobile-setlist-dock__current {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  color: #ffffff;
  text-decoration: none;
}

.mobile-setlist-dock__current span {
  color: #dc0229;
  font-family: "Permanent Marker", cursive;
  font-size: 0.78rem;
}

.mobile-setlist-dock__current strong {
  font-family: "Permanent Marker", cursive;
  font-size: 0.96rem;
  font-weight: 400;
}

.mobile-setlist-dock__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-left: 1px solid
    rgb(255 255 255 / 10%);
  background: transparent;
  padding: 0.75rem 1rem;
  color: #ffffff;
  cursor: pointer;
}

.mobile-setlist-dock__button strong {
  font-family:
    "Permanent Marker", cursive;
  font-size: 0.75rem;
  font-weight: 400;
}

.mobile-setlist-dock__menu-icon {
  color: #dc0229;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.mobile-setlist-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  background: rgb(7 7 8 / 94%);
  opacity: 0;
  padding: 5rem 1.25rem 2rem;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.mobile-setlist-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-setlist-overlay__close {
  position: absolute;
  top: calc(
    1rem + env(safe-area-inset-top)
  );
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.mobile-setlist-overlay__close strong {
  font-family:
    "Permanent Marker", cursive;
  font-size: 0.9rem;
  font-weight: 400;
}

.mobile-setlist-overlay__close span {
  color: #dc0229;
  font-family: Arial, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.mobile-setlist-overlay__paper {
  position: relative;
  width: min(100%, 24rem);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  background:
    repeating-linear-gradient(
      0deg,
      rgb(40 35 28 / 3%) 0,
      rgb(40 35 28 / 3%) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(135deg, #eee8da, #dcd4c3);
  padding: 2rem 1.5rem;
  color: #151210;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
  transform: rotate(-1deg);
}

.mobile-setlist-overlay__heading {
  margin-bottom: 1.5rem;
  border-bottom: 4px solid #151210;
  padding-bottom: 0.55rem;
  font-family: "Permanent Marker", cursive;
  font-size: 1.7rem;
  text-align: center;
}

.mobile-setlist-overlay ol {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-setlist-overlay a {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  min-height: 2.5rem;
  align-items: center;
  color: #181411;
  font-family: "Permanent Marker", cursive;
  font-size: 1.05rem;
  text-decoration: none;
}

.mobile-setlist-overlay a.is-active {
  color: #c50428;
}

.mobile-setlist-overlay a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  left: 2.25rem;
  height: 0.2rem;
  border-radius: 999px;
  background: #c50428;
  content: "";
  transform: rotate(-1.5deg);
}

@media (min-width: 1280px) {
  .setlist-navigation {
    display: block;
  }

  .mobile-setlist-dock,
  .mobile-setlist-overlay {
    display: none;
  }
}

@media (min-width: 1536px) {
  .site-header__nav {
    display: flex;
  }
}

@media (max-width: 1279px) {
  body {
    padding-bottom: calc(
      5.6rem + env(safe-area-inset-bottom)
    );
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    width: min(100% - 1.5rem, 80rem);
  }

  .site-header__logo img {
    height: 2.25rem;
  }

  .site-header__cta {
    min-height: 2.5rem;
    padding-inline: 0.9rem;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__nav a,
  .site-header__cta,
  .setlist-navigation__link,
  .mobile-setlist-overlay {
    transition: none;
  }
}


/* NICO ARTIST INTRO */

.artist-intro {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 8%);
  background:
    radial-gradient(
      circle at 16% 48%,
      rgb(129 0 15 / 22%),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      #111114 0%,
      #09090b 100%
    );
  padding: clamp(6rem, 10vw, 9rem) 1.5rem;
}

.artist-intro__background-word {
  position: absolute;
  top: 50%;
  right: -0.04em;
  color: rgb(255 255 255 / 2.2%);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(10rem, 24vw, 27rem);
  font-weight: 800;
  letter-spacing: -0.1em;
  line-height: 0.7;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.artist-intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 80rem);
  margin-inline: auto;
  gap: clamp(4rem, 8vw, 8rem);
  align-items: center;
}

.artist-intro__media {
  position: relative;
  width: min(100%, 32rem);
  margin-inline: auto;
  opacity: 0;
  transform:
    translate3d(-2.5rem, 2rem, 0)
    rotate(-2deg);
  transition:
    opacity 750ms ease,
    transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.artist-intro.is-visible .artist-intro__media {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotate(-1.5deg);
}

.artist-intro__red-frame {
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid #dc0229;
  transform: rotate(3deg);
}

.artist-intro__photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #19191c;
  box-shadow:
    0 35px 90px rgb(0 0 0 / 50%),
    0 0 0 1px rgb(255 255 255 / 10%);
  aspect-ratio: 4 / 5;
  clip-path: polygon(
    0 1%,
    98% 0,
    100% 96%,
    96% 100%,
    1% 98%
  );
}

.artist-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 25%;
     object-position: center 25%;
  filter:
    contrast(1.04)
    saturate(0.88);
  transform: scale(1.02);
  transition: transform 1.2s ease;
}

.artist-intro.is-visible
  .artist-intro__photo img {
  transform: scale(1);
}

.artist-intro__photo::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgb(5 5 7 / 45%) 100%
    );
  content: "";
  pointer-events: none;
}

.artist-intro__tape {
  position: absolute;
  z-index: 3;
  top: -0.8rem;
  left: 50%;
  width: 7.5rem;
  height: 2rem;
  background: rgb(182 187 194 / 64%);
  box-shadow: 0 5px 12px rgb(0 0 0 / 25%);
  opacity: 0.78;
  transform:
    translateX(-50%)
    rotate(-4deg);
}

.artist-intro__stat {
  position: absolute;
  right: -1.6rem;
  bottom: 2.4rem;
  display: grid;
  max-width: 11rem;
  background: #dc0229;
  padding: 1rem 1.15rem;
  color: #ffffff;
  box-shadow: 0 18px 45px rgb(0 0 0 / 38%);
  transform: rotate(2.5deg);
}

.artist-intro__stat strong {
  font-family: "Special Elite", monospace;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}

.artist-intro__stat span {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.artist-intro__content {
  max-width: 41rem;
  opacity: 0;
  transform: translate3d(2.5rem, 1.5rem, 0);
  transition:
    opacity 750ms ease 140ms,
    transform 900ms cubic-bezier(.2, .8, .2, 1) 140ms;
}

.artist-intro.is-visible .artist-intro__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.artist-intro__eyebrow {
  margin: 0;
  color: #dc0229;
  font-family: "Special Elite", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.artist-intro h2 {
  max-width: 11ch;
  margin: 1.25rem 0 0;
  color: #ffffff;
  font-family: "Manrope", Arial, sans-serif !important;
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.93;
  text-transform: none;
}

.artist-intro__lead {
  margin: 2.25rem 0 0;
  color: #ffffff;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.65;
}

.artist-intro__text {
  margin: 1.5rem 0 0;
  color: rgb(214 214 220 / 82%);
  font-size: 1rem;
  line-height: 1.9;
}

.artist-intro__history {
  position: relative;
  margin-top: 2.2rem;
  border-left: 3px solid #dc0229;
  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / 5%),
      transparent
    );
  padding: 1.15rem 1.3rem;
}

.artist-intro__history span {
  display: block;
  margin-bottom: 0.55rem;
  color: #c08977;
  font-family: "Special Elite", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.artist-intro__history p {
  margin: 0;
  color: #b6bbc2;
  font-family: "Special Elite", monospace;
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  .artist-intro__inner {
    grid-template-columns:
      minmax(20rem, 0.88fr)
      minmax(25rem, 1.12fr);
  }
}

@media (max-width: 899px) {
  .artist-intro__content {
    max-width: 46rem;
    margin-inline: auto;
  }

  .artist-intro h2 {
    max-width: 12ch;
  }
}

@media (max-width: 640px) {
  .artist-intro {
    padding-inline: 1.1rem;
  }

  .artist-intro__media {
    width: calc(100% - 1.5rem);
  }

  .artist-intro__red-frame {
    inset:
      0.75rem
      -0.75rem
      -0.75rem
      0.75rem;
  }

  .artist-intro__stat {
    right: -0.75rem;
    bottom: 1.5rem;
  }

  .artist-intro h2 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-intro__media,
  .artist-intro__content,
  .artist-intro__photo img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* SETLIST SLIDE TOGGLE */

@media (min-width: 1280px) {
  .setlist-navigation {
    transition:
      transform 760ms cubic-bezier(.18, .86, .22, 1.08),
      filter 300ms ease;
    will-change: transform;
  }

  .setlist-navigation.is-open {
    transform:
      translateY(-50%)
      translateX(0)
      rotate(1.2deg);
  }

  .setlist-navigation.is-collapsed {
    transform:
      translateY(-50%)
      translateX(calc(100% - 3rem))
      rotate(4deg);
  }

  .setlist-navigation.is-open
    .setlist-navigation__paper {
    animation:
      setlist-paper-return
      820ms
      cubic-bezier(.18, .88, .2, 1.12);
  }

  .setlist-navigation__toggle {
    position: absolute;
    z-index: 8;
    top: 50%;
    display: flex;
    width: 2.7rem;
    height: 8.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 0.45rem 0 0 0.45rem;
    background:
      linear-gradient(
        180deg,
        rgb(31 29 29 / 98%),
        rgb(12 12 13 / 98%)
      );
    color: #f0eadc;
    box-shadow: -10px 12px 25px rgb(0 0 0 / 30%);
    cursor: pointer;
    transform:
      translateY(-50%)
      rotate(-1deg);
    transition:
      left 550ms cubic-bezier(.2, .8, .2, 1),
      background-color 180ms ease,
      transform 180ms ease;
  }

  .setlist-navigation.is-open
    .setlist-navigation__toggle {
    left: -2.55rem;
  }

  .setlist-navigation.is-collapsed
    .setlist-navigation__toggle {
    left: 0.1rem;
  }

  .setlist-navigation__toggle:hover {
    background: #81000f;
    transform:
      translateY(-50%)
      translateX(-3px)
      rotate(-2deg);
  }

  .setlist-navigation__toggle span:first-child {
    font-family: "Permanent Marker", cursive;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .setlist-navigation__toggle-arrow {
    color: #dc0229;
    font-family: Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
  }

  .setlist-navigation__heading {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0 0 1.1rem;
    border: 0;
    border-bottom: 3px solid #171411;
    background: transparent;
    padding: 0 0 0.4rem;
    color: #161311;
    font-family: "Permanent Marker", cursive;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-align: center;
    cursor: pointer;
    transform: rotate(-1deg);
  }

  .setlist-navigation__heading:hover {
    color: #81000f;
  }
}

@keyframes setlist-paper-return {
  0% {
    opacity: 0.72;
    transform:
      translateX(2.5rem)
      translateY(-0.5rem)
      rotate(7deg)
      scale(0.97);
  }

  42% {
    opacity: 1;
    transform:
      translateX(-0.65rem)
      translateY(0.25rem)
      rotate(-2.5deg)
      scale(1.015);
  }

  68% {
    transform:
      translateX(0.3rem)
      translateY(-0.1rem)
      rotate(1.2deg)
      scale(0.995);
  }

  100% {
    opacity: 1;
    transform:
      translateX(0)
      translateY(0)
      rotate(0)
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .setlist-navigation,
  .setlist-navigation__paper,
  .setlist-navigation__toggle {
    animation: none !important;
    transition: none !important;
  }
}

/* SETLIST CLICK CLOSE FIX */
@media (min-width: 1280px) {
  .setlist-navigation__paper {
    cursor: pointer;
  }

  .setlist-navigation__toggle [aria-hidden="true"],
  .setlist-navigation__toggle > span + span,
  .setlist-navigation__toggle::before,
  .setlist-navigation__toggle::after {
    display: none !important;
    content: none !important;
  }
}

/* ARTIST INTRO SETLIST SAFE AREA */
@media (min-width: 1280px) {
  #esittely > div > div:last-child {
    padding-right: 4.5rem;
    transition: padding-right 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body:has(.setlist-navigation.is-open) #esittely > div > div:last-child {
    padding-right: clamp(9rem, 11vw, 10.5rem);
  }

  body:has(.setlist-navigation.is-collapsed) #esittely > div > div:last-child {
    padding-right: 4.5rem;
  }
}

/* TRUBADUURI PRIMARY SERVICE */
.troubadour-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 82% 38%,
      rgba(220, 2, 41, 0.16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #08080a 0%,
      #111114 50%,
      #09090b 100%
    );
  padding: 6rem 1.25rem;
}

.troubadour-section__ghost {
  position: absolute;
  left: -0.04em;
  top: 2rem;
  z-index: -1;
  white-space: nowrap;
  font-family: "Manrope", sans-serif;
  font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.022);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.troubadour-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.troubadour-section__copy {
  position: relative;
  z-index: 2;
}

.troubadour-section__number {
  position: absolute;
  right: 0;
  top: -2.25rem;
  font-size: clamp(5rem, 11vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.035);
}

.troubadour-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.troubadour-section__title {
  max-width: 48rem;
  margin: 1.5rem 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.9rem, 6.1vw, 6rem);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.065em;
  text-transform: none;
  color: #ffffff;
}

.troubadour-section__lead {
  max-width: 45rem;
  margin: 2rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 750;
  line-height: 1.55;
  color: #ffffff;
}

.troubadour-section__divider {
  width: 5rem;
  height: 0.25rem;
  margin-top: 2rem;
  background: #ed002d;
}

.troubadour-section__text {
  max-width: 45rem;
  margin: 2rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #aaa9ae;
}

.troubadour-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.troubadour-section__tags li {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8d8da;
}

.troubadour-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
  border-radius: 999px;
  background: #ed002d;
  padding: 1rem 1.6rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 16px 42px rgba(220, 2, 41, 0.22);
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.troubadour-section__cta:hover {
  transform: translateY(-3px);
  background: #ff123d;
  box-shadow: 0 20px 52px rgba(220, 2, 41, 0.32);
}

.troubadour-section__cta span {
  font-size: 1.35rem;
  line-height: 1;
}

.troubadour-section__visual {
  position: relative;
  width: min(100%, 31rem);
  margin: 4rem auto 0;
}

.troubadour-section__red-frame {
  position: absolute;
  inset: 1.2rem -1rem -1.2rem 1rem;
  border: 2px solid #ed002d;
  transform: rotate(2deg);
}

.troubadour-section__image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #151519;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
  transform: rotate(-1.2deg);
}

.troubadour-section__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: contrast(1.04) saturate(0.9);
}

.troubadour-section__image-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.82) 100%
    );
}

.troubadour-section__stage-label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(6, 6, 8, 0.86);
  padding: 1rem 1.1rem;
  backdrop-filter: blur(8px);
}

.troubadour-section__stage-label span {
  background: #ed002d;
  padding: 0.55rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #ffffff;
}

.troubadour-section__stage-label strong {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .troubadour-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .troubadour-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(20rem, 0.82fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6.5rem);
  }

  .troubadour-section__visual {
    margin: 0 0 0 auto;
  }

  .troubadour-section__number {
    right: -1rem;
    top: -4rem;
  }
}

@media (min-width: 1280px) {
  .troubadour-section__inner {
    padding-right: 4.5rem;
    transition:
      padding-right 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body:has(.setlist-navigation.is-open)
    .troubadour-section__inner {
    padding-right: clamp(9rem, 11vw, 10.5rem);
  }
}

@media (max-width: 639px) {
  .troubadour-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .troubadour-section__title {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .troubadour-section__stage-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }
}


/* SETLIST SMOOTH SLIDE ONLY */
@media (min-width: 1280px) {
  .setlist-navigation,
  .setlist-navigation.is-open,
  .setlist-navigation.is-collapsed,
  .setlist-navigation__paper {
    animation: none !important;
  }

  .setlist-navigation {
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
  }

  .setlist-navigation__paper {
    transition: none !important;
  }
}

/* TRIO OHOI PRIMARY BAND SECTION */
.trio-ohoi-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 12% 45%,
      rgba(237, 0, 45, 0.18),
      transparent 34%
    ),
    #09090b;
  padding: 6rem 1.25rem;
}

.trio-ohoi-section__ghost {
  position: absolute;
  right: -0.05em;
  bottom: -0.04em;
  z-index: -1;
  font-family: "Manrope", sans-serif;
  font-size: clamp(8rem, 24vw, 23rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.trio-ohoi-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.trio-ohoi-section__poster {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(0, 0, 0, 0.12),
      rgba(0, 0, 0, 0.44)
    ),
    #ed002d;
  box-shadow:
    1.2rem 1.2rem 0 #ffffff,
    2.4rem 2.4rem 0 rgba(237, 0, 45, 0.3),
    0 2.5rem 6rem rgba(0, 0, 0, 0.45);
  transform: rotate(-1.1deg);
}

.trio-ohoi-section__poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3.8rem,
      rgba(255, 255, 255, 0.06) 3.8rem,
      rgba(255, 255, 255, 0.06) 3.9rem
    );
  pointer-events: none;
}

.trio-ohoi-section__poster::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 47%;
  height: 1.1rem;
  background: #09090b;
  transform: rotate(-8deg);
  pointer-events: none;
}

.trio-ohoi-section__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter:
    grayscale(0.35)
    contrast(1.08)
    saturate(0.85);
}

.trio-ohoi-section__image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.18),
      rgba(8, 8, 10, 0.62)
    ),
    rgba(237, 0, 45, 0.2);
}

.trio-ohoi-section__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: 5rem 2rem 3rem;
}

.trio-ohoi-section__stage span {
  width: 21%;
  border: 0.7rem solid #09090b;
  border-bottom: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      transparent
    );
}

.trio-ohoi-section__stage span:nth-child(1) {
  height: 54%;
  transform: skew(-7deg);
}

.trio-ohoi-section__stage span:nth-child(2) {
  height: 78%;
}

.trio-ohoi-section__stage span:nth-child(3) {
  height: 63%;
  transform: skew(7deg);
}

.trio-ohoi-section__poster-top {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 1.4rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "Special Elite", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #ffffff;
}

.trio-ohoi-section__big-number {
  position: absolute;
  right: -0.03em;
  top: 0.02em;
  z-index: 2;
  font-family: "Manrope", sans-serif;
  font-size: clamp(16rem, 34vw, 27rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.12em;
  color: rgba(9, 9, 11, 0.92);
}

.trio-ohoi-section__poster-title {
  position: absolute;
  left: 1.5rem;
  bottom: 5rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  line-height: 0.75;
  color: #ffffff;
}

.trio-ohoi-section__poster-title span {
  font-family: "Special Elite", monospace;
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  letter-spacing: 0.26em;
}

.trio-ohoi-section__poster-title strong {
  font-family: "Manrope", sans-serif;
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.1em;
}

.trio-ohoi-section__poster-bottom {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.4rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.trio-ohoi-section__poster-bottom span {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(9, 9, 11, 0.22);
  padding: 0.45rem 0.65rem;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: #ffffff;
}

.trio-ohoi-section__copy {
  margin-top: 5rem;
}

.trio-ohoi-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.trio-ohoi-section__title {
  max-width: 43rem;
  margin: 1.5rem 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6.2vw, 6.2rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.065em;
  color: #ffffff;
}

.trio-ohoi-section__lead {
  max-width: 42rem;
  margin: 2rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 750;
  line-height: 1.55;
  color: #ffffff;
}

.trio-ohoi-section__text {
  max-width: 43rem;
  margin: 1.75rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #aaa9ae;
}

.trio-ohoi-section__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.trio-ohoi-section__highlight {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}

.trio-ohoi-section__highlight + 
.trio-ohoi-section__highlight {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.trio-ohoi-section__highlight strong {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.trio-ohoi-section__highlight span {
  margin-top: 0.5rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8e94;
}

.trio-ohoi-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  border: 2px solid #ed002d;
  border-radius: 999px;
  padding: 0.95rem 1.5rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.trio-ohoi-section__cta:hover {
  transform: translateY(-3px);
  background: #ed002d;
}

.trio-ohoi-section__cta > span:last-child {
  font-size: 1.35rem;
  line-height: 1;
}

@media (min-width: 1024px) {
  .trio-ohoi-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .trio-ohoi-section__inner {
    display: grid;
    grid-template-columns:
      minmax(22rem, 0.88fr)
      minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(5rem, 8vw, 8rem);
  }

  .trio-ohoi-section__copy {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .trio-ohoi-section__inner {
    padding-right: 4.5rem;
    transition:
      padding-right 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body:has(.setlist-navigation.is-open)
    .trio-ohoi-section__inner {
    padding-right: clamp(9rem, 11vw, 10.5rem);
  }
}

@media (max-width: 639px) {
  .trio-ohoi-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .trio-ohoi-section__poster {
    min-height: 28rem;
    box-shadow:
      0.7rem 0.7rem 0 #ffffff,
      1.4rem 1.4rem 0 rgba(237, 0, 45, 0.3);
  }

  .trio-ohoi-section__highlights {
    grid-template-columns: 1fr;
  }

  .trio-ohoi-section__highlight + 
  .trio-ohoi-section__highlight {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
  }
}


/* SECTION SCROLL BREATHING ROOM */
section[id]:not(#top) {
  scroll-margin-top: 5rem !important;
}

@media (max-width: 767px) {
  section[id]:not(#top) {
    scroll-margin-top: 5rem !important;
  }
}

/* DUO SERVICE SECTION */
.duo-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      115deg,
      #111114 0%,
      #09090b 58%,
      #151015 100%
    );
  padding: 6rem 1.25rem;
}

.duo-section__ghost {
  position: absolute;
  left: -0.04em;
  bottom: -0.08em;
  z-index: -1;
  font-size: clamp(10rem, 28vw, 28rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.12em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.duo-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.duo-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.duo-section__title {
  max-width: 43rem;
  margin: 1.5rem 0 0;
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.065em;
  color: #ffffff;
}

.duo-section__lead {
  max-width: 43rem;
  margin: 2rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 750;
  line-height: 1.6;
  color: #ffffff;
}

.duo-section__text {
  max-width: 43rem;
  margin: 1.75rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #aaa9ae;
}

.duo-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.duo-section__tags li {
  border-left: 3px solid #ed002d;
  background: rgba(255, 255, 255, 0.045);
  padding: 0.65rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #d7d6da;
}

.duo-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  border-radius: 999px;
  background: #ffffff;
  padding: 1rem 1.55rem;
  font-weight: 900;
  color: #09090b;
  text-decoration: none;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.duo-section__cta:hover {
  transform: translateY(-3px);
  background: #ed002d;
  color: #ffffff;
}

.duo-section__cta > span:last-child {
  font-size: 1.35rem;
  line-height: 1;
}

.duo-section__visual {
  position: relative;
  min-height: 30rem;
  margin-top: 4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(
      135deg,
      rgba(237, 0, 45, 0.17),
      transparent 50%
    ),
    #08080a;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.42);
}

.duo-section__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.13);
}

.duo-section__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: contrast(1.06) saturate(0.88);
}

.duo-section__image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.08),
      rgba(8, 8, 10, 0.7)
    );
}

.duo-section__members {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.duo-section__member {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 2rem 1.5rem 6rem;
}

.duo-section__member:first-child {
  align-items: flex-start;
}

.duo-section__member:last-child {
  align-items: flex-end;
  text-align: right;
}

.duo-section__member-number {
  position: absolute;
  top: 1rem;
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.035);
}

.duo-section__member:first-child
.duo-section__member-number {
  left: 1rem;
}

.duo-section__member:last-child
.duo-section__member-number {
  right: 1rem;
}

.duo-section__member strong {
  font-size: clamp(2.7rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.08em;
  color: #ffffff;
}

.duo-section__member small {
  margin-top: 1rem;
  font-family: "Special Elite", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: #ed002d;
}

.duo-section__visual-line {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ed002d;
  padding: 1rem;
  color: #ffffff;
}

.duo-section__visual-line span {
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 0.45rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.duo-section__visual-line strong {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

@media (min-width: 1024px) {
  .duo-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .duo-section__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(22rem, 0.95fr);
    align-items: center;
    gap: clamp(4rem, 7vw, 7rem);
  }

  .duo-section__visual {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .duo-section__inner {
    padding-right: 4.5rem;
    transition:
      padding-right 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body:has(.setlist-navigation.is-open)
    .duo-section__inner {
    padding-right: clamp(9rem, 11vw, 10.5rem);
  }
}

@media (max-width: 639px) {
  .duo-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .duo-section__visual {
    min-height: 25rem;
  }

  .duo-section__member {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }

  .duo-section__member strong {
    font-size: clamp(2.3rem, 13vw, 3.8rem);
  }

  .duo-section__visual-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* DEFAULT BLURRED LIVE VISUALS */

/* Trio Ohoi: tunnelmallinen kolmen hengen live-lava */
.trio-ohoi-section__stage {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.68), transparent 7%),
    radial-gradient(circle at 50% 8%, rgba(255,35,75,0.78), transparent 11%),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,0.54), transparent 8%),
    radial-gradient(circle at 50% 62%, rgba(237,0,45,0.34), transparent 38%),
    linear-gradient(180deg, #222027 0%, #0a0a0d 64%, #030304 100%);
}

.trio-ohoi-section__stage::before {
  content: "";
  position: absolute;
  inset: -12% -10% 8%;
  z-index: -1;
  background:
    linear-gradient(74deg, transparent 18%, rgba(255,255,255,0.16) 38%, transparent 58%),
    linear-gradient(106deg, transparent 22%, rgba(237,0,45,0.24) 46%, transparent 67%);
  filter: blur(18px);
  opacity: 0.9;
}

.trio-ohoi-section__stage::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 34%;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.12), transparent 64%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.86));
  filter: blur(12px);
}

.trio-ohoi-section__stage span {
  position: relative;
  z-index: 1;
  width: 21%;
  border: 0 !important;
  border-radius: 46% 46% 18% 18% / 16% 16% 7% 7%;
  background:
    linear-gradient(90deg, #030304, #17151a 48%, #020203);
  box-shadow:
    0 0 28px rgba(237,0,45,0.22),
    0 30px 32px rgba(0,0,0,0.72);
  filter: blur(1.3px);
  opacity: 0.96;
}

.trio-ohoi-section__stage span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3.5rem;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #08080a;
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
}

.trio-ohoi-section__stage span::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 30%;
  width: 76%;
  height: 0.8rem;
  border-radius: 999px;
  background: #050506;
  transform: rotate(-18deg);
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(0,0,0,0.8);
}

.trio-ohoi-section__stage span:nth-child(1) {
  height: 50%;
  transform: translateY(0.8rem) rotate(-3deg);
}

.trio-ohoi-section__stage span:nth-child(2) {
  height: 70%;
  transform: translateY(-0.4rem);
}

.trio-ohoi-section__stage span:nth-child(3) {
  height: 57%;
  transform: translateY(0.4rem) rotate(3deg);
}

/* Duo: kahden esiintyjan blurrattu lavakuva */
.duo-section__members {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.52), transparent 8%),
    radial-gradient(circle at 78% 12%, rgba(237,0,45,0.72), transparent 10%),
    radial-gradient(circle at 50% 70%, rgba(237,0,45,0.24), transparent 42%),
    linear-gradient(180deg, #262329 0%, #0b0b0e 62%, #030304 100%);
}

.duo-section__members::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    linear-gradient(68deg, transparent 27%, rgba(255,255,255,0.14) 45%, transparent 62%),
    linear-gradient(112deg, transparent 25%, rgba(237,0,45,0.2) 48%, transparent 68%);
  filter: blur(20px);
}

.duo-section__members::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 38%;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.1), transparent 66%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.9));
  filter: blur(10px);
}

.duo-section__member {
  isolation: isolate;
  overflow: hidden;
  z-index: 2;
}

.duo-section__member::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 23%;
  z-index: 1;
  width: 38%;
  height: 53%;
  border-radius: 44% 44% 16% 16% / 14% 14% 6% 6%;
  background:
    linear-gradient(90deg, #020203, #18161b 50%, #030304);
  transform: translateX(-50%);
  filter: blur(1.4px);
  box-shadow:
    0 0 30px rgba(237,0,45,0.18),
    0 34px 38px rgba(0,0,0,0.76);
}

.duo-section__member::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 15%;
  z-index: 1;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #060608;
  transform: translateX(-50%);
  filter: blur(1px);
}

.duo-section__member > * {
  position: relative;
  z-index: 3;
}

.duo-section__member:first-child::before {
  transform: translateX(-52%) rotate(-3deg);
}

.duo-section__member:last-child::before {
  transform: translateX(-48%) rotate(3deg);
}

.trio-ohoi-section__stage,
.duo-section__members {
  filter: saturate(0.88) contrast(1.04);
}

@media (max-width: 1279px) {
  .trio-ohoi-section__stage span,
  .duo-section__member::before,
  .duo-section__member::after {
    filter: blur(1px);
  }
}

/* DUO DEFAULT IMAGE EFFECT */
.duo-section__visual.has-default-image::before,
.duo-section__visual.has-custom-image::before {
  display: none;
}

.duo-section__visual.has-default-image .duo-section__image {
  -o-object-position: center;
     object-position: center;
  transform: scale(1.07);
  filter:
    blur(1.8px)
    brightness(0.55)
    contrast(1.12)
    saturate(0.78);
}

.duo-section__visual.has-default-image .duo-section__image-overlay {
  background:
    radial-gradient(
      circle at 72% 28%,
      rgba(237, 0, 45, 0.2),
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(8, 8, 10, 0.38),
      rgba(8, 8, 10, 0.08) 48%,
      rgba(8, 8, 10, 0.48)
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.12),
      rgba(8, 8, 10, 0.78)
    );
}

.duo-section__visual.has-default-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.duo-section__visual.has-default-image .duo-section__visual-line {
  z-index: 3;
}

/* DUO DEFAULT IMAGE CLEANUP V2 */
.duo-section__visual.has-default-image {
  min-height: 32rem;
  background: #09090b;
}

.duo-section__visual.has-default-image .duo-section__image {
  inset: -1%;
  width: 102%;
  height: 102%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 48%;
     object-position: center 48%;
  transform: scale(1.025);
  filter:
    blur(0.45px)
    brightness(0.76)
    contrast(1.08)
    saturate(0.92);
}

.duo-section__visual.has-default-image .duo-section__image-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(7, 7, 9, 0.04) 0%,
      rgba(7, 7, 9, 0.1) 52%,
      rgba(7, 7, 9, 0.58) 100%
    ),
    radial-gradient(
      circle at 68% 30%,
      rgba(237, 0, 45, 0.1),
      transparent 42%
    );
}

.duo-section__visual.has-default-image::after {
  box-shadow:
    inset 0 0 4.5rem rgba(0, 0, 0, 0.38) !important;
}

.duo-section__visual.has-default-image .duo-section__visual-line {
  left: 1.25rem;
  right: auto;
  bottom: 1.25rem;
  width: auto;
  max-width: calc(100% - 2.5rem);
  gap: 0.75rem;
  background: rgba(7, 7, 9, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.7rem 0.85rem;
  backdrop-filter: blur(10px);
}

.duo-section__visual.has-default-image .duo-section__visual-line span {
  border: 0;
  background: #ed002d;
  padding: 0.5rem 0.65rem;
}

.duo-section__visual.has-default-image .duo-section__visual-line strong {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

@media (max-width: 639px) {
  .duo-section__visual.has-default-image {
    min-height: 24rem;
  }
}

/* TRIO OHOI DEFAULT IMAGE EFFECT */
.trio-ohoi-section__poster.has-default-image::before,
.trio-ohoi-section__poster.has-default-image::after {
  display: none !important;
}

.trio-ohoi-section__poster.has-default-image .trio-ohoi-section__image {
  inset: -1%;
  width: 102%;
  height: 102%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(1.035);
  filter:
    blur(0.55px)
    brightness(0.66)
    contrast(1.1)
    saturate(0.84);
}

.trio-ohoi-section__poster.has-default-image .trio-ohoi-section__image-overlay {
  background:
    radial-gradient(
      circle at 70% 24%,
      rgba(237, 0, 45, 0.16),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      rgba(7, 7, 9, 0.28),
      rgba(7, 7, 9, 0.04) 52%,
      rgba(7, 7, 9, 0.38)
    ),
    linear-gradient(
      180deg,
      rgba(7, 7, 9, 0.06),
      rgba(7, 7, 9, 0.66)
    );
}

.trio-ohoi-section__poster.has-default-image .trio-ohoi-section__big-number {
  color: rgba(5, 5, 7, 0.5);
}

/* REPERTOIRE SECTION */
.repertoire-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(237, 0, 45, 0.13),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #09090b 0%,
      #131216 52%,
      #08080a 100%
    );
  padding: 6rem 1.25rem;
}

.repertoire-section__ghost {
  position: absolute;
  left: -0.04em;
  bottom: -0.08em;
  z-index: -1;
  font-size: clamp(9rem, 25vw, 24rem);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.repertoire-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.repertoire-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.23em;
  color: #ed002d;
}

.repertoire-section__title {
  max-width: 43rem;
  margin: 1.5rem 0 0;
  font-size: clamp(3.2rem, 6.3vw, 6.3rem);
  font-weight: 900;
  line-height: 0.91;
  letter-spacing: -0.065em;
  color: #ffffff;
}

.repertoire-section__lead {
  max-width: 43rem;
  margin: 2rem 0 0;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  font-weight: 750;
  line-height: 1.6;
  color: #ffffff;
}

.repertoire-section__text {
  max-width: 43rem;
  margin: 1.75rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #aaa9ae;
}

.repertoire-section__request {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 33rem;
  margin-top: 2.25rem;
  border-left: 4px solid #ed002d;
  background: rgba(255, 255, 255, 0.045);
  padding: 1rem 1.15rem;
}

.repertoire-section__request span {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #ed002d;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
}

.repertoire-section__request strong {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
}

.repertoire-section__board {
  position: relative;
  margin-top: 4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      transparent
    ),
    #08080a;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.45);
}

.repertoire-section__board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2.8rem,
      rgba(255, 255, 255, 0.025) 2.8rem,
      rgba(255, 255, 255, 0.025) 2.85rem
    );
  pointer-events: none;
}

.repertoire-section__board-header,
.repertoire-section__board-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "Special Elite", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
}

.repertoire-section__board-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  padding: 1.1rem 1.25rem;
  color: #ffffff;
}

.repertoire-section__board-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 1rem 1.25rem;
  color: #7f7e84;
}

.repertoire-section__tracks {
  position: relative;
  z-index: 1;
}

.repertoire-section__track {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 7.2rem;
  align-items: center;
  padding: 1.2rem 1.25rem;
  transition:
    background 180ms ease,
    padding-left 180ms ease;
}

.repertoire-section__track + 
.repertoire-section__track {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.repertoire-section__track:hover {
  background: rgba(237, 0, 45, 0.07);
  padding-left: 1.6rem;
}

.repertoire-section__track-number {
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  color: #ed002d;
}

.repertoire-section__track h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 900;
  color: #ffffff;
}

.repertoire-section__track p {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #85848a;
}

.repertoire-section__track-line {
  position: absolute;
  left: 1.25rem;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #ed002d;
  transition: width 250ms ease;
}

.repertoire-section__track:hover
.repertoire-section__track-line {
  width: calc(100% - 2.5rem);
}

.repertoire-section__stamp {
  position: absolute;
  right: -1.2rem;
  top: 44%;
  z-index: 3;
  border: 3px solid #ed002d;
  padding: 0.75rem 1.1rem;
  font-family: "Special Elite", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #ed002d;
  transform: rotate(-7deg);
}

@media (min-width: 1024px) {
  .repertoire-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .repertoire-section__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(22rem, 0.85fr);
    align-items: center;
    gap: clamp(4rem, 7vw, 7rem);
  }

  .repertoire-section__board {
    margin-top: 0;
  }
}

@media (max-width: 639px) {
  .repertoire-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .repertoire-section__track {
    grid-template-columns:
      2.3rem minmax(0, 1fr);
  }

  .repertoire-section__stamp {
    right: 0.85rem;
    top: auto;
    bottom: 5.5rem;
    max-width: calc(100% - 1.7rem);
    padding: 0.6rem 0.8rem;
    font-size: 0.65rem;
    white-space: nowrap;
  }
}

/* FINAL DESKTOP SETLIST RAIL */
@media (min-width: 1280px) {
  main section[id]:not(#top),
  body:has(.setlist-navigation.is-open) main section[id]:not(#top),
  body:has(.setlist-navigation.is-collapsed) main section[id]:not(#top) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .desktop-setlist-safe {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 0 !important;
    transition:
      width 480ms cubic-bezier(0.22, 1, 0.36, 1),
      margin-right 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body:has(.setlist-navigation.is-open)
    .desktop-setlist-safe {
    width: calc(100% - 16rem) !important;
    margin-left: auto !important;
    margin-right: 16rem !important;
    padding-right: 0 !important;
  }

  body:has(.setlist-navigation.is-collapsed)
    .desktop-setlist-safe {
    width: calc(100% - 4.25rem) !important;
    margin-left: auto !important;
    margin-right: 4.25rem !important;
    padding-right: 0 !important;
  }
}

/* REPERTOIRE STAMP INSIDE CARD */
@media (min-width: 1280px) {
  .repertoire-section__board .repertoire-section__stamp {
    right: 1rem !important;
    max-width: calc(100% - 2rem);
    transform: rotate(-5deg);
  }
}

/* REPERTOIRE STAMP IMPACT ANIMATION */
.repertoire-section__stamp {
  opacity: 0;
  transform:
    translate3d(0, -2.5rem, 0)
    scale(1.7)
    rotate(-11deg);
  transform-origin: center;
  will-change: transform, opacity;
}

.repertoire-section__stamp.is-stamped {
  animation:
    repertoire-stamp-hit
    680ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.repertoire-section__stamp.is-stamped::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 2px solid rgba(237, 0, 45, 0.65);
  opacity: 0;
  pointer-events: none;
  animation:
    repertoire-stamp-ink
    700ms
    ease-out
    forwards;
}

@keyframes repertoire-stamp-hit {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -2.5rem, 0)
      scale(1.7)
      rotate(-11deg);
    filter: blur(1.5px);
  }

  56% {
    opacity: 1;
    transform:
      translate3d(0, 0.1rem, 0)
      scale(0.88)
      rotate(-5deg);
    filter: blur(0);
  }

  76% {
    transform:
      translate3d(0, -0.12rem, 0)
      scale(1.06)
      rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1)
      rotate(-5deg);
    filter: blur(0);
  }
}

@keyframes repertoire-stamp-ink {
  0%,
  48% {
    opacity: 0;
    transform: scale(0.82);
  }

  58% {
    opacity: 0.38;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .repertoire-section__stamp,
  .repertoire-section__stamp.is-stamped {
    opacity: 1;
    animation: none !important;
    transform: rotate(-5deg);
  }

  .repertoire-section__stamp.is-stamped::after {
    display: none;
  }
}

/* VIDEOS SECTION */
.videos-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 78% 25%,
      rgba(237, 0, 45, 0.14),
      transparent 32%
    ),
    #08080a;
  padding: 6rem 1.25rem;
}

.videos-section__ghost {
  position: absolute;
  left: -0.04em;
  bottom: -0.08em;
  z-index: -1;
  font-size: clamp(10rem, 27vw, 27rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.12em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.videos-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.videos-section__header {
  display: grid;
  gap: 2rem;
}

.videos-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.videos-section__title {
  margin: 1.4rem 0 0;
  font-size: clamp(3.2rem, 7vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: #ffffff;
}

.videos-section__intro {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #aaa9ae;
}

.videos-section__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  border-bottom: 2px solid #ed002d;
  padding-bottom: 0.35rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
}

.videos-section__channel-note {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: "Special Elite", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #77767c;
}

.videos-section__layout {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.videos-section__featured {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #0c0c0f;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.42);
}

.videos-section__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(
      circle at center,
      rgba(237, 0, 45, 0.15),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #17161a,
      #050506
    );
}

.videos-section__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.videos-section__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  text-align: center;
}

.videos-section__empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 5rem,
      rgba(255, 255, 255, 0.025) 5rem,
      rgba(255, 255, 255, 0.025) 5.05rem
    );
}

.videos-section__play {
  position: relative;
  z-index: 1;
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border: 2px solid #ed002d;
  border-radius: 50%;
  background: rgba(237, 0, 45, 0.08);
}

.videos-section__play span {
  width: 0;
  height: 0;
  margin-left: 0.3rem;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-left: 1.15rem solid #ffffff;
}

.videos-section__empty strong {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  font-size: 1.2rem;
  color: #ffffff;
}

.videos-section__empty p {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  margin: 0.7rem 0 0;
  line-height: 1.7;
  color: #85848a;
}

.videos-section__featured-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 1.25rem;
}

.videos-section__featured-meta > span {
  background: #ed002d;
  padding: 0.55rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
}

.videos-section__featured-meta h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #ffffff;
}

.videos-section__featured-meta p {
  margin: 0.45rem 0 0;
  line-height: 1.6;
  color: #85848a;
}

.videos-section__playlist {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #0b0b0e;
}

.videos-section__playlist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem;
  font-family: "Special Elite", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  color: #ffffff;
}

.videos-section__playlist-heading strong {
  color: #ed002d;
}

.videos-section__item {
  display: grid;
  width: 100%;
  grid-template-columns: 2rem 6.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  padding: 1rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    background 180ms ease,
    padding-left 180ms ease;
}

.videos-section__item:hover,
.videos-section__item.is-active {
  background: rgba(237, 0, 45, 0.08);
  padding-left: 1.25rem;
}

.videos-section__item-number {
  font-family: "Special Elite", monospace;
  font-size: 0.7rem;
  color: #ed002d;
}

.videos-section__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #17171b;
}

.videos-section__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.videos-section__thumb-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle,
      rgba(237, 0, 45, 0.2),
      transparent 48%
    ),
    #121216;
}

.videos-section__thumb-placeholder span {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  border-left: 0.7rem solid #ffffff;
}

.videos-section__item-copy {
  min-width: 0;
}

.videos-section__item-copy strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #ffffff;
  text-overflow: ellipsis;
}

.videos-section__item-copy small {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #77767c;
}

@media (min-width: 768px) {
  .videos-section__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(18rem, 0.65fr);
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .videos-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .videos-section__layout {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(19rem, 0.65fr);
    align-items: stretch;
  }
}

@media (max-width: 639px) {
  .videos-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .videos-section__item {
    grid-template-columns:
      1.7rem
      5rem
      minmax(0, 1fr);
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}


/* SCROLL DRIVEN GHOST TEXT MOTION */
@media (min-width: 1280px) {
  main [class*="section__ghost"] {
    transform: translate3d(
      var(--ghost-scroll-x, 0px),
      var(--ghost-scroll-y, 0px),
      0
    );
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  main [class*="section__ghost"] {
    transform: none !important;
    will-change: auto;
  }
}

/* HIDE DECORATIVE SECTION NUMBERS */
.troubadour-section__number,
.trio-ohoi-section__big-number,
.duo-section__member-number {
  display: none !important;
}

/* GIGS SECTION */
.gigs-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(237, 0, 45, 0.13),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #0d0d10,
      #08080a
    );
  padding: 6rem 1.25rem;
}

.gigs-section__ghost {
  position: absolute;
  left: -0.04em;
  bottom: -0.08em;
  z-index: -1;
  font-size: clamp(11rem, 28vw, 28rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.gigs-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.gigs-section__header {
  display: grid;
  gap: 2rem;
}

.gigs-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.gigs-section__title {
  margin: 1.5rem 0 0;
  font-size: clamp(3.2rem, 7vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: #ffffff;
}

.gigs-section__intro {
  max-width: 35rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #aaa9ae;
}

.gigs-section__list {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.gigs-section__gig {
  display: grid;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  padding: 1.5rem 0;
  transition:
    background 180ms ease,
    padding 180ms ease;
}

.gigs-section__gig:hover {
  background: rgba(237, 0, 45, 0.045);
  padding-right: 1rem;
  padding-left: 1rem;
}

.gigs-section__date {
  display: flex;
  width: 7rem;
  min-height: 7rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid #ed002d;
  padding: 0.8rem;
}

.gigs-section__date span {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 0.9;
  color: #ffffff;
}

.gigs-section__date strong {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: #ed002d;
}

.gigs-section__date small {
  margin-top: 0.25rem;
  color: #77767c;
}

.gigs-section__gig-number,
.gigs-section__full-date {
  font-family: "Special Elite", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.gigs-section__gig-number {
  color: #ed002d;
}

.gigs-section__full-date {
  margin: 0.65rem 0 0;
  color: #77767c;
}

.gigs-section__details h3 {
  margin: 0.7rem 0 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #ffffff;
}

.gigs-section__city {
  margin: 0.45rem 0 0;
  color: #aaa9ae;
}

.gigs-section__facts {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.gigs-section__facts div {
  border-left: 2px solid rgba(237, 0, 45, 0.8);
  padding-left: 0.9rem;
}

.gigs-section__facts dt {
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: #77767c;
}

.gigs-section__facts dd {
  margin: 0.4rem 0 0;
  font-weight: 800;
  color: #ffffff;
}

.gigs-section__details-link,
.gigs-section__booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.gigs-section__details-link {
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.8rem 1rem;
  color: #ffffff;
}

.gigs-section__details-link.is-disabled {
  color: #77767c;
}

.gigs-section__empty {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: 3.5rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.025);
  padding: 1.5rem;
}

.gigs-section__empty-date {
  display: flex;
  width: 7rem;
  height: 7rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-left: 4px solid #ed002d;
  padding: 0.8rem;
}

.gigs-section__empty-date span {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.gigs-section__empty-date strong {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #ed002d;
}

.gigs-section__empty h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #ffffff;
}

.gigs-section__empty p {
  max-width: 36rem;
  margin: 0.65rem 0 0;
  line-height: 1.7;
  color: #aaa9ae;
}

.gigs-section__booking {
  justify-self: start;
  background: #ed002d;
  padding: 1rem 1.4rem;
  color: #ffffff;
}

.gigs-section__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding-top: 1.25rem;
  font-family: "Special Elite", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #77767c;
}

.gigs-section__footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gigs-section__footer a {
  color: #ffffff;
  text-decoration-color: #ed002d;
  text-underline-offset: 0.3rem;
}

@media (min-width: 768px) {
  .gigs-section__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(18rem, 0.65fr);
    align-items: end;
  }

  .gigs-section__empty {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .gigs-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .gigs-section__gig {
    grid-template-columns:
      7rem
      minmax(13rem, 1fr)
      minmax(12rem, 0.75fr)
      auto;
    align-items: center;
  }

  .gigs-section__details-link {
    justify-self: end;
  }
}

@media (max-width: 639px) {
  .gigs-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}


/* BT LIVE SECTION */
.bt-live-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 20% 42%,
      rgba(237, 0, 45, 0.14),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #08080a 0%,
      #121216 48%,
      #08080a 100%
    );
  padding: 6rem 1.25rem;
}

.bt-live-section__ghost {
  position: absolute;
  right: -0.05em;
  bottom: -0.08em;
  z-index: -1;
  font-size: clamp(10rem, 27vw, 27rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.1em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.bt-live-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.bt-live-section__identity {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-live-section__rack {
  position: relative;
  width: min(100%, 32rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      transparent
    ),
    #09090c;
  box-shadow:
    1rem 1rem 0 rgba(237, 0, 45, 0.18),
    0 35px 90px rgba(0, 0, 0, 0.48);
}

.bt-live-section__rack::before,
.bt-live-section__rack::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    repeating-linear-gradient(
      180deg,
      #232328 0,
      #232328 0.55rem,
      #070708 0.55rem,
      #070708 1.1rem
    );
}

.bt-live-section__rack::before {
  left: 0.8rem;
}

.bt-live-section__rack::after {
  right: 0.8rem;
}

.bt-live-section__rack-top,
.bt-live-section__rack-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2.5rem;
  font-family: "Special Elite", monospace;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
}

.bt-live-section__rack-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: #8d8c92;
}

.bt-live-section__rack-top span:last-child {
  color: #ed002d;
}

.bt-live-section__rack-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: #77767c;
}

.bt-live-section__logo-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 24rem;
  place-items: center;
  padding: 3rem;
}

.bt-live-section__logo-wrap::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: rgba(237, 0, 45, 0.12);
  filter: blur(3.5rem);
}

.bt-live-section__logo {
  position: relative;
  z-index: 1;
  width: min(100%, 20rem);
  max-height: 16rem;
  -o-object-fit: contain;
     object-fit: contain;
  filter:
    drop-shadow(
      0 1.2rem 2.5rem
      rgba(0, 0, 0, 0.55)
    );
}

.bt-live-section__meters {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: 4.4rem;
  z-index: 3;
  display: flex;
  height: 2.7rem;
  align-items: flex-end;
  gap: 0.35rem;
  opacity: 0.55;
}

.bt-live-section__meters span {
  flex: 1;
  background: #ed002d;
}

.bt-live-section__meters span:nth-child(1) {
  height: 28%;
}

.bt-live-section__meters span:nth-child(2) {
  height: 48%;
}

.bt-live-section__meters span:nth-child(3) {
  height: 68%;
}

.bt-live-section__meters span:nth-child(4) {
  height: 92%;
}

.bt-live-section__meters span:nth-child(5) {
  height: 74%;
}

.bt-live-section__meters span:nth-child(6) {
  height: 56%;
}

.bt-live-section__meters span:nth-child(7) {
  height: 36%;
}

.bt-live-section__meters span:nth-child(8) {
  height: 62%;
}

.bt-live-section__content {
  margin-top: 4rem;
}

.bt-live-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.bt-live-section__title {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  font-size: clamp(3.1rem, 6.2vw, 6rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.065em;
  color: #ffffff;
}

.bt-live-section__lead {
  max-width: 45rem;
  margin: 2rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 750;
  line-height: 1.6;
  color: #ffffff;
}

.bt-live-section__text {
  max-width: 45rem;
  margin: 1.75rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #aaa9ae;
}

.bt-live-section__services {
  display: grid;
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.bt-live-section__service {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.8rem;
  min-height: 8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.15rem;
  transition: background 180ms ease;
}

.bt-live-section__service:hover {
  background: rgba(237, 0, 45, 0.07);
}

.bt-live-section__service > span {
  font-family: "Special Elite", monospace;
  font-size: 0.7rem;
  color: #ed002d;
}

.bt-live-section__service h3 {
  margin: 0;
  font-size: 1rem;
  color: #ffffff;
}

.bt-live-section__service p {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #85848a;
}

.bt-live-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  border-radius: 999px;
  background: #ed002d;
  padding: 1rem 1.5rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.bt-live-section__cta:hover {
  transform: translateY(-3px);
  background: #ff123d;
}

.bt-live-section__cta > span:last-child {
  font-size: 1.35rem;
  line-height: 1;
}

@media (min-width: 640px) {
  .bt-live-section__services {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bt-live-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .bt-live-section__inner {
    display: grid;
    grid-template-columns:
      minmax(21rem, 0.82fr)
      minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(4rem, 7vw, 7rem);
  }

  .bt-live-section__content {
    margin-top: 0;
  }
}

@media (max-width: 639px) {
  .bt-live-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .bt-live-section__logo-wrap {
    min-height: 18rem;
    padding: 2.3rem;
  }
}


/* CONTACT SECTION */
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 22% 32%,
      rgba(237, 0, 45, 0.16),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #09090b 0%,
      #141217 52%,
      #08080a 100%
    );
  padding: 6rem 1.25rem 0;
}

.contact-section__ghost {
  position: absolute;
  left: -0.04em;
  bottom: 2rem;
  z-index: -1;
  font-size: clamp(11rem, 29vw, 29rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.11em;
  color: rgba(255, 255, 255, 0.018);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.contact-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.contact-section__eyebrow {
  margin: 0;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: #ed002d;
}

.contact-section__title {
  max-width: 45rem;
  margin: 1.5rem 0 0;
  font-size: clamp(3.2rem, 6.5vw, 6.4rem);
  font-weight: 900;
  line-height: 0.91;
  letter-spacing: -0.065em;
  color: #ffffff;
}

.contact-section__intro {
  max-width: 42rem;
  margin: 2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #aaa9ae;
}

.contact-section__methods {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-section__method {
  display: grid;
  grid-template-columns:
    2rem
    minmax(0, 1fr)
    auto;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.15rem 0;
  color: #ffffff;
  text-decoration: none;
  transition:
    padding 180ms ease,
    background 180ms ease;
}

.contact-section__method:hover {
  background: rgba(255, 255, 255, 0.035);
  padding-right: 1rem;
  padding-left: 1rem;
}

.contact-section__method--primary {
  border-left: 4px solid #ed002d;
  padding-left: 1rem;
}

.contact-section__method-number {
  font-family: "Special Elite", monospace;
  font-size: 0.68rem;
  color: #ed002d;
}

.contact-section__method small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  color: #77767c;
}

.contact-section__method strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.contact-section__details {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
}

.contact-section__details div {
  border-left: 2px solid #ed002d;
  padding-left: 0.9rem;
}

.contact-section__details dt {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: #77767c;
}

.contact-section__details dd {
  margin: 0.45rem 0 0;
}

.contact-section__details a {
  color: #ffffff;
  text-decoration-color: rgba(237, 0, 45, 0.7);
  text-underline-offset: 0.3rem;
}

.contact-section__form {
  margin-top: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0a0a0d;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.48);
}

.contact-section__form-header,
.contact-section__form-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: "Special Elite", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.13em;
}

.contact-section__form-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.contact-section__form-header strong {
  color: #ed002d;
}

.contact-section__form-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: #77767c;
}

.contact-section__form-body {
  padding: 1.5rem;
}

.contact-section__form-body h3 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: #ffffff;
}

.contact-section__fields {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.contact-section__fields label {
  display: block;
}

.contact-section__fields label > span {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8990;
}

.contact-section__fields input,
.contact-section__fields select,
.contact-section__fields textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.035);
  padding: 0.95rem 1rem;
  font: inherit;
  color: #ffffff;
  transition:
    border 180ms ease,
    background 180ms ease;
}

.contact-section__fields input:focus,
.contact-section__fields select:focus,
.contact-section__fields textarea:focus {
  border-color: #ed002d;
  background: rgba(237, 0, 45, 0.055);
}

.contact-section__fields select option {
  background: #111114;
  color: #ffffff;
}

.contact-section__fields textarea {
  resize: vertical;
  line-height: 1.65;
}

.contact-section__message {
  grid-column: 1 / -1;
}

.contact-section__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #ed002d;
  padding: 1rem 1.5rem;
  font: inherit;
  font-weight: 900;
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.contact-section__submit:hover {
  transform: translateY(-3px);
  background: #ff123d;
}

.contact-section__submit > span:last-child {
  font-size: 1.35rem;
}

.contact-section__site-footer {
  position: relative;
  z-index: 2;
  width: calc(100% + 2.5rem);
  min-height: 21rem;
  overflow: hidden;
  margin: 6rem -1.25rem 0;
  border-top: 1px solid
    rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      circle at 18% 25%,
      rgba(237, 0, 45, 0.12),
      transparent 28rem
    ),
    linear-gradient(
      135deg,
      #0d0c0f 0%,
      #070709 58%,
      #111014 100%
    );
  color: #ffffff;
}

.contact-section__site-footer::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(72%, 54rem);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #ed002d,
    transparent
  );
  content: "";
  transform: translateX(-50%);
  box-shadow:
    0 0 2rem rgba(237, 0, 45, 0.48);
}

.contact-section__footer-ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.18em;
  color: rgba(255, 255, 255, 0.022);
  font-size: clamp(10rem, 23vw, 22rem);
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.72;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.contact-section__site-footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding-top: 4.25rem;
  padding-bottom: 2.25rem;
}

.contact-section__footer-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 4rem;
  align-items: center;
}

.contact-section__footer-brand {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  color: #ffffff;
  text-decoration: none;
}

.contact-section__footer-brand img {
  display: block;
  width: clamp(13rem, 20vw, 18rem);
  height: auto;
  filter:
    drop-shadow(
      0 1rem 1.8rem
      rgba(0, 0, 0, 0.42)
    );
}

.contact-section__footer-brand > span {
  max-width: 32rem;
  margin-top: 1rem;
  color: #aaa9ae;
  font-size: 0.9rem;
  line-height: 1.65;
}

.contact-section__footer-callout {
  min-width: 18rem;
  border-left: 3px solid #ed002d;
  padding: 0.6rem 0 0.6rem 1.4rem;
}

.contact-section__footer-callout > span {
  display: block;
  color: #77767c;
  font-family:
    "Special Elite", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.contact-section__footer-callout > a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.65rem;
  color: #ffffff;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.contact-section__footer-callout > a:hover {
  color: #ed002d;
  transform: translateX(4px);
}

.contact-section__footer-callout a > span {
  color: #ed002d;
}

.contact-section__footer-divider {
  height: 1px;
  margin-top: 3.25rem;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.04),
    transparent
  );
}

.contact-section__footer-bottom {
  display: flex;
  min-height: 5.25rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.75rem;
  padding-left: 5rem;
}

.contact-section__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
}

.contact-section__footer-nav a {
  position: relative;
  color: #aaa9ae;
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.contact-section__footer-nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  background: #ed002d;
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.contact-section__footer-nav a:hover {
  color: #ffffff;
}

.contact-section__footer-nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.contact-section__footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  color: #77767c;
  font-size: 0.68rem;
}

.contact-section__footer-meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.contact-section__footer-meta a:hover {
  color: #ed002d;
}

.contact-section__footer-meta a span {
  color: #ed002d;
}

@media (max-width: 899px) {
  .contact-section__site-footer {
    min-height: 0;
  }

  .contact-section__site-footer-inner {
    padding-top: 3.5rem;
    padding-bottom: 6rem;
    text-align: center;
  }

  .contact-section__footer-main {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
  }

  .contact-section__footer-brand {
    align-items: center;
  }

  .contact-section__footer-brand > span {
    max-width: 28rem;
  }

  .contact-section__footer-callout {
    min-width: 0;
    border-top: 2px solid #ed002d;
    border-left: 0;
    padding: 1.5rem 0 0;
  }

  .contact-section__footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0;
  }

  .contact-section__footer-nav {
    justify-content: center;
  }

  .contact-section__footer-meta {
    align-items: center;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .contact-section__footer-nav {
    max-width: 18rem;
    justify-content: center;
    row-gap: 1.1rem;
  }

  .contact-section__footer-ghost {
    right: 50%;
    transform: translateX(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-section__footer-nav a,
  .contact-section__footer-callout > a {
    transition: none;
  }
}

@media (min-width: 640px) {
  .contact-section__details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .contact-section__fields {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .contact-section {
    padding-top: 8rem;
  }

  .contact-section__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(25rem, 1.15fr);
    align-items: start;
    gap: clamp(4rem, 7vw, 7rem);
  }

  .contact-section__form {
    margin-top: 0;
  }

  .contact-section__form-body {
    padding: 2rem;
  }
}

@media (max-width: 639px) {
  .contact-section {
    padding-top: 5rem;
  }

  .contact-section__site-footer {
    margin-top: 4rem;
  }
}


/* FLOATING WHATSAPP AND SCROLL TOP */


.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 1.4rem 3.2rem rgba(0, 0, 0, 0.5),
    0 0 0 0.55rem rgba(37, 211, 102, 0.12);
}

.floating-whatsapp svg {
  width: 1.9rem;
  height: 1.9rem;
}



@media (min-width: 1280px) {
  

  

  .scroll-top-button:hover {
    transform:
      translateY(-3px)
      rotate(0deg);
  }

  .scroll-top-button > span {
    font-size: 1.2rem;
    line-height: 1;
    color: #ed002d;
  }

  .scroll-top-button strong {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 1279px) {
  

  

}
/* MOBILE MENU HEADER HIDE START */
@media (max-width: 1279px) {
  body.mobile-menu-open .site-header {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
  }
}
/* MOBILE MENU HEADER HIDE END */

/* FLOATING ACTIONS CANONICAL START */

.floating-whatsapp {
  position: fixed;
  left: 1.25rem;
  right: auto;
  bottom: 1.25rem;
  z-index: 160;
  display: grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  border: 2px solid
    rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow:
    0 1rem 2.4rem
    rgba(0, 0, 0, 0.4);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.scroll-top-button {
  position: fixed;
  right: 1.65rem;
  bottom: 6.15rem;
  z-index: 155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid
    rgba(25, 22, 17, 0.34);
  background: #eee8d5;
  padding: 0.7rem 0.9rem;
  color: #15120e;
  font-family:
    "Permanent Marker",
    cursive;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.scroll-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 1279px) {
  .floating-whatsapp {
    left: 1rem;
    right: auto;
    bottom: calc(
      5.8rem +
      env(safe-area-inset-bottom)
    );
    width: 3.25rem;
    height: 3.25rem;
    opacity: 0;
    pointer-events: none;
    transform:
      translateY(0.6rem)
      scale(0.94);
  }

  .floating-whatsapp.is-mobile-visible {
    opacity: 1;
    pointer-events: auto;
    transform:
      translateY(0)
      scale(1);
  }

  .scroll-top-button {
    right: 1rem;
    bottom: calc(
      5.8rem +
      env(safe-area-inset-bottom)
    );
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid
      rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background:
      rgba(13, 12, 15, 0.94);
    padding: 0;
    color: #ffffff;
    box-shadow:
      0 1rem 2.4rem
      rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(10px);
  }

  .scroll-top-button span {
    color: #ed002d;
    font-family: Arial, sans-serif;
    font-size: 1.45rem;
    line-height: 1;
  }

  .scroll-top-button strong {
    display: none;
  }

  body.mobile-menu-open
    .floating-whatsapp,
  body.mobile-menu-open
    .scroll-top-button {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* FLOATING ACTIONS CANONICAL END */

/* SITE MOTION START */

/* Single lightweight opening screen */
.site-opening {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(237, 0, 45, 0.13),
      transparent 30rem
    ),
    linear-gradient(
      145deg,
      #08080a,
      #12070b 58%,
      #070709
    );
  pointer-events: none;
  animation:
    site-opening-exit
    1700ms
    cubic-bezier(0.76, 0, 0.24, 1)
    forwards;
}

.site-opening__ambient {
  position: absolute;
  width: min(86vw, 52rem);
  height: min(86vw, 52rem);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(237, 0, 45, 0.1),
      transparent 66%
    );
  animation:
    site-opening-ambient
    1700ms
    ease-out
    both;
}

.site-opening__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(84vw, 32rem);
  overflow: visible;
  text-align: center;
  animation:
    site-opening-content
    1700ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.site-opening__logo {
  display: block;
  position: relative;
  width: clamp(
    15rem,
    32vw,
    27rem
  );
  max-width: 82vw;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  visibility: visible;
  filter:
    drop-shadow(
      0 1.25rem 2.8rem
      rgba(0, 0, 0, 0.62)
    );
}

.site-opening__domain {
  margin-top: 1.1rem;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

.site-opening__loading {
  display: flex;
  align-items: baseline;
  margin-top: 0.75rem;
  color:
    rgba(255, 255, 255, 0.48);
  font-family:
    "Special Elite",
    monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-opening__loading span {
  display: inline-block;
  width: 1.4rem;
  color: #ed002d;
  letter-spacing: 0.08em;
  animation:
    site-loading-dots
    700ms
    ease-in-out
    infinite alternate;
}

/* Hero content after opening */
html.site-motion-enabled
  .site-hero-reveal {
  opacity: 0;
  translate: 0 1rem;
  animation:
    site-hero-enter
    700ms
    var(--site-hero-delay, 1050ms)
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

/* Section reveals */
html.site-motion-enabled
  .site-reveal {
  opacity: 0;
  translate:
    var(--site-reveal-x, 0)
    1.5rem;
  transition:
    opacity
      720ms
      var(--site-reveal-delay, 0ms)
      ease,
    translate
      820ms
      var(--site-reveal-delay, 0ms)
      cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

html.site-motion-enabled
  .site-reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}

@keyframes site-opening-content {
  0% {
    opacity: 0;
    scale: 0.95;
    translate: 0 0.75rem;
  }

  16% {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }

  76% {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }

  100% {
    opacity: 0;
    scale: 1.015;
    translate: 0 -0.35rem;
  }
}

@keyframes site-opening-ambient {
  0% {
    opacity: 0;
    scale: 0.72;
  }

  28% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1.12;
  }
}

@keyframes site-opening-exit {
  0%,
  78% {
    visibility: visible;
    opacity: 1;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes site-loading-dots {
  from {
    opacity: 0.28;
  }

  to {
    opacity: 1;
  }
}

@keyframes site-hero-enter {
  from {
    opacity: 0;
    translate: 0 1rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 767px) {
  .site-opening__logo {
    width: min(76vw, 21rem);
  }

  html.site-motion-enabled
    .site-reveal {
    translate: 0 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-opening {
    display: none;
  }

  html.site-motion-enabled
    .site-hero-reveal,
  html.site-motion-enabled
    .site-reveal {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* SITE MOTION END */

/* HEADER SCROLL FADE START */

.site-header {
  isolation: isolate;
  transition:
    background-color 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease,
    backdrop-filter 380ms ease;
}

.site-header::before {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(237, 0, 45, 0.18) 18%,
    #ed002d 50%,
    rgba(237, 0, 45, 0.18) 82%,
    transparent 100%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.04);
  transform-origin: center;
  box-shadow:
    0 0 1.2rem
    rgba(237, 0, 45, 0.72);
}

.site-header__inner,
.site-header__logo img,
.site-header__nav a,
.site-header__cta {
  transition:
    opacity 320ms ease,
    color 320ms ease,
    transform 420ms
      cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

.site-header--scrolled {
  border-bottom-color:
    rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 10, 0.9),
      rgba(18, 7, 11, 0.82),
      rgba(8, 8, 10, 0.9)
    );
  box-shadow:
    0 1rem 2.8rem
    rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header--scrolled::before {
  animation:
    header-live-signal
    760ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.site-header--scrolled
  .site-header__inner {
  transform: translateY(-1px);
}

.site-header--scrolled
  .site-header__logo img {
  transform:
    translateY(-1px)
    scale(0.93);
  filter:
    drop-shadow(
      0 0.6rem 1rem
      rgba(0, 0, 0, 0.35)
    );
}

.site-header--scrolled
  .site-header__nav a {
  opacity: 0.72;
}

.site-header--scrolled
  .site-header__nav a:hover,
.site-header--scrolled
  .site-header__nav a.is-active {
  opacity: 1;
}

.site-header--scrolled
  .site-header__cta {
  transform:
    translateY(-1px)
    scale(0.96);
  box-shadow:
    0 0.75rem 1.8rem
    rgba(237, 0, 45, 0.22);
}

@keyframes header-live-signal {
  0% {
    opacity: 0;
    transform: scaleX(0.04);
  }

  28% {
    opacity: 1;
  }

  72% {
    opacity: 0.85;
    transform: scaleX(1);
  }

  100% {
    opacity: 0.22;
    transform: scaleX(1);
  }
}

@media (max-width: 767px) {
  .site-header--scrolled {
    background:
      rgba(8, 8, 10, 0.82);
    box-shadow:
      0 0.8rem 2rem
      rgba(0, 0, 0, 0.28);
  }

  .site-header--scrolled
    .site-header__logo img {
    transform:
      translateY(-1px)
      scale(0.91);
  }

  .site-header--scrolled
    .site-header__cta {
    transform:
      translateY(-1px)
      scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .site-header__logo img,
  .site-header__nav a,
  .site-header__cta {
    transition: none;
  }

  .site-header--scrolled::before {
    opacity: 0.22;
    transform: scaleX(1);
    animation: none;
  }
}

/* HEADER SCROLL FADE END */

.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-nico-red\/60:hover{
  border-color: rgb(220 2 41 / 0.6);
}

.hover\:bg-\[\#3f2719\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(63 39 25 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/35:hover{
  background-color: rgb(0 0 0 / 0.35);
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:text-\[\#5a3824\]:hover{
  --tw-text-opacity: 1;
  color: rgb(90 56 36 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px){

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pb-6{
    padding-bottom: 1.5rem;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 768px){

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:justify-between{
    justify-content: space-between;
  }
}