/* =========================================================

   AYDEN BARBERSHOP

   GLOBAL STYLE

========================================================= */



:root {

    --black: #070707;

    --black-soft: #0f0f0f;

    --dark-grey: #181818;

    --grey: #7e7e7e;

    --grey-light: #b6b6b6;

    --line: #2c2c2c;

    --white: #f5f5f3;

    --pure-white: #ffffff;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    background: var(--black);

    color: var(--white);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

select,

textarea {

    font: inherit;

}



img {

    display: block;

    max-width: 100%;

}



/* =========================================================

   NAVBAR

========================================================= */



.navbar {

    width: 100%;

    height: 96px;



    padding: 0 5%;



    display: flex;

    align-items: center;



    position: sticky;

    top: 0;

    z-index: 1000;



    background: rgba(7, 7, 7, 0.97);

    border-bottom: 1px solid var(--line);



    transition: height 0.3s ease;

}



.navbar.scrolled {

    height: 76px;

}



.brand {

    width: 220px;

    flex-shrink: 0;

}



.brand img {

    width: 175px;

    height: auto;

}



.nav-links {

    flex: 1;



    display: flex;

    justify-content: center;

    align-items: center;



    gap: clamp(24px, 3vw, 48px);

}



.nav-links a {

    position: relative;



    padding: 10px 0;



    color: #999;



    font-family: "Barlow Condensed", sans-serif;

    font-size: 13px;

    font-weight: 700;



    letter-spacing: 1.5px;



    transition: 0.25s ease;

}



.nav-links a::after {

    content: "";



    position: absolute;



    left: 0;

    bottom: 3px;



    width: 0;

    height: 2px;



    background: white;



    transition: 0.25s ease;

}



.nav-links a:hover,

.nav-links a.active {

    color: white;

}



.nav-links a:hover::after,

.nav-links a.active::after {

    width: 100%;

}



.nav-book {

    width: 175px;

    height: 54px;



    flex-shrink: 0;



    margin-left: 35px;



    padding: 0 19px;



    display: flex;

    justify-content: space-between;

    align-items: center;



    background: white;

    color: black;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 14px;

    font-weight: 800;



    letter-spacing: 1px;



    transition: 0.3s ease;

}



.nav-book:hover {

    background: #cfcfcf;

    transform: translateY(-2px);

}



.nav-book.active-book {

    background: #cfcfcf;

}



.book-arrow {

    font-size: 18px;

}



/* =========================================================

   HOME HERO

========================================================= */



.home-hero {

    min-height: calc(100vh - 96px);



    position: relative;



    padding: 100px 6% 70px;



    display: flex;

    align-items: flex-end;



    overflow: hidden;



    background-image:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.92) 0%,

            rgba(0, 0, 0, 0.68) 40%,

            rgba(0, 0, 0, 0.18) 75%

        ),

        linear-gradient(

            0deg,

            rgba(0, 0, 0, 0.8),

            transparent 55%

        ),

        url("upload/aydensignboard.jpg");



    background-position: 65% 45%;

    background-position: center;

}



.home-hero-content {

    position: relative;

    z-index: 2;



    max-width: 950px;

}



.hero-tag {

    margin-bottom: 28px;



    display: flex;

    align-items: center;



    gap: 12px;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 11px;

    font-weight: 600;



    letter-spacing: 3px;

}



.hero-tag::before {

    content: "";



    width: 35px;

    height: 2px;



    background: white;

}



.home-hero h1 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(80px, 11vw, 165px);



    font-weight: 800;



    line-height: 0.78;



    letter-spacing: -5px;

}



.outline-text {

    color: transparent;

    -webkit-text-stroke: 2px white;



    font-style: italic;

}



.home-hero-description {

    max-width: 430px;



    margin-top: 40px;



    color: #bbb;



    font-size: 14px;

    line-height: 1.8;

}



.hero-buttons {

    margin-top: 35px;



    display: flex;

    gap: 12px;

}



