:root {
    --primary-color: #34414b;
    --secondary-color: #ffffff;
    --bg-color: #fff5fa;
    --text-color: #4d5862;
    --accent-color: #c90072;
    --accent-bright: #ff4fb0;
    --white-color: #ffffff;
    --divider-color: rgba(42, 54, 64, 0.17);
    --dark-divider-color: rgba(255, 255, 255, 0.18);
    --arena-deep: #202a32;
    --arena-pink-soft: #fde5f3;
    --arena-green: #4f7b45;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #fff;
    color: var(--text-color);
}

body:not(.home-page) {
    padding-top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(236, 0, 139, 0.35);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 10000;
    padding: 12px 18px;
    color: #fff;
    background: var(--accent-color);
    border-radius: 0 0 10px 10px;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

.main-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: linear-gradient(180deg, rgba(31, 41, 49, .98), rgba(31, 41, 49, .82), transparent);
    transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.main-header .header-sticky,
.main-header .header-sticky.active {
    position: relative !important;
    top: 0;
    right: auto;
    left: auto;
    transform: none !important;
    background: transparent !important;
}

.main-header .header-sticky.hide {
    transform: none !important;
}

.main-header.is-scrolled {
    background: rgba(32, 42, 50, .96);
    box-shadow: 0 12px 35px rgba(18, 25, 30, .24);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.navbar-brand img,
.footer-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.navbar-brand img {
    max-width: 235px;
}

.footer-logo img {
    max-width: 310px;
}

.main-header .main-menu > .nav-menu-wrapper > ul > li > a.active,
.main-header .main-menu > .nav-menu-wrapper > ul > li > a[aria-current="page"] {
    color: var(--accent-bright) !important;
    text-shadow: 0 0 22px rgba(255, 79, 176, .24);
}

.main-menu ul ul {
    background: var(--arena-deep);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 45px rgba(0,0,0,.2);
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
    color: #fff;
    background: rgba(236, 0, 139, .16);
}

.header-social-quick {
    display: flex;
    gap: 8px;
    margin: 0 14px;
}

.header-social-quick a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: .25s ease;
}

.header-social-quick a:hover,
.header-social-quick a:focus {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.social-quickbar {
    position: fixed;
    z-index: 98;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 18px 45px rgba(32,42,50,.22);
    transform: translateY(-50%);
}

.social-quickbar a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 52px;
    min-width: 52px;
    padding: 13px 17px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: filter .2s ease, width .25s ease;
}

.social-quickbar a:hover,
.social-quickbar a:focus {
    width: 150px;
    color: #fff;
    filter: brightness(1.08);
}

.social-quickbar i {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
}

.social-quickbar a > span:not(.visually-hidden) {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .25s ease, opacity .2s ease;
}

.social-quickbar a:hover > span:not(.visually-hidden),
.social-quickbar a:focus > span:not(.visually-hidden) {
    max-width: 105px;
    opacity: 1;
}

.social-quickbar-facebook {
    background: #1877f2;
}

.social-quickbar-wedding {
    background: var(--accent-color);
}

.btn-default {
    box-shadow: 0 12px 30px rgba(236, 0, 139, .16);
}

.btn-default::before,
.readmore-btn::before {
    filter: hue-rotate(78deg) saturate(4);
}

.btn-outline-arena {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 12px 24px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 30px;
    font-family: var(--accent-font);
    font-weight: 700;
    transition: .25s ease;
}

.btn-outline-arena:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

.hero.arena-hero {
    min-height: 900px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(20, 28, 35, .94) 0%, rgba(20, 28, 35, .86) 34%, rgba(20, 28, 35, .58) 57%, rgba(20, 28, 35, .24) 78%, rgba(20, 28, 35, .10) 100%),
        linear-gradient(0deg, rgba(13, 18, 22, .34), rgba(13, 18, 22, .03) 60%),
        url('../images/stock/arena-stock-chef.webp') center 60% / cover no-repeat;
    background-color: var(--arena-deep);
    padding: 230px 0 150px;
    overflow: hidden;
}

.hero.arena-hero::before {
    background: radial-gradient(circle at 74% 65%, rgba(236, 0, 139, .09), transparent 31%);
}

.hero.arena-hero::after {
    display: none;
}

.hero.arena-hero .container {
    z-index: 3;
}

.hero.arena-hero .section-title h1 {
    max-width: 780px;
    font-size: clamp(3.15rem, 6.5vw, 6rem);
    line-height: .98;
    text-wrap: balance;
}