.button {

    min-height: 52px;



    padding: 0 23px;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    gap: 28px;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 13px;

    font-weight: 700;



    letter-spacing: 1.2px;



    transition: 0.3s ease;

}



.button-white {

    background: white;

    color: black;

}



.button-white:hover {

    background: #ccc;

    transform: translateY(-3px);

}



.button-outline {

    border: 1px solid #666;

}



.button-outline:hover {

    background: white;

    color: black;



    transform: translateY(-3px);

}



/* =========================================================

   GENERAL TYPOGRAPHY

========================================================= */



.section-label {

    margin-bottom: 30px;



    color: #777;



    font-size: 10px;

    font-weight: 600;



    letter-spacing: 3px;

}



.big-heading {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(65px, 9vw, 125px);



    font-weight: 800;



    line-height: 0.8;



    letter-spacing: -4px;

}



.big-heading .grey {

    color: #777;

    font-style: italic;

}



/* =========================================================

   HOME ABOUT

========================================================= */



.home-about {

    padding: 130px 6%;



    background: var(--white);

    color: black;

}



.home-about-grid {

    display: grid;



    grid-template-columns: 1.4fr 0.6fr;



    gap: 90px;



    align-items: end;

}



.home-about-copy {

    color: #555;



    font-size: 14px;



    line-height: 1.9;

}



.text-link {

    display: flex;

    justify-content: space-between;



    margin-top: 30px;



    padding: 15px 0;



    border-top: 1px solid #aaa;

    border-bottom: 1px solid #aaa;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 12px;

    font-weight: 700;



    letter-spacing: 1.5px;



    transition: 0.3s ease;

}



.text-link:hover {

    padding-left: 10px;

    padding-right: 10px;



    background: black;

    color: white;

}



/* =========================================================

   HOME INTERIOR

========================================================= */



.home-feature {

    min-height: 700px;



    display: grid;

    grid-template-columns: 1.15fr 0.85fr;



    background: #101010;

}



.feature-photo {

    min-height: 700px;



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 40px;



    overflow: hidden;



    background:

        radial-gradient(

            circle at center,

            #1b1b1b 0%,

            #080808 65%

        );

}



.video-frame {

    height: 630px;



    aspect-ratio: 9 / 16;



    overflow: hidden;



    background: black;



    border: 1px solid #292929;



    box-shadow:

        0 25px 60px rgba(0, 0, 0, 0.55);

}



.video-frame video {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: contain;



    background: black;

}



.feature-copy {

    padding: 90px 9%;



    display: flex;

    flex-direction: column;

    justify-content: center;



    border-left: 1px solid var(--line);

}



.feature-copy p {

    max-width: 380px;



    margin-top: 35px;



    color: #999;



    font-size: 14px;



    line-height: 1.8;

}



/* =========================================================

   BARBER TEASER HOME

========================================================= */



.home-barbers {

    padding: 120px 6%;

}



.home-barber-grid {

    margin-top: 65px;



    display: grid;

    grid-template-columns: repeat(2, 1fr);



    gap: 25px;

}



.home-barber-image {

    aspect-ratio: 4 / 5;



    overflow: hidden;

}



.home-barber-image img {

    width: 100%;

    height: 100%;



    object-fit: cover;



    filter: grayscale(25%);



    transition: 0.6s ease;

}



.home-barber-card:hover img {

    transform: scale(1.04);

    filter: grayscale(0%);

}



.home-barber-meta {

    padding: 18px 0;



    display: flex;

    justify-content: space-between;



    border-bottom: 1px solid var(--line);

}



.home-barber-meta h3 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 27px;

}



.home-barber-meta span {

    color: #777;



    font-size: 9px;

    letter-spacing: 2px;

}



/* =========================================================

   TICKER

========================================================= */



.ticker {

    overflow: hidden;



    padding: 20px 0;



    background: white;

    color: black;

}



.ticker-track {

    width: max-content;



    display: flex;

    align-items: center;



    gap: 30px;



    animation: tickerMove 20s linear infinite;

}



.ticker-track span {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 23px;

    font-weight: 800;



    font-style: italic;

}



.ticker-track b {

    font-size: 10px;

}



@keyframes tickerMove {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }

}



/* =========================================================

   PAGE HERO

========================================================= */



.page-hero {

    min-height: 620px;



    padding: 110px 6% 90px;



    display: flex;

    flex-direction: column;

    justify-content: center;



    border-bottom: 1px solid var(--line);

}



.page-hero h1 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(90px, 13vw, 185px);



    font-weight: 800;



    line-height: 0.76;



    letter-spacing: -6px;

}



.page-description {

    max-width: 370px;



    margin-top: 45px;



    color: #777;



    font-size: 14px;



    line-height: 1.8;

}



/* =========================================================

   SERVICES

========================================================= */



.services-list {

    padding: 30px 6% 110px;

}



.service-item {

    min-height: 175px;



    display: grid;



    grid-template-columns: 80px 1fr 60px;



    align-items: center;



    border-bottom: 1px solid #333;



    transition: 0.35s ease;

}



.service-item:hover {

    padding-left: 25px;



    background: white;

    color: black;

}



.service-number {

    color: #666;



    font-size: 10px;

}



.service-item h2 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(42px, 6vw, 75px);



    line-height: 1;

}



.service-item p {

    margin-top: 8px;



    color: #777;



    font-size: 12px;

}



.service-arrow {

    font-size: 22px;

}



/* =========================================================

   GALLERY

========================================================= */



.gallery-section {

    padding: 110px 6% 130px;

}



.gallery-top {

    margin-bottom: 65px;



    display: flex;

    justify-content: space-between;



    align-items: flex-end;

}



.gallery-top h2 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 70px;

}



.gallery-count {

    color: #666;



    font-size: 12px;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);



    gap: 55px 25px;

}



.gallery-card {

    cursor: pointer;

}



.gallery-image {

    aspect-ratio: 4 / 5;



    position: relative;



    overflow: hidden;



    display: flex;

    align-items: center;

    justify-content: center;



    background:

        radial-gradient(circle, #262626 0%, #111 65%);



    border: 1px solid #2c2c2c;

}



.gallery-image span {

    color: #555;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 100px;

    font-weight: 800;



    font-style: italic;



    transition: 0.5s ease;

}



.gallery-image img {

    width: 100%;

    height: 100%;



    object-fit: cover;



    transition: transform 0.5s ease;

}



.gallery-card:hover .gallery-image span {

    color: #999;



    transform: scale(1.08);

}



.gallery-card:hover img {

    transform: scale(1.05);

}



.gallery-info {

    padding: 17px 0;



    display: flex;

    justify-content: space-between;



    border-bottom: 1px solid var(--line);

}



.gallery-info h3 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 19px;

}



.gallery-info span {

    color: #666;



    font-size: 9px;

}



/* =========================================================

   BARBERS PAGE

========================================================= */



.team-section {

    padding: 110px 6% 130px;

}



.barber-grid {

    margin-top: 70px;



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 35px;

}



.barber-card {

    overflow: hidden;

}



.barber-photo {

    aspect-ratio: 4 / 5;



    position: relative;



    overflow: hidden;



    background: #161616;

}



.barber-photo img {

    position: absolute;



    inset: 0;



    width: 100%;

    height: 100%;



    object-fit: cover;



    transition:

        opacity 0.6s ease,

        transform 0.8s ease;

}



.barber-photo .barber-alt {

    opacity: 0;

}



.barber-card:hover .barber-main {

    opacity: 0;

}



.barber-card:hover .barber-alt {

    opacity: 1;



    transform: scale(1.04);

}



.single-photo:hover .barber-main {

    opacity: 1;



    transform: scale(1.04);

}