.hero.arena-hero .section-title h1 strong {
    color: var(--accent-bright);
    font-weight: inherit;
}

.hero.arena-hero .section-title p {
    max-width: 650px;
    font-size: 20px;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    padding-top: 34px;
    margin-top: 42px;
    border-top: 1px solid rgba(255,255,255,.22);
}

.hero-proof-item {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #fff;
    font-weight: 600;
}

.hero-proof-item i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent-color);
    border-radius: 50%;
}

body {
    --page-hero-image: url('../images/stock/arena-stock-elegant-table.webp');
    --page-hero-position: center;
    --page-hero-size: cover;
}

body[data-page="services"] {
    --page-hero-image: url('../images/stock/arena-stock-chef.webp');
    --page-hero-position: center 60%;
}

body[data-page="mariage"] {
    --page-hero-image: url('../images/stock/arena-stock-elegant-table.webp');
    --page-hero-position: center;
}

body[data-page="entreprise"] {
    --page-hero-image: url('../images/stock/arena-stock-cocktail.webp');
    --page-hero-position: center 56%;
}

body[data-page="receptions"] {
    --page-hero-image: url('../images/stock/arena-stock-dessert-spread.webp');
    --page-hero-position: center 54%;
}

body[data-page="plateaux"] {
    --page-hero-image: url('../images/stock/arena-stock-catering.webp');
    --page-hero-position: center 60%;
}

body[data-page="gallery"] {
    --page-hero-image: url('../images/stock/arena-stock-dessert-spread.webp');
    --page-hero-position: center 52%;
}

body[data-page="devis"] {
    --page-hero-image: url('../images/stock/arena-stock-chef.webp');
    --page-hero-position: center 60%;
}

body[data-page="contact"] {
    --page-hero-image: url('../images/stock/arena-stock-cocktail.webp');
    --page-hero-position: center 56%;
}

body[data-page="legal"] {
    --page-hero-image: url('../images/stock/arena-stock-elegant-table.webp');
}

.page-header.arena-page-header {
    min-height: 650px;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    padding: 220px 0 100px;
    background-color: var(--arena-deep);
    background-image:
        linear-gradient(90deg, rgba(24,32,39,.92) 0%, rgba(24,32,39,.78) 45%, rgba(24,32,39,.38) 70%, rgba(24,32,39,.14) 100%),
        linear-gradient(0deg, rgba(20,28,34,.51), rgba(20,28,34,.03) 58%),
        var(--page-hero-image);
    background-repeat: no-repeat;
    background-position: center, center, var(--page-hero-position);
    background-size: cover, cover, var(--page-hero-size);
}

.page-header.arena-page-header::before {
    z-index: -1;
    background:
        radial-gradient(circle at 88% 82%, rgba(236,0,139,.28), transparent 23%),
        linear-gradient(90deg, rgba(47,57,66,.15), transparent 68%);
}

.page-header.arena-page-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-color) 0 24%, rgba(236,0,139,.12) 68%, transparent);
}

.page-header-box {
    max-width: 930px;
}

.page-header-box h1 {
    max-width: 930px;
    color: #fff;
    font-size: clamp(3.1rem, 6vw, 5.55rem);
    line-height: .98;
    letter-spacing: -.035em;
    text-shadow: 0 8px 28px rgba(0,0,0,.28);
    text-wrap: balance;
}

.page-header-box .breadcrumb {
    margin-top: 25px;
}

.page-intro {
    max-width: 720px;
    margin-top: 22px;
    color: rgba(255,255,255,.9);
    font-size: 21px;
    line-height: 1.55;
    text-shadow: 0 3px 14px rgba(0,0,0,.22);
}

.page-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.page-hero-kicker::before {
    content: "";
    width: 30px;
    height: 3px;
    background: var(--accent-color);
}

.page-hero-actions,
.page-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.page-hero-actions {
    margin-top: 30px;
}

.page-hero-chips {
    margin-top: 26px;
}

.page-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 700;
}

.section-pad {
    padding: 115px 0;
}

.section-pad-sm {
    padding: 80px 0;
}

.bg-soft {
    background: var(--bg-color);
}

.bg-deep {
    background: var(--arena-deep);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 24px;
    height: 3px;
    background: currentColor;
    border-radius: 10px;
}