.barber-info {

    padding: 20px 0;



    display: flex;

    justify-content: space-between;

    align-items: flex-end;



    border-bottom: 1px solid var(--line);

}



.barber-info h3 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 36px;

}



.barber-info span {

    color: #777;



    font-size: 10px;



    letter-spacing: 2px;

}



/* =========================================================

   BOOKING PAGE

========================================================= */



.booking-layout {

    display: grid;



    grid-template-columns: 0.72fr 1.28fr;



    border-bottom: 1px solid var(--line);

}



.booking-sidebar {

    padding: 90px 8%;



    border-right: 1px solid var(--line);

}



.booking-sidebar h2 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(55px, 6vw, 90px);



    line-height: 0.82;



    letter-spacing: -3px;

}



.booking-sidebar-info {

    margin-top: 65px;



    display: flex;

    flex-direction: column;



    gap: 35px;

}



.booking-sidebar-info span {

    color: #666;



    font-size: 9px;



    letter-spacing: 2px;

}



.booking-sidebar-info p {

    margin-top: 8px;



    color: #aaa;



    font-size: 11px;



    line-height: 1.8;

}



.booking-form {

    padding: 90px 8%;

}



.form-section {

    margin-bottom: 65px;

}



.form-section-title {

    margin-bottom: 35px;



    padding-bottom: 15px;



    border-bottom: 1px solid #333;



    color: #777;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 11px;

    font-weight: 600;



    letter-spacing: 2px;

}



.form-group {

    margin-bottom: 32px;

}



.form-row {

    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 25px;

}



label {

    display: block;



    margin-bottom: 10px;



    color: #777;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 10px;



    letter-spacing: 2px;

}



input,

select,

textarea {

    width: 100%;



    padding: 15px 0;



    border: none;

    border-bottom: 1px solid #444;



    outline: none;



    background: transparent;

    color: white;



    font-size: 14px;



    transition: border-color 0.3s ease;

}



input:focus,

select:focus,

textarea:focus {

    border-color: white;

}



select option {

    background: #111;

    color: white;

}



textarea {

    resize: vertical;

}



.payment-amount {

    margin-bottom: 25px;



    padding: 25px;



    display: flex;



    justify-content: space-between;

    align-items: center;



    background: #111111;



    border: 1px solid #333333;

}





.payment-amount span {

    color: #777777;



    font-size: 10px;



    font-weight: 600;



    letter-spacing: 2px;

}





.payment-amount strong {

    color: #ffffff;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 34px;



    font-weight: 700;

}



.payment-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}



.payment-card {

    position: relative;



    min-height: 120px;



    padding: 20px;



    border: 1px solid #333;



    cursor: pointer;



    transition: 0.3s ease;

}



.payment-card:hover {

    border-color: #777;



    transform: translateY(-3px);

}



.payment-card input {

    width: auto;



    position: absolute;



    top: 20px;

    right: 20px;

}



.payment-card strong {

    display: block;



    margin-top: 35px;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 18px;

}



.payment-card span {

    display: block;



    margin-top: 5px;



    color: #777;



    font-size: 10px;



    line-height: 1.5;

}



.payment-extra {

    display: none;



    margin-top: 20px;



    padding: 25px;



    background: #141414;



    border: 1px solid #333;

}



.payment-extra.active {

    display: block;



    animation: fadeUp 0.4s ease;

}



.qr-placeholder {

    width: 190px;

    height: 190px;



    margin-top: 20px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px dashed #666;



    color: #777;



    text-align: center;



    font-size: 10px;

    line-height: 1.5;

}



.qr-placeholder img {

    width: 100%;

    height: 100%;



    object-fit: contain;

}



.booking-summary {

    margin-top: 35px;



    padding: 25px;



    background: #111;



    border: 1px solid #333;

}



.booking-summary h3 {

    margin-bottom: 18px;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 22px;

}