.lead-title {
    margin-bottom: 24px;
    color: var(--primary-color);
    font-size: clamp(2.25rem, 4.8vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.lead-copy {
    max-width: 740px;
    font-size: 19px;
}

.brand-accent {
    color: var(--accent-color);
}

.dark-section .brand-accent,
.dark-section .eyebrow,
.page-header.arena-page-header .brand-accent {
    color: var(--accent-bright);
}

.media-card {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(47,57,66,.18);
}

.media-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(47,57,66,.72));
}

.media-card-label {
    position: absolute;
    z-index: 2;
    left: 25px;
    right: 25px;
    bottom: 22px;
    color: #fff;
    font-family: var(--accent-font);
    font-size: 24px;
    font-weight: 700;
}

.service-card-photo {
    position: relative;
    height: 210px;
    margin: -34px -34px 28px;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}

.service-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(47,57,66,.28));
}

.service-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.service-card:hover .service-card-photo img {
    transform: scale(1.05);
}

.service-photo-duo {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    grid-auto-rows: 430px;
    gap: 18px;
}

.service-photo-duo figure,
.wedding-collage figure,
.wedding-mosaic figure {
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--arena-deep);
    border-radius: 24px;
    box-shadow: 0 24px 55px rgba(47,57,66,.14);
}

.service-photo-duo img,
.wedding-collage img,
.wedding-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.service-photo-duo figure:hover img,
.wedding-collage figure:hover img,
.wedding-mosaic figure:hover img {
    transform: scale(1.04);
}

.service-photo-duo figcaption,
.wedding-collage figcaption,
.wedding-mosaic figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 55px 22px 20px;
    color: #fff;
    background: linear-gradient(transparent, rgba(35,44,52,.9));
    font-weight: 800;
}

.wedding-trust {
    position: relative;
    z-index: 4;
    margin-top: -34px;
}

.home-trust {
    margin-top: -52px;
}

.wedding-trust-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(38,47,55,.16);
}

.wedding-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 104px;
    padding: 22px 25px;
    border-right: 1px solid var(--divider-color);
}

.wedding-trust-item:last-child {
    border-right: 0;
}

.wedding-trust-item i {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent-color);
    border-radius: 50%;
}

.wedding-trust-item strong,
.wedding-trust-item span {
    display: block;
}

.wedding-trust-item strong {
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 20px;
}

.wedding-trust-item span {
    color: var(--text-color);
    font-size: 14px;
}

.awards-showcase {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 16%, rgba(201, 0, 114, .28), transparent 27%),
        linear-gradient(135deg, #202a32 0%, #2d3942 58%, #202a32 100%);
}

.awards-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, #000, transparent 68%);
}

.awards-showcase .container {
    position: relative;
    z-index: 1;
}

.awards-showcase .eyebrow {
    color: var(--accent-bright);
}

.awards-showcase .lead-title {
    max-width: 760px;
    color: #fff;
}

.awards-photo-card {
    position: relative;
    max-width: 530px;
    margin: 0 auto;
    padding: 12px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    box-shadow: 0 30px 85px rgba(0,0,0,.32);
    transform: rotate(-1deg);
}

.awards-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 21px;
}

.awards-photo-card figcaption {
    position: absolute;
    right: 32px;
    bottom: 30px;
    left: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    color: #fff;
    background: rgba(24,32,39,.88);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    font-weight: 700;
    backdrop-filter: blur(9px);
}

.awards-photo-card figcaption i {
    color: var(--accent-bright);
    font-size: 22px;
}

.awards-intro {
    max-width: 720px;
    margin: 22px 0 30px;
    color: rgba(255,255,255,.78);
    font-size: 19px;
}

.award-years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.award-year-card {
    position: relative;
    min-height: 150px;
    padding: 23px 24px;
    overflow: hidden;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
}

.award-year-card::after {
    content: "\f091";
    position: absolute;
    right: 17px;
    bottom: -11px;
    color: rgba(255,255,255,.055);
    font-family: "Font Awesome 6 Free";
    font-size: 76px;
    font-weight: 900;
}

.award-year-current {
    background: linear-gradient(135deg, rgba(201,0,114,.32), rgba(255,79,176,.09));
    border-color: rgba(255,79,176,.42);
}

.award-year,
.award-year-card strong,
.award-year-card small {
    position: relative;
    z-index: 1;
    display: block;
}

.award-year {
    color: var(--accent-bright);
    font-family: var(--accent-font);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.award-year-card strong {
    margin-top: 10px;
    color: #fff;
    font-size: 18px;
}

.award-year-card small {
    margin-top: 3px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.awards-actions {
    margin-top: 30px;
}

.wedding-intro-copy {
    max-width: 570px;
}

.wedding-collage {
    position: relative;
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr .72fr;
    grid-template-rows: 1fr .78fr;
    gap: 18px;
}

.wedding-collage .collage-main {
    grid-row: 1 / 3;
}

.wedding-collage .collage-top img {
    object-position: center;
}

.wedding-collage-note {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 28px;
    max-width: 250px;
    padding: 18px 20px;
    color: #fff;
    background: var(--accent-color);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(236,0,139,.28);
    font-family: var(--accent-font);
    font-weight: 800;
}

.visual-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.visual-service-card {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 30px;
    color: #fff;
    background: var(--arena-deep);
    border-radius: 26px;
    box-shadow: 0 24px 55px rgba(47,57,66,.16);
}

.visual-service-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.visual-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35,44,52,.03) 24%, rgba(35,44,52,.92) 88%);
}

.visual-service-card:hover img {
    transform: scale(1.045);
}

.visual-service-card-content {
    position: relative;
    z-index: 2;
}

.visual-service-card-number {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 17px;
    background: var(--accent-color);
    border-radius: 50%;
    font-weight: 800;
}

.visual-service-card h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 30px;
}

.visual-service-card p {
    margin: 0;
    color: rgba(255,255,255,.82);
}

.wedding-plan {
    overflow: hidden;
    color: #fff;
    background: var(--arena-deep);
}

.wedding-plan .lead-title,
.wedding-plan h2,
.wedding-plan h3 {
    color: #fff;
}

.wedding-plan p {
    color: rgba(255,255,255,.78);
}

.wedding-plan .check-list li::before {
    color: #ff58b9;
}

.wedding-plan .brand-accent {
    color: var(--accent-bright);
}

.wedding-plan-visual {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    border-radius: 28px;
}

.wedding-plan-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wedding-plan-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(35,44,52,.72));
}

.wedding-mosaic {
    display: grid;
    grid-template-columns: 1.35fr .65fr .85fr;
    grid-auto-rows: 410px;
    gap: 18px;
}

.wedding-mosaic .mosaic-tall {
    grid-row: span 2;
}

.wedding-mosaic .mosaic-wide {
    grid-column: span 2;
}

.service-aside-photo {
    position: relative;
    min-height: 320px;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 22px 50px rgba(47,57,66,.14);
}

.service-aside-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-aside-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(35,44,52,.82));
}

.service-aside-photo span {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    color: #fff;
    font-family: var(--accent-font);
    font-size: 22px;
    font-weight: 800;
}

.contact-image-banner {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 42px;
    color: #fff;
    border-radius: 26px;
    box-shadow: 0 24px 55px rgba(47,57,66,.14);
}

.contact-image-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-image-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(35,44,52,.9), rgba(35,44,52,.08) 78%);
}

.contact-image-banner-content {
    position: relative;
    z-index: 2;
    max-width: 570px;
}

.contact-image-banner h2 {
    margin-bottom: 13px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.contact-image-banner p {
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: 18px;
}

.value-grid,
.service-grid,
.step-grid,
.gallery-grid,
.contact-grid {
    display: grid;
    gap: 28px;
}

.service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.value-grid,
.step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.value-card,
.step-card,
.contact-card {
    position: relative;
    height: 100%;
    padding: 34px;
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover,
.value-card:hover,
.step-card:hover,
.contact-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236,0,139,.35);
    box-shadow: 0 24px 55px rgba(47,57,66,.1);
}

.service-card-number,
.step-number {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    color: #fff;
    background: var(--accent-color);
    border-radius: 50%;
    font-family: var(--accent-font);
    font-weight: 800;
}

.service-card h2,
.service-card h3,
.value-card h3,
.step-card h3,
.contact-card h3 {
    margin-bottom: 14px;
    font-size: 25px;
}

.service-card p,
.value-card p,
.step-card p,
.contact-card p {
    margin-bottom: 22px;
}

.service-card .readmore-btn {
    margin-top: auto;
}

.service-card {
    display: flex;
    flex-direction: column;
}

.service-card-featured {
    color: #fff;
    background: var(--arena-deep);
    border-color: var(--arena-deep);
}