.summary-row {

    padding: 9px 0;



    display: flex;

    justify-content: space-between;



    gap: 20px;



    border-bottom: 1px solid #242424;



    color: #aaa;



    font-size: 11px;

}



.summary-row strong {

    color: white;



    text-align: right;

}



.submit-button {

    width: 100%;



    min-height: 58px;



    padding: 0 23px;



    border: none;



    display: flex;

    align-items: center;

    justify-content: space-between;



    background: white;

    color: black;



    cursor: pointer;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 14px;

    font-weight: 800;



    letter-spacing: 1.5px;



    transition: 0.3s ease;

}



.submit-button:hover {

    background: #ccc;

}



.form-message {

    margin-top: 20px;



    font-size: 12px;

}



/* =========================================================

   CONTACT

========================================================= */



.contact-grid {

    display: grid;



    grid-template-columns: repeat(2, 1fr);



    border-bottom: 1px solid var(--line);

}



.contact-box {

    min-height: 460px;



    padding: 75px 8%;

}



.contact-box:first-child {

    border-right: 1px solid var(--line);

}



.contact-box h2 {

    margin-top: 50px;



    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(45px, 5vw, 72px);



    line-height: 0.9;

}



.contact-link {

    display: inline-block;



    margin-top: 45px;



    padding-bottom: 7px;



    border-bottom: 1px solid #777;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 13px;

    font-weight: 700;

}



.contact-list {

    margin-top: 65px;

}



.contact-list > * {

    display: block;



    padding: 18px 0;



    border-bottom: 1px solid #333;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 24px;

}



.contact-photo-banner {

    min-height: 650px;



    position: relative;



    overflow: hidden;

}



.contact-photo-banner img {

    width: 100%;

    height: 650px;



    object-fit: cover;



    /* naikkan framing gambar */

    object-position: center 15%;



    filter: brightness(0.65);



    transition: transform 0.8s ease;

}



.contact-photo-banner:hover img {

    transform: scale(1.03);

}



.contact-photo-content {

    position: absolute;



    left: 6%;

    bottom: 65px;



    z-index: 2;

}



.contact-photo-content h2 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(60px, 8vw, 110px);



    line-height: 0.82;

}



.hours-section {

    padding: 110px 6%;



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 90px;

}



.hours-list {

    align-self: end;

}



.hours-row {

    padding: 22px 0;



    display: flex;

    justify-content: space-between;



    border-bottom: 1px solid #333;

}



.hours-row span {

    color: #777;



    font-size: 10px;



    letter-spacing: 1px;

}



.hours-row strong {

    font-family: "Barlow Condensed", sans-serif;



    font-size: 19px;

}



/* =========================================================

   CTA

========================================================= */



.cta {

    padding: 120px 6%;



    background: white;

    color: black;

}



.cta h2 {

    font-family: "Barlow Condensed", sans-serif;



    font-size: clamp(70px, 10vw, 145px);



    line-height: 0.8;



    letter-spacing: -5px;

}



.cta h2 span {

    color: #999;



    font-style: italic;

}



.cta .button {

    margin-top: 45px;



    border: 1px solid black;

}



.cta .button:hover {

    background: black;

    color: white;

}



/* =========================================================

   FOOTER

========================================================= */



footer {

    padding: 45px 6%;



    display: grid;

    grid-template-columns: 1fr 1fr 1fr;



    align-items: center;



    border-top: 1px solid var(--line);



    color: #777;



    font-size: 10px;

    line-height: 1.7;

}





/* LOGO FOOTER */



.footer-logo {

    color: white;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 32px;

    font-weight: 800;



    font-style: italic;



    line-height: 1;

}





.footer-logo span {

    display: block;



    margin-top: 4px;



    color: #777;



    font-size: 9px;

    font-style: normal;



    letter-spacing: 4px;



    line-height: 1;

}





/* LOCATION TENGAH */



footer > div:nth-child(2) {

    text-align: center;

}





/* COPYRIGHT KANAN */



footer > div:last-child {

    text-align: right;

}



/* =========================================================

   ANIMATIONS

========================================================= */



@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(18px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =========================================

   PAGE TITLE ANIMATION

========================================= */



.page-title-animate {

    opacity: 0;

    transform: translateY(45px);



    animation: pageTitleUp 0.8s ease forwards;

}



.page-title-delay {

    opacity: 0;

    transform: translateY(45px);



    animation: pageTitleUp 0.8s 0.18s ease forwards;

}



.page-desc-animate {

    opacity: 0;

    transform: translateY(25px);



    animation: pageTitleUp 0.7s 0.35s ease forwards;

}



.page-label-animate {

    opacity: 0;

    transform: translateY(15px);



    animation: pageTitleUp 0.6s 0.05s ease forwards;

}





@keyframes pageTitleUp {



    from {

        opacity: 0;

        transform: translateY(45px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }



}



/*

Content remains visible if JS doesn't load.

Only hide reveal content when JS is active.

*/



.js .reveal {

    opacity: 0;



    transform: translateY(35px);



    transition:

        opacity 0.75s ease,

        transform 0.75s ease;

}



.js .reveal.show {

    opacity: 1;



    transform: translateY(0);

}



.hero-animate {

    animation: fadeUp 0.8s ease both;

}



.hero-animate-delay {

    animation: fadeUp 0.8s 0.15s ease both;

}



/* =========================================================

   RESPONSIVE TABLET

========================================================= */



@media (max-width: 1000px) {



    .brand {

        width: 170px;

    }



    .brand img {

        width: 145px;

    }



    .nav-links {

        gap: 20px;

    }



    .nav-book {

        width: 150px;



        margin-left: 20px;

    }



    .home-about-grid,

    .hours-section {

        grid-template-columns: 1fr;



        gap: 50px;

    }



    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .payment-options {

        grid-template-columns: 1fr;

    }

}



/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 760px) {



    .navbar,

    .navbar.scrolled {

        height: auto;



        padding: 18px 5%;



        flex-direction: column;



        gap: 17px;

    }



    .brand {

        width: auto;

    }



    .brand img {

        width: 145px;

    }



    .nav-links {

        width: 100%;



        flex: unset;



        justify-content: center;

        flex-wrap: wrap;



        gap: 7px 18px;

    }



    .nav-links a {

        font-size: 11px;

    }



    .nav-book {

        width: 100%;

        height: 47px;



        margin-left: 0;



        justify-content: center;



        gap: 20px;

    }



    .home-hero {

        min-height: 760px;



        padding: 100px 5% 65px;



        background-position: center;

    }



    .home-hero h1 {

        font-size: 78px;



        letter-spacing: -3px;

    }



    .outline-text {

        -webkit-text-stroke: 1px white;

    }



    .hero-buttons {

        flex-direction: column;

    }



    .home-about,

    .home-barbers,

    .team-section,

    .gallery-section,

    .cta {

        padding-left: 5%;

        padding-right: 5%;

    }



    .home-feature {

        grid-template-columns: 1fr;

    }



    .feature-photo {

        min-height: 550px;

    }



    .feature-copy {

        border-left: none;

        border-top: 1px solid var(--line);

    }



    .home-barber-grid,

    .barber-grid,

    .gallery-grid,

    .contact-grid,

    .booking-layout {

        grid-template-columns: 1fr;

    }



    .page-hero {

        min-height: 500px;



        padding-left: 5%;

        padding-right: 5%;

    }



    .page-hero h1 {

        font-size: 78px;



        letter-spacing: -4px;

    }



    .service-item {

        grid-template-columns: 80px 1fr 170px;

    }



    .service-right {

    display: flex;



    align-items: center;

    justify-content: flex-end;



    gap: 35px;

}





.service-price {

    color: #ffffff;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 26px;



    font-weight: 700;



    letter-spacing: 1px;



    white-space: nowrap;



    transition: 0.3s ease;

}





.service-item:hover .service-price {

    color: #080808;

}





/* MOBILE SERVICE PRICE */



@media (max-width: 760px) {



    .service-item {

        grid-template-columns: 35px 1fr 80px;

    }





    .service-right {

        gap: 12px;

    }





    .service-price {

        font-size: 19px;

    }



}

    .service-item h2 {

        font-size: 42px;

    }



    .contact-box:first-child,

    .booking-sidebar {

        border-right: none;

        border-bottom: 1px solid var(--line);

    }



    .form-row {

        grid-template-columns: 1fr;

    }



    footer {

        grid-template-columns: 1fr;

    }



    footer > div:last-child {

        text-align: left;

    }



}

    /* =========================================

   PAYMENT

========================================= */



.payment-amount {

    margin-bottom: 25px;

    padding: 25px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    background: #111;

    border: 1px solid #333;

}



.payment-amount span {

    color: #777;

    font-size: 10px;

    letter-spacing: 2px;

}



.payment-amount strong {

    color: #fff;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 34px;

}





/* PAYMENT OPTION */



.payment-options {

    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 15px;



    margin-bottom: 20px;

}



.payment-card {

    min-height: 130px;



    position: relative;



    padding: 22px;



    display: flex;

    flex-direction: column;

    justify-content: flex-end;



    background: #0d0d0d;



    border: 1px solid #333;



    cursor: pointer;



    transition: 0.3s ease;

}



.payment-card:hover {

    border-color: #fff;



    transform: translateY(-3px);

}



.payment-card input {

    position: absolute;



    top: 20px;

    right: 20px;



    width: auto;



    accent-color: white;

}



.payment-card strong {

    color: white;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 20px;

}



.payment-card span {

    margin-top: 7px;



    color: #777;



    font-size: 10px;

}





/* SELECTED */



.payment-card:has(input:checked) {

    border-color: white;

    background: #181818;

}





/* PAYMENT EXTRA */



.payment-extra {

    display: none;



    margin-top: 20px;



    padding: 30px;



    background: #111;



    border: 1px solid #333;

}



.payment-extra.active {

    display: block;



    animation: paymentShow 0.4s ease;

}



@keyframes paymentShow {



    from {

        opacity: 0;

        transform: translateY(15px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }



}





/* QR */



.payment-small {

    color: #777;



    font-size: 10px;



    letter-spacing: 2px;

}



.qr-placeholder {

    width: 220px;

    height: 220px;



    margin-top: 20px;



    padding: 10px;



    background: white;



    overflow: hidden;

}



.qr-placeholder img {

    display: block;



    width: 100%;

    height: 100%;



    max-width: 100%;



    object-fit: contain;

}



.qr-note {

    max-width: 350px;



    margin-top: 20px;



    color: #888;



    font-size: 11px;



    line-height: 1.7;

}





/* I HAVE PAID */



.paid-button {

    width: 220px;

    height: 52px;



    margin-top: 25px;



    padding: 0 20px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    border: none;



    background: white;

    color: black;



    cursor: pointer;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 13px;

    font-weight: 800;



    letter-spacing: 1px;



    transition: 0.3s ease;

}



.paid-button:hover {

    background: #ccc;



    transform: translateY(-3px);

}



/* =========================================================

   PAYMENT SUCCESS PAGE

========================================================= */



.success-page {

    min-height: calc(100vh - 96px);



    padding: 90px 6%;



    display: flex;



    align-items: center;

    justify-content: center;



    background: #080808;

}





.success-card {

    width: 100%;

    max-width: 900px;



    padding: 70px;



    border: 1px solid #333;



    background: #0f0f0f;



    animation: successAppear 0.8s ease;

}





@keyframes successAppear {



    from {

        opacity: 0;



        transform:

            translateY(35px)

            scale(0.98);

    }



    to {

        opacity: 1;



        transform:

            translateY(0)

            scale(1);

    }



}





.success-icon {

    width: 70px;

    height: 70px;



    margin-bottom: 30px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid white;



    border-radius: 50%;



    font-size: 30px;

}





.success-label {

    margin-bottom: 20px;



    color: #777;



    font-size: 10px;



    letter-spacing: 3px;

}





.success-card h1 {

    font-family:

        "Barlow Condensed",

        sans-serif;



    font-size:

        clamp(

            65px,

            9vw,

            120px

        );



    line-height: 0.8;



    letter-spacing: -4px;

}





.success-card h1 span {

    color: transparent;



    -webkit-text-stroke:

        2px white;



    font-style: italic;

}





.success-message {

    margin-top: 35px;



    color: #999;



    font-size: 14px;

}





.success-details {

    margin-top: 55px;



    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    border-top: 1px solid #333;

}





.success-details > div {

    padding: 22px 0;



    display: flex;



    justify-content:

        space-between;



    gap: 20px;



    border-bottom:

        1px solid #292929;

}





.success-details > div:nth-child(odd) {

    padding-right: 25px;

}





.success-details > div:nth-child(even) {

    padding-left: 25px;

}





.success-details span {

    color: #666;



    font-size: 9px;



    letter-spacing: 2px;

}





.success-details strong {

    font-family:

        "Barlow Condensed",

        sans-serif;



    font-size: 16px;



    text-align: right;

}





.success-buttons {

    margin-top: 45px;



    display: flex;



    gap: 12px;

}





@media (max-width: 700px) {



    .success-card {

        padding: 40px 25px;

    }





    .success-details {

        grid-template-columns: 1fr;

    }





    .success-details > div:nth-child(odd),

    .success-details > div:nth-child(even) {

        padding-left: 0;

        padding-right: 0;

    }





    .success-buttons {

        flex-direction: column;

    }



}



.paid-button {

    margin-top: 24px;



    width: 230px;

    height: 58px;



    padding: 0 20px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    border: 1px solid #ffffff;



    background: #ffffff;

    color: #080808;



    font-family: "Barlow Condensed", sans-serif;



    font-size: 15px;

    font-weight: 800;



    letter-spacing: 1.5px;



    cursor: pointer;



    text-transform: uppercase;



    transition: 0.3s ease;

}



.paid-button:hover {

    background: transparent;

    color: #ffffff;



    transform: translateY(-3px);

}


/* =========================================================
   FINAL REPAIRS
   These rules are intentionally outside responsive media.
========================================================= */

/* Page-title animation spans must be transformable */
.page-title-animate,
.page-title-delay {
    display: inline-block;
}

/* Service price layout - global desktop rules */
.service-item {
    grid-template-columns: 80px 1fr 170px;
}

.service-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 35px;
}

.service-price {
    color: #ffffff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: 0.3s ease;
}

.service-item:hover .service-price {
    color: #080808;
}

/* Current book-now.html uses .form-grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* Current book-now.html uses .booking-section */
.booking-section {
    border-bottom: 1px solid var(--line);
}

/* Current book-now.html uses .cta-section */
.cta-section {
    padding: 120px 6%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    background: white;
    color: black;
}

.cta-section h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(70px, 10vw, 145px);
    line-height: 0.8;
    letter-spacing: -5px;
}

.cta-section .outline-text {
    color: transparent;
    -webkit-text-stroke: 2px black;
}

.cta-section .button-white {
    border: 1px solid black;
}

.cta-section .button-white:hover {
    background: black;
    color: white;
}

/* Responsive fixes */
@media (max-width: 760px) {
    .service-item {
        grid-template-columns: 35px 1fr 80px;
    }

    .service-right {
        gap: 12px;
    }

    .service-price {
        font-size: 19px;
    }

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

    .cta-section {
        padding: 80px 5%;
        flex-direction: column;
        align-items: flex-start;
    }
}