.service-card-featured h2,
.service-card-featured h3,
.service-card-featured p,
.service-card-featured .readmore-btn {
    color: #fff;
}

.service-card-featured .readmore-btn::before {
    filter: brightness(0) invert(1);
}

.icon-badge {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 26px;
    color: #fff;
    background: var(--accent-color);
    border-radius: 16px;
    font-size: 22px;
}

.check-list,
.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 13px;
    line-height: 1.45;
}

.check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 900;
}

.cta-band {
    position: relative;
    overflow: hidden;
    padding: 78px 0;
    color: #fff;
    background:
        radial-gradient(circle at 88% 25%, rgba(201,0,114,.5), transparent 25%),
        var(--arena-deep);
}

.home-page .cta-band {
    background:
        linear-gradient(90deg, rgba(25, 34, 41, .95) 0%, rgba(25, 34, 41, .86) 47%, rgba(25, 34, 41, .58) 74%, rgba(25, 34, 41, .42) 100%),
        linear-gradient(0deg, rgba(20, 27, 33, .58), rgba(20, 27, 33, .04) 62%),
        url('../images/stock/arena-stock-dessert-spread.webp') center 54% / cover no-repeat;
    background-color: var(--arena-deep);
}

.cta-band .container {
    position: relative;
    z-index: 1;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 3.6rem);
    line-height: 1.05;
}

.cta-band p {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.82);
}

.footer-copyright-text a {
    color: rgba(255, 255, 255, .82);
    text-decoration-color: rgba(255, 79, 176, .55);
    text-underline-offset: 3px;
}

.footer-copyright-text a:hover,
.footer-copyright-text a:focus {
    color: var(--accent-bright);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
    padding-right: 58px;
}

.gallery-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 115px;
}

.gallery-item {
    position: relative;
    grid-column: span 4;
    grid-row: span 3;
    overflow: hidden;
    border-radius: 22px;
    background: var(--arena-deep);
}

.gallery-item.wide {
    grid-column: span 8;
}

.gallery-item.tall {
    grid-row: span 5;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gallery-item:hover img {
    transform: scale(1.045);
}

.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 50px 22px 20px;
    color: #fff;
    background: linear-gradient(transparent, rgba(47,57,66,.9));
    font-weight: 700;
}

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.filter-btn {
    padding: 10px 18px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    font-weight: 700;
}

.filter-btn.active,
.filter-btn:hover {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.gallery-item.is-hidden {
    display: none;
}

.social-presence {
    overflow: hidden;
}

.social-presence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.social-presence-card {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 38px;
    color: #fff;
    background: var(--arena-deep);
    border-radius: 26px;
    box-shadow: 0 26px 60px rgba(47,57,66,.15);
}

.social-presence-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(47,57,66,.08) 15%, rgba(47,57,66,.92) 88%);
}

.social-presence-card > img {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-presence-card-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.social-presence-card .platform-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-weight: 800;
}

.social-presence-card h3 {
    margin-bottom: 12px;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.social-presence-card p {
    margin-bottom: 22px;
    color: rgba(255,255,255,.85);
}

.social-presence-card .btn-outline-arena {
    min-height: 48px;
    padding: 10px 19px;
}

.form-shell {
    padding: 45px;
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: 26px;
    box-shadow: 0 28px 70px rgba(47,57,66,.08);
}

.form-shell .form-control,
.form-shell .form-select {
    min-height: 58px;
    padding: 14px 18px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgba(68,81,93,.2);
    border-radius: 12px;
}

.form-shell textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

.form-shell .form-control:focus,
.form-shell .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(236,0,139,.08);
}

.form-label {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 700;
}

.required::after {
    content: " *";
    color: var(--accent-color);
}

.form-note {
    color: #7a838a;
    font-size: 15px;
    line-height: 1.45;
}

.form-status {
    display: none;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    line-height: 1.45;
}

.form-status.success {
    display: block;
    color: #265b2f;
    background: #e7f6e8;
}

.form-status.error {
    display: block;
    color: #842029;
    background: #f8d7da;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

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

.contact-card a {
    color: var(--primary-color);
    font-weight: 700;
}

.contact-card a:hover {
    color: var(--accent-color);
}

.map-frame {
    width: 100%;
    height: 500px;
    border: 0;
    border-radius: 24px;
}

.faq-wrap .accordion-item {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--divider-color);
    border-radius: 14px;
}

.faq-wrap .accordion-button {
    padding: 22px 24px;
    color: var(--primary-color);
    background: #fff;
    font-family: var(--accent-font);
    font-size: 19px;
    font-weight: 700;
    box-shadow: none;
}

.faq-wrap .accordion-button:not(.collapsed) {
    color: var(--accent-color);
}

.faq-wrap .accordion-body {
    padding: 0 24px 22px;
    line-height: 1.6;
}

.wedding-badge {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, #ec008b, #bf006f);
    border-radius: 20px;
}

.wedding-badge i {
    font-size: 34px;
}

.wedding-badge strong,
.wedding-badge span {
    display: block;
}

.wedding-badge a {
    color: #fff;
}

.service-aside {
    position: sticky;
    top: 130px;
}

.service-aside-card {
    padding: 32px;
    margin-bottom: 24px;
    color: #fff;
    background: var(--arena-deep);
    border-radius: 22px;
}

.service-aside-card h2,
.service-aside-card h3 {
    margin-bottom: 16px;
    color: #fff;
}

.service-aside-card a:not(.btn-default) {
    color: #fff;
}

.service-aside-card .plain-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.service-aside-card .plain-list li:last-child {
    border-bottom: 0;
}

.seo-copy h2,
.seo-copy h3 {
    margin: 38px 0 16px;
}

.seo-copy h2:first-child,
.seo-copy h3:first-child {
    margin-top: 0;
}

.seo-copy p {
    max-width: 850px;
}

.notice-box {
    padding: 22px 24px;
    color: #5c4654;
    background: var(--arena-pink-soft);
    border-left: 4px solid var(--accent-color);
    border-radius: 12px;
}

.main-footer {
    padding-top: 85px;
}

.footer-links-box {
    gap: 34px;
}

.footer-links a[aria-current="page"] {
    color: var(--accent-color);
}

.footer-contact-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.footer-contact-list i {
    width: 18px;
    margin-top: 4px;
    color: var(--accent-color);
}

.footer-social-links ul li a:hover {
    background: var(--accent-color);
}

.footer-network-labels {
    margin-top: 16px;
    color: rgba(255,255,255,.5);
}

.footer-network-labels a {
    color: rgba(255,255,255,.86);
    font-weight: 700;
}

.footer-network-labels a:hover,
.footer-network-labels a:focus {
    color: var(--accent-color);
}

.legal-copy {
    max-width: 920px;
}

.legal-copy h2 {
    margin: 40px 0 16px;
    font-size: 30px;
}

.legal-copy a {
    color: var(--accent-color);
}

.privacy-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.privacy-consent input {
    margin-top: 5px;
}

@media (min-width: 1600px) {
    .hero.arena-hero .container,
    .page-header.arena-page-header .container,
    .cta-band .container {
        max-width: 1840px;
    }

    .hero.arena-hero .section-title h1 {
        max-width: 860px;
    }
}

@media (min-width: 992px) {
    body[data-page="mariage"] .page-header.arena-page-header {
        min-height: 575px;
        padding: 175px 0 72px;
    }

    body[data-page="mariage"] .page-header-box h1 {
        max-width: 850px;
        font-size: clamp(3.1rem, 4.7vw, 4.75rem);
    }
}

@media (max-width: 1199px) {
    .cb-cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html,
    body,
    body * {
        cursor: auto !important;
    }

    a,
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"] {
        cursor: pointer !important;
    }

    input:not([type="button"]):not([type="submit"]),
    textarea {
        cursor: text !important;
    }

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

    .wedding-trust-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wedding-trust-item:nth-child(2) {
        border-right: 0;
    }

    .wedding-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--divider-color);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .page-header-box {
        max-width: 690px;
    }

    .page-header-box h1 {
        max-width: 690px;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }
}

@media (max-width: 991px) {
    body {
        padding-bottom: 58px;
    }

    .main-header {
        background: var(--arena-deep);
    }

    .navbar-brand img {
        max-width: 205px;
    }

    .hero.arena-hero {
        min-height: auto;
        background-position: 55% 58%;
        padding: 165px 0 90px;
    }

    .hero.arena-hero::before {
        background: linear-gradient(90deg, rgba(25,34,41,.88), rgba(25,34,41,.62));
    }

    .page-header.arena-page-header {
        min-height: 610px;
        padding: 175px 0 78px;
        background-image:
            linear-gradient(90deg, rgba(24,32,39,.89), rgba(24,32,39,.56)),
            linear-gradient(0deg, rgba(20,28,34,.62), rgba(20,28,34,.06) 58%),
            var(--page-hero-image);
        background-position: center, center, center;
        background-size: cover, cover, cover;
    }

    .home-page .cta-band {
        background-position: center, center, center;
        background-size: cover, cover, cover;
    }

    .awards-photo-card {
        margin-bottom: 20px;
        transform: none;
    }

    .section-pad {
        padding: 85px 0;
    }

    .value-grid,
    .step-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .media-card {
        min-height: 440px;
        margin-bottom: 42px;
    }

    .cta-actions {
        justify-content: flex-start;
        margin-top: 28px;
        padding-right: 0;
    }

    .service-aside {
        position: static;
        margin-top: 40px;
    }

    .visual-service-grid {
        grid-template-columns: 1fr;
    }

    .visual-service-card {
        min-height: 440px;
    }

    .wedding-collage {
        min-height: 590px;
        margin-top: 45px;
    }

    .wedding-plan-visual {
        min-height: 520px;
        margin-bottom: 45px;
    }

    .wedding-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 330px;
    }

    .wedding-mosaic .mosaic-tall {
        grid-row: auto;
    }

    .wedding-mosaic .mosaic-wide {
        grid-column: span 2;
    }

    .social-quickbar {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        border-radius: 0;
        box-shadow: 0 -10px 30px rgba(32,42,50,.18);
        transform: none;
    }

    .social-quickbar a {
        flex: 1;
        justify-content: center;
        width: auto;
        min-width: 0;
        padding: 11px 8px;
    }

    .social-quickbar a:hover,
    .social-quickbar a:focus {
        width: auto;
    }

    .social-quickbar a > span:not(.visually-hidden) {
        max-width: 105px;
        opacity: 1;
    }

    .social-presence-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 17px;
    }

    .navbar-brand img {
        max-width: 175px;
    }

    .hero.arena-hero .section-title h1 {
        font-size: clamp(2.8rem, 14vw, 4.2rem);
    }

    .page-header.arena-page-header {
        min-height: 570px;
        padding: 145px 0 58px;
    }

    .page-header-box h1 {
        font-size: clamp(2.55rem, 12vw, 3.8rem);
    }

    .hero.arena-hero .section-title p,
    .page-intro {
        font-size: 18px;
    }

    .hero-proof {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-photo-duo {
        grid-template-columns: 1fr;
        grid-auto-rows: 310px;
    }

    .wedding-trust {
        margin-top: -20px;
    }

    .home-trust {
        margin-top: -18px;
    }

    .wedding-trust-item {
        min-height: 92px;
        padding: 16px;
    }

    .wedding-trust-item i {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .wedding-trust-item strong {
        font-size: 16px;
    }

    .wedding-trust-item span {
        font-size: 12px;
    }

    .awards-photo-card {
        padding: 8px;
        border-radius: 22px;
    }

    .awards-photo-card img {
        border-radius: 16px;
    }

    .awards-photo-card figcaption {
        right: 19px;
        bottom: 18px;
        left: 19px;
        padding: 12px 14px;
        font-size: 14px;
    }

    .award-years {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .award-year-card {
        min-height: 138px;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .award-year {
        font-size: 31px;
    }

    .wedding-collage {
        min-height: 510px;
        grid-template-columns: 1.15fr .85fr;
        gap: 10px;
    }

    .wedding-collage figure,
    .wedding-mosaic figure,
    .service-photo-duo figure {
        border-radius: 17px;
    }

    .wedding-collage-note {
        right: 12px;
        bottom: 12px;
        max-width: 205px;
        padding: 13px 15px;
        font-size: 14px;
    }

    .visual-service-card {
        min-height: 410px;
        padding: 24px;
    }

    .wedding-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }

    .wedding-mosaic .mosaic-wide {
        grid-column: auto;
    }

    .contact-image-banner {
        min-height: 360px;
        padding: 28px 24px;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 320px;
    }

    .gallery-item,
    .gallery-item.wide,
    .gallery-item.tall {
        grid-column: auto;
        grid-row: auto;
    }

    .form-shell {
        padding: 28px 20px;
    }

    .cta-band {
        padding: 60px 0;
    }

    .section-pad-sm {
        padding: 60px 0;
    }

    .social-presence-card {
        min-height: 350px;
        padding: 28px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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