{"id":52,"date":"2018-12-26T07:47:58","date_gmt":"2018-12-26T07:47:58","guid":{"rendered":"https:\/\/sunlightwebmedia.site\/barber-demo\/home\/"},"modified":"2026-07-12T17:39:23","modified_gmt":"2026-07-12T17:39:23","slug":"home","status":"publish","type":"page","link":"https:\/\/sunlightwebmedia.site\/barber-demo\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"52\" class=\"elementor elementor-52\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1df3f0 e-con-full e-flex e-con e-parent\" data-id=\"d1df3f0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65fd0f6 elementor-widget elementor-widget-html\" data-id=\"65fd0f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<main class=\"barber-site\">\r\n\r\n  <!-- CSS-ONLY OPENING EFFECT -->\r\n  <div class=\"barber-intro\" aria-hidden=\"true\">\r\n    <div class=\"barber-intro-mark\">\r\n      <span>Your Barbershop<\/span>\r\n      <small>Premium Cuts &amp; Grooming<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"barber-intro-line\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- HERO -->\r\n  <section id=\"home\" class=\"barber-hero\">\r\n    <div class=\"barber-hero-content\">\r\n      <div class=\"barber-hero-copy\">\r\n        <p class=\"barber-eyebrow barber-load barber-load-1\">\r\n          Premium Barber Shop\r\n        <\/p>\r\n\r\n        <h1 class=\"barber-load barber-load-2\">\r\n          Sharp Cuts.<br>\r\n          <span>Clean Style.<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"barber-hero-description barber-load barber-load-3\">\r\n          A modern barbershop experience for clean fades, classic cuts,\r\n          beard trims, hot towel shaves, and premium grooming.\r\n        <\/p>\r\n\r\n        <div class=\"barber-hero-buttons barber-load barber-load-4\">\r\n          <a href=\"#contact\" class=\"barber-btn barber-btn-main\">\r\n            Book Appointment\r\n          <\/a>\r\n\r\n          <a href=\"#services\" class=\"barber-btn barber-btn-outline\">\r\n            View Services\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"barber-hero-details barber-load barber-load-5\">\r\n          <div>\r\n            <strong>Walk-Ins<\/strong>\r\n            <span>Welcome<\/span>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>Premium<\/strong>\r\n            <span>Grooming<\/span>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>Easy<\/strong>\r\n            <span>Booking<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"barber-hero-image barber-load-image\">\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/images.unsplash.com\/photo-1622286342621-4bd786c2447c?w=1400&amp;q=85&amp;fit=crop\"\r\n        alt=\"Professional barber giving a haircut\"\r\n        loading=\"eager\"\r\n      >\r\n\r\n      <div class=\"barber-hero-shade\"><\/div>\r\n\r\n      <div class=\"barber-rating-card\">\r\n        <strong>4.9<\/strong>\r\n        <span>\u2605\u2605\u2605\u2605\u2605<\/span>\r\n        <small>Customer Rating<\/small>\r\n      <\/div>\r\n\r\n      <div class=\"barber-image-label\">\r\n        <span>Precision<\/span>\r\n        <strong>In Every Detail<\/strong>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- MOVING SERVICES TICKER -->\r\n  <div class=\"barber-ticker\" aria-label=\"Barbershop services\">\r\n    <div class=\"barber-ticker-track\">\r\n      <div class=\"barber-ticker-group\">\r\n        <span>Classic Cuts<\/span>\r\n        <span>Skin Fades<\/span>\r\n        <span>Beard Trims<\/span>\r\n        <span>Hot Towel Shaves<\/span>\r\n        <span>Kids Cuts<\/span>\r\n        <span>Premium Grooming<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"barber-ticker-group\" aria-hidden=\"true\">\r\n        <span>Classic Cuts<\/span>\r\n        <span>Skin Fades<\/span>\r\n        <span>Beard Trims<\/span>\r\n        <span>Hot Towel Shaves<\/span>\r\n        <span>Kids Cuts<\/span>\r\n        <span>Premium Grooming<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ABOUT -->\r\n  <section id=\"about\" class=\"barber-section barber-about\">\r\n    <div class=\"barber-container barber-two-col\">\r\n      <div class=\"barber-image-stack barber-reveal\">\r\n        <div class=\"barber-stack-accent\"><\/div>\r\n\r\n        <div class=\"barber-stack-img barber-stack-img-one\"><\/div>\r\n\r\n        <div class=\"barber-stack-img barber-stack-img-two\"><\/div>\r\n\r\n        <div class=\"barber-stack-badge\">\r\n          <strong>Premium<\/strong>\r\n          <span>Barber Experience<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"barber-about-content barber-reveal\">\r\n        <p class=\"barber-eyebrow\">About the Shop<\/p>\r\n\r\n        <h2>The Art of the Perfect Cut<\/h2>\r\n\r\n        <p>\r\n          We bring together old-school barbering, modern precision, and a\r\n          relaxed atmosphere. Every service is shaped around your style,\r\n          face shape, and daily routine.\r\n        <\/p>\r\n\r\n        <p>\r\n          From the consultation to the final lineup, the focus stays on clean\r\n          detail, sharp results, and a professional experience.\r\n        <\/p>\r\n\r\n        <div class=\"barber-feature-list\">\r\n          <div class=\"barber-feature-item\">\r\n            <span>01<\/span>\r\n\r\n            <p>\r\n              <strong>Experienced Barbers<\/strong>\r\n              Skilled service with close attention to detail.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"barber-feature-item\">\r\n            <span>02<\/span>\r\n\r\n            <p>\r\n              <strong>Walk-Ins Welcome<\/strong>\r\n              Flexible options for busy schedules.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"barber-feature-item\">\r\n            <span>03<\/span>\r\n\r\n            <p>\r\n              <strong>Premium Grooming<\/strong>\r\n              Modern cuts, beard care, and classic shaves.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"barber-feature-item\">\r\n            <span>04<\/span>\r\n\r\n            <p>\r\n              <strong>Comfortable Experience<\/strong>\r\n              Clean surroundings and professional service.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SERVICES -->\r\n  <section id=\"services\" class=\"barber-section barber-services\">\r\n    <div class=\"barber-container\">\r\n      <div class=\"barber-section-head barber-reveal\">\r\n        <p class=\"barber-eyebrow\">Our Services<\/p>\r\n\r\n        <h2>Built Around Your Style<\/h2>\r\n\r\n        <p>\r\n          Essential barber services delivered with clean technique,\r\n          modern style, and careful finishing.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"barber-services-grid\">\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">01<\/div>\r\n\r\n          <h3>Classic Haircut<\/h3>\r\n\r\n          <p>\r\n            Precision cut, consultation, styling, and a clean finish.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">02<\/div>\r\n\r\n          <h3>Skin Fade<\/h3>\r\n\r\n          <p>\r\n            Sharp fading, smooth blending, and detailed edge work.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">03<\/div>\r\n\r\n          <h3>Beard Trim<\/h3>\r\n\r\n          <p>\r\n            Beard shaping, trimming, cleanup, and a precise lineup.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">04<\/div>\r\n\r\n          <h3>Hot Towel Shave<\/h3>\r\n\r\n          <p>\r\n            A classic straight-razor shave with hot towel treatment.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">05<\/div>\r\n\r\n          <h3>Kids Cut<\/h3>\r\n\r\n          <p>\r\n            A comfortable, patient, and polished haircut for kids.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-service-card barber-reveal\">\r\n          <div class=\"barber-card-number\">06<\/div>\r\n\r\n          <h3>Full Grooming<\/h3>\r\n\r\n          <p>\r\n            Haircut, beard grooming, lineup, and premium finishing.\r\n          <\/p>\r\n\r\n          <a href=\"#contact\">\r\n            Book This Service\r\n            <span>\u2197<\/span>\r\n          <\/a>\r\n        <\/article>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- LARGE IMAGE BREAK -->\r\n  <section class=\"barber-image-break\" aria-label=\"Barbershop atmosphere\">\r\n    <div class=\"barber-image-break-overlay\"><\/div>\r\n\r\n    <div class=\"barber-container barber-image-break-content barber-reveal\">\r\n      <p class=\"barber-eyebrow\">Look Sharp. Feel Confident.<\/p>\r\n\r\n      <h2>More Than a Haircut<\/h2>\r\n\r\n      <a href=\"#contact\" class=\"barber-btn barber-btn-main\">\r\n        Reserve Your Chair\r\n      <\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- PRICING -->\r\n  <section id=\"pricing\" class=\"barber-section barber-pricing\">\r\n    <div class=\"barber-container\">\r\n      <div class=\"barber-section-head barber-reveal\">\r\n        <p class=\"barber-eyebrow\">Sample Pricing<\/p>\r\n\r\n        <h2>Simple, Clear Options<\/h2>\r\n\r\n        <p>\r\n          Demo pricing can be replaced with the barbershop\u2019s actual services,\r\n          packages, and rates.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"barber-price-grid\">\r\n        <article class=\"barber-price-card barber-reveal\">\r\n          <div class=\"barber-price-topline\">\r\n            <h3>Essential<\/h3>\r\n            <span>01<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"barber-price\">\r\n            <small>$<\/small>35\r\n          <\/div>\r\n\r\n          <p class=\"barber-price-note\">\r\n            A clean, professional everyday cut.\r\n          <\/p>\r\n\r\n          <ul>\r\n            <li>Classic Haircut<\/li>\r\n            <li>Neck Cleanup<\/li>\r\n            <li>Style Finish<\/li>\r\n          <\/ul>\r\n\r\n          <a href=\"#contact\">Book Essential<\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-price-card barber-featured barber-reveal\">\r\n          <div class=\"barber-popular-label\">Most Popular<\/div>\r\n\r\n          <div class=\"barber-price-topline\">\r\n            <h3>Premium<\/h3>\r\n            <span>02<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"barber-price\">\r\n            <small>$<\/small>65\r\n          <\/div>\r\n\r\n          <p class=\"barber-price-note\">\r\n            The complete haircut and beard refresh.\r\n          <\/p>\r\n\r\n          <ul>\r\n            <li>Haircut or Skin Fade<\/li>\r\n            <li>Beard Trim and Lineup<\/li>\r\n            <li>Hot Towel Finish<\/li>\r\n          <\/ul>\r\n\r\n          <a href=\"#contact\">Book Premium<\/a>\r\n        <\/article>\r\n\r\n        <article class=\"barber-price-card barber-reveal\">\r\n          <div class=\"barber-price-topline\">\r\n            <h3>VIP Grooming<\/h3>\r\n            <span>03<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"barber-price\">\r\n            <small>$<\/small>95\r\n          <\/div>\r\n\r\n          <p class=\"barber-price-note\">\r\n            A full-service premium grooming session.\r\n          <\/p>\r\n\r\n          <ul>\r\n            <li>Full Hair and Beard Service<\/li>\r\n            <li>Scalp or Facial Treatment<\/li>\r\n            <li>Priority Appointment<\/li>\r\n          <\/ul>\r\n\r\n          <a href=\"#contact\">Book VIP<\/a>\r\n        <\/article>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- LOCATION -->\r\n  <section id=\"locations\" class=\"barber-section barber-locations\">\r\n    <div class=\"barber-container barber-location-layout\">\r\n      <div class=\"barber-location-copy barber-reveal\">\r\n        <p class=\"barber-eyebrow\">Visit the Shop<\/p>\r\n\r\n        <h2>Your Local Barbershop<\/h2>\r\n\r\n        <p>\r\n          Replace this demo information with the shop\u2019s real address,\r\n          phone number, business hours, and booking link.\r\n        <\/p>\r\n\r\n        <a href=\"#contact\" class=\"barber-btn barber-btn-main\">\r\n          Get in Touch\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"barber-location-panel barber-reveal\">\r\n        <div class=\"barber-location-row\">\r\n          <span>Address<\/span>\r\n\r\n          <p>\r\n            Your Barbershop Address<br>\r\n            Your City, State ZIP\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"barber-location-row\">\r\n          <span>Phone<\/span>\r\n\r\n          <p>\r\n            <a href=\"tel:+10000000000\">\r\n              (000) 000-0000\r\n            <\/a>\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"barber-location-row\">\r\n          <span>Hours<\/span>\r\n\r\n          <p>\r\n            Monday\u2013Saturday: 9 AM\u20138 PM<br>\r\n            Sunday: By Appointment\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"barber-location-row\">\r\n          <span>Appointments<\/span>\r\n\r\n          <p>\r\n            Walk-ins welcome. Online and phone booking available.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CONTACT -->\r\n  <section id=\"contact\" class=\"barber-section barber-contact\">\r\n    <div class=\"barber-container barber-contact-layout\">\r\n      <div class=\"barber-contact-copy barber-reveal\">\r\n        <p class=\"barber-eyebrow\">Book an Appointment<\/p>\r\n\r\n        <h2>Book Your Chair<\/h2>\r\n\r\n        <p>\r\n          Ready for a fresh cut? Send your contact details and preferred\r\n          service. The shop can follow up to confirm availability.\r\n        <\/p>\r\n\r\n        <div class=\"barber-contact-info\">\r\n          <a href=\"tel:+10000000000\">\r\n            <span>Call the Shop<\/span>\r\n            <strong>(000) 000-0000<\/strong>\r\n          <\/a>\r\n\r\n          <a href=\"mailto:hello@yourbarbershop.com\">\r\n            <span>Email<\/span>\r\n            <strong>hello@yourbarbershop.com<\/strong>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <form class=\"barber-form\" action=\"#\" method=\"post\">\r\n        <div class=\"barber-form-row\">\r\n          <label>\r\n            <span>Full Name<\/span>\r\n\r\n            <input\r\n              type=\"text\"\r\n              name=\"name\"\r\n              placeholder=\"Your name\"\r\n              required\r\n            >\r\n          <\/label>\r\n\r\n          <label>\r\n            <span>Phone Number<\/span>\r\n\r\n            <input\r\n              type=\"tel\"\r\n              name=\"phone\"\r\n              placeholder=\"Your phone number\"\r\n              required\r\n            >\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <label>\r\n          <span>Email Address<\/span>\r\n\r\n          <input\r\n            type=\"email\"\r\n            name=\"email\"\r\n            placeholder=\"Your email address\"\r\n            required\r\n          >\r\n        <\/label>\r\n\r\n        <div class=\"barber-form-row\">\r\n          <label>\r\n            <span>Preferred Service<\/span>\r\n\r\n            <select name=\"service\" required>\r\n              <option value=\"\" selected disabled>\r\n                Select a service\r\n              <\/option>\r\n\r\n              <option>Classic Haircut<\/option>\r\n              <option>Skin Fade<\/option>\r\n              <option>Beard Trim<\/option>\r\n              <option>Hot Towel Shave<\/option>\r\n              <option>Kids Cut<\/option>\r\n              <option>VIP Grooming<\/option>\r\n            <\/select>\r\n          <\/label>\r\n\r\n          <label>\r\n            <span>Preferred Day<\/span>\r\n\r\n            <input type=\"date\" name=\"date\">\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <label>\r\n          <span>Message<\/span>\r\n\r\n          <textarea\r\n            name=\"message\"\r\n            placeholder=\"Tell us what you are looking for\"\r\n          ><\/textarea>\r\n        <\/label>\r\n\r\n        <button type=\"submit\">\r\n          Request Appointment\r\n          <span>\u2197<\/span>\r\n        <\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/main>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&display=swap');\r\n\r\n  .barber-site {\r\n    --barber-black: #080808;\r\n    --barber-dark: #101010;\r\n    --barber-card: #171717;\r\n    --barber-card-light: #1d1d1d;\r\n    --barber-gold: #c9a84c;\r\n    --barber-gold-light: #e0c270;\r\n    --barber-cream: #f5f0e8;\r\n    --barber-muted: rgba(245, 240, 232, 0.64);\r\n    --barber-border: rgba(245, 240, 232, 0.12);\r\n    --barber-header-height: 78px;\r\n    --barber-content: 1280px;\r\n    --barber-gutter: clamp(22px, 6vw, 82px);\r\n\r\n    position: relative;\r\n    background: var(--barber-black);\r\n    color: var(--barber-cream);\r\n    font-family: 'DM Sans', Arial, sans-serif;\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n  }\r\n\r\n  .barber-site,\r\n  .barber-site * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .barber-site img {\r\n    display: block;\r\n    max-width: 100%;\r\n  }\r\n\r\n  .barber-site a,\r\n  .barber-site button,\r\n  .barber-site input,\r\n  .barber-site select,\r\n  .barber-site textarea {\r\n    font: inherit;\r\n  }\r\n\r\n  .barber-container {\r\n    width: min(100%, var(--barber-content));\r\n    margin: 0 auto;\r\n    padding-inline: var(--barber-gutter);\r\n  }\r\n\r\n  .barber-section {\r\n    position: relative;\r\n    padding-block: clamp(82px, 10vw, 138px);\r\n  }\r\n\r\n  .barber-site h1,\r\n  .barber-site h2,\r\n  .barber-site h3,\r\n  .barber-site p {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .barber-site h1,\r\n  .barber-site h2,\r\n  .barber-site h3 {\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-weight: 400;\r\n    letter-spacing: 0.055em;\r\n  }\r\n\r\n  .barber-site h2 {\r\n    max-width: 900px;\r\n    margin-bottom: 24px;\r\n    font-size: clamp(50px, 7vw, 90px);\r\n    line-height: 0.94;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  .barber-site h3 {\r\n    font-size: clamp(28px, 3vw, 38px);\r\n    line-height: 1;\r\n  }\r\n\r\n  .barber-site p {\r\n    color: var(--barber-muted);\r\n    font-size: clamp(14px, 1.15vw, 16px);\r\n    line-height: 1.8;\r\n  }\r\n\r\n  .barber-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 18px;\r\n    color: var(--barber-gold) !important;\r\n    font-size: 11px !important;\r\n    font-weight: 700;\r\n    letter-spacing: 0.3em;\r\n    line-height: 1.2 !important;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-eyebrow::before {\r\n    content: \"\";\r\n    width: 28px;\r\n    height: 1px;\r\n    background: currentColor;\r\n  }\r\n\r\n  .barber-btn {\r\n    display: inline-flex;\r\n    min-height: 52px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 15px 27px;\r\n    border: 1px solid var(--barber-gold);\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.2em;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    transition:\r\n      background 0.28s ease,\r\n      color 0.28s ease,\r\n      transform 0.28s ease,\r\n      box-shadow 0.28s ease;\r\n  }\r\n\r\n  .barber-btn-main {\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n  }\r\n\r\n  .barber-btn-main:hover,\r\n  .barber-btn-main:focus-visible {\r\n    background: var(--barber-black);\r\n    color: var(--barber-gold);\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);\r\n  }\r\n\r\n  .barber-btn-outline {\r\n    background: transparent;\r\n    color: var(--barber-cream);\r\n    border-color: rgba(245, 240, 232, 0.3);\r\n  }\r\n\r\n  .barber-btn-outline:hover,\r\n  .barber-btn-outline:focus-visible {\r\n    border-color: var(--barber-gold);\r\n    color: var(--barber-gold);\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  \/* OPENING SCREEN *\/\r\n\r\n  .barber-intro {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 1000000;\r\n    display: grid;\r\n    place-items: center;\r\n    overflow: hidden;\r\n    background: #050505;\r\n    pointer-events: none;\r\n    animation:\r\n      barberIntroExit 0.8s\r\n      cubic-bezier(0.76, 0, 0.24, 1)\r\n      1.6s both;\r\n  }\r\n\r\n  .barber-intro::before,\r\n  .barber-intro::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 42vw;\r\n    height: 42vw;\r\n    border-radius: 50%;\r\n    filter: blur(90px);\r\n    opacity: 0.12;\r\n  }\r\n\r\n  .barber-intro::before {\r\n    top: -24vw;\r\n    left: -14vw;\r\n    background: var(--barber-gold);\r\n  }\r\n\r\n  .barber-intro::after {\r\n    right: -18vw;\r\n    bottom: -26vw;\r\n    background: var(--barber-gold);\r\n  }\r\n\r\n  .barber-intro-mark {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    animation: barberIntroMark 1s ease both;\r\n  }\r\n\r\n  .barber-intro-mark span {\r\n    color: var(--barber-cream);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: clamp(44px, 8vw, 96px);\r\n    letter-spacing: 0.09em;\r\n    line-height: 0.95;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-intro-mark small {\r\n    margin-top: 12px;\r\n    color: var(--barber-gold);\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.32em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-intro-line {\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: 32%;\r\n    z-index: 2;\r\n    width: min(280px, 58vw);\r\n    height: 1px;\r\n    overflow: hidden;\r\n    background: rgba(245, 240, 232, 0.12);\r\n    transform: translateX(-50%);\r\n  }\r\n\r\n  .barber-intro-line::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: var(--barber-gold);\r\n    transform: translateX(-100%);\r\n    animation: barberIntroLine 1.3s ease 0.15s both;\r\n  }\r\n\r\n  @keyframes barberIntroMark {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(24px) scale(0.96);\r\n      filter: blur(8px);\r\n    }\r\n\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0) scale(1);\r\n      filter: blur(0);\r\n    }\r\n  }\r\n\r\n  @keyframes barberIntroLine {\r\n    0% {\r\n      transform: translateX(-100%);\r\n    }\r\n\r\n    65% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(100%);\r\n    }\r\n  }\r\n\r\n  @keyframes barberIntroExit {\r\n    0% {\r\n      opacity: 1;\r\n      clip-path: inset(0 0 0 0);\r\n    }\r\n\r\n    99% {\r\n      opacity: 1;\r\n      clip-path: inset(0 0 100% 0);\r\n    }\r\n\r\n    100% {\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      clip-path: inset(0 0 100% 0);\r\n    }\r\n  }\r\n\r\n  \/* HERO *\/\r\n\r\n  .barber-hero {\r\n    position: relative;\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(0, 1fr)\r\n      minmax(0, 1fr);\r\n    min-height:\r\n      max(\r\n        690px,\r\n        calc(100svh - var(--barber-header-height))\r\n      );\r\n    background:\r\n      radial-gradient(\r\n        circle at 16% 22%,\r\n        rgba(201, 168, 76, 0.12),\r\n        transparent 28%\r\n      ),\r\n      var(--barber-black);\r\n  }\r\n\r\n  .barber-hero::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0 50% 0 0;\r\n    pointer-events: none;\r\n    background-image:\r\n      linear-gradient(\r\n        rgba(255, 255, 255, 0.022) 1px,\r\n        transparent 1px\r\n      ),\r\n      linear-gradient(\r\n        90deg,\r\n        rgba(255, 255, 255, 0.022) 1px,\r\n        transparent 1px\r\n      );\r\n    background-size: 52px 52px;\r\n    mask-image:\r\n      linear-gradient(\r\n        to right,\r\n        #000,\r\n        transparent 92%\r\n      );\r\n  }\r\n\r\n  .barber-hero-content {\r\n    position: relative;\r\n    z-index: 3;\r\n    display: flex;\r\n    align-items: center;\r\n    padding:\r\n      clamp(72px, 8vw, 120px)\r\n      var(--barber-gutter);\r\n  }\r\n\r\n  .barber-hero-copy {\r\n    width: min(100%, 660px);\r\n    margin-left: auto;\r\n    margin-right: clamp(0px, 2vw, 32px);\r\n  }\r\n\r\n  .barber-hero h1 {\r\n    margin-bottom: 28px;\r\n    font-size: clamp(76px, 9.5vw, 148px);\r\n    line-height: 0.82;\r\n    letter-spacing: 0.025em;\r\n  }\r\n\r\n  .barber-hero h1 span {\r\n    color: transparent;\r\n    -webkit-text-stroke:\r\n      1.4px var(--barber-cream);\r\n  }\r\n\r\n  .barber-hero-description {\r\n    max-width: 520px;\r\n    margin-bottom: 34px;\r\n    font-size:\r\n      clamp(15px, 1.2vw, 17px) !important;\r\n  }\r\n\r\n  .barber-hero-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 14px;\r\n  }\r\n\r\n  .barber-hero-details {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n    max-width: 550px;\r\n    margin-top: clamp(40px, 6vw, 72px);\r\n    padding-top: 24px;\r\n    border-top: 1px solid var(--barber-border);\r\n  }\r\n\r\n  .barber-hero-details div {\r\n    min-width: 0;\r\n    padding-right: 16px;\r\n  }\r\n\r\n  .barber-hero-details div + div {\r\n    padding-left: 18px;\r\n    border-left: 1px solid var(--barber-border);\r\n  }\r\n\r\n  .barber-hero-details strong,\r\n  .barber-hero-details span {\r\n    display: block;\r\n  }\r\n\r\n  .barber-hero-details strong {\r\n    color: var(--barber-cream);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 24px;\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  .barber-hero-details span {\r\n    margin-top: 4px;\r\n    color: var(--barber-muted);\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-hero-image {\r\n    position: relative;\r\n    min-height: 690px;\r\n    overflow: hidden;\r\n    background: #121212;\r\n  }\r\n\r\n  .barber-hero-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center;\r\n    filter:\r\n      grayscale(24%)\r\n      contrast(1.08)\r\n      brightness(0.9);\r\n    animation:\r\n      barberHeroZoom\r\n      14s ease-in-out\r\n      2.1s infinite alternate;\r\n  }\r\n\r\n  .barber-hero-shade {\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(\r\n        to right,\r\n        var(--barber-black) 0%,\r\n        rgba(8, 8, 8, 0.2) 26%,\r\n        transparent 54%\r\n      ),\r\n      linear-gradient(\r\n        to top,\r\n        rgba(8, 8, 8, 0.78) 0%,\r\n        transparent 46%\r\n      );\r\n    pointer-events: none;\r\n  }\r\n\r\n  .barber-rating-card {\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: clamp(34px, 6vw, 76px);\r\n    z-index: 2;\r\n    display: grid;\r\n    min-width: 168px;\r\n    padding: 20px 24px;\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);\r\n    animation:\r\n      barberFloat\r\n      4.5s ease-in-out\r\n      2.4s infinite;\r\n  }\r\n\r\n  .barber-rating-card strong {\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 42px;\r\n    line-height: 0.9;\r\n  }\r\n\r\n  .barber-rating-card span {\r\n    margin: 5px 0;\r\n    font-size: 11px;\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  .barber-rating-card small {\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-image-label {\r\n    position: absolute;\r\n    right: clamp(24px, 4vw, 58px);\r\n    bottom: clamp(32px, 5vw, 64px);\r\n    z-index: 2;\r\n    text-align: right;\r\n  }\r\n\r\n  .barber-image-label span,\r\n  .barber-image-label strong {\r\n    display: block;\r\n  }\r\n\r\n  .barber-image-label span {\r\n    color: var(--barber-gold);\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.25em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-image-label strong {\r\n    margin-top: 4px;\r\n    color: var(--barber-cream);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: clamp(26px, 3vw, 42px);\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  @keyframes barberHeroZoom {\r\n    from {\r\n      transform: scale(1.06);\r\n    }\r\n\r\n    to {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes barberFloat {\r\n    0%,\r\n    100% {\r\n      transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateY(-9px);\r\n    }\r\n  }\r\n\r\n  .barber-load {\r\n    opacity: 0;\r\n    animation:\r\n      barberLoadUp\r\n      0.9s\r\n      cubic-bezier(0.2, 0.75, 0.25, 1)\r\n      both;\r\n  }\r\n\r\n  .barber-load-1 {\r\n    animation-delay: 1.95s;\r\n  }\r\n\r\n  .barber-load-2 {\r\n    animation-delay: 2.05s;\r\n  }\r\n\r\n  .barber-load-3 {\r\n    animation-delay: 2.17s;\r\n  }\r\n\r\n  .barber-load-4 {\r\n    animation-delay: 2.29s;\r\n  }\r\n\r\n  .barber-load-5 {\r\n    animation-delay: 2.41s;\r\n  }\r\n\r\n  .barber-load-image {\r\n    opacity: 0;\r\n    animation:\r\n      barberImageReveal\r\n      1.15s\r\n      cubic-bezier(0.2, 0.75, 0.25, 1)\r\n      1.95s both;\r\n  }\r\n\r\n  @keyframes barberLoadUp {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(30px);\r\n      filter: blur(7px);\r\n    }\r\n\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n      filter: blur(0);\r\n    }\r\n  }\r\n\r\n  @keyframes barberImageReveal {\r\n    from {\r\n      opacity: 0;\r\n      clip-path: inset(0 0 100% 0);\r\n      transform: scale(1.04);\r\n    }\r\n\r\n    to {\r\n      opacity: 1;\r\n      clip-path: inset(0 0 0 0);\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  \/* TICKER *\/\r\n\r\n  .barber-ticker {\r\n    position: relative;\r\n    z-index: 4;\r\n    overflow: hidden;\r\n    padding: 15px 0;\r\n    background: var(--barber-gold);\r\n  }\r\n\r\n  .barber-ticker-track {\r\n    display: flex;\r\n    width: max-content;\r\n    white-space: nowrap;\r\n    animation: barberTicker 26s linear infinite;\r\n    will-change: transform;\r\n  }\r\n\r\n  .barber-ticker-group {\r\n    display: flex;\r\n    flex-shrink: 0;\r\n    align-items: center;\r\n  }\r\n\r\n  .barber-ticker span {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    padding-inline: 34px;\r\n    color: var(--barber-black);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 19px;\r\n    letter-spacing: 0.14em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-ticker span::after {\r\n    content: \"\u2726\";\r\n    position: absolute;\r\n    right: -5px;\r\n    top: 50%;\r\n    font-size: 11px;\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  @keyframes barberTicker {\r\n    to {\r\n      transform: translateX(-50%);\r\n    }\r\n  }\r\n\r\n  \/* ABOUT *\/\r\n\r\n  .barber-about,\r\n  .barber-pricing,\r\n  .barber-contact {\r\n    background:\r\n      radial-gradient(\r\n        circle at 84% 14%,\r\n        rgba(201, 168, 76, 0.06),\r\n        transparent 26%\r\n      ),\r\n      var(--barber-dark);\r\n  }\r\n\r\n  .barber-two-col {\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(0, 0.95fr)\r\n      minmax(0, 1.05fr);\r\n    align-items: center;\r\n    gap: clamp(52px, 7vw, 100px);\r\n  }\r\n\r\n  .barber-image-stack {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 570px;\r\n  }\r\n\r\n  .barber-stack-accent {\r\n    position: absolute;\r\n    inset: 8% 8% 0 12%;\r\n    border: 1px solid rgba(201, 168, 76, 0.36);\r\n  }\r\n\r\n  .barber-stack-img {\r\n    position: absolute;\r\n    overflow: hidden;\r\n    background-position: center;\r\n    background-size: cover;\r\n    filter:\r\n      grayscale(22%)\r\n      contrast(1.08);\r\n    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.32);\r\n    transition:\r\n      transform 0.55s ease,\r\n      filter 0.55s ease;\r\n  }\r\n\r\n  .barber-image-stack:hover .barber-stack-img {\r\n    filter:\r\n      grayscale(6%)\r\n      contrast(1.04);\r\n  }\r\n\r\n  .barber-stack-img-one {\r\n    top: 0;\r\n    left: 0;\r\n    width: 72%;\r\n    height: 82%;\r\n    background-image:\r\n      url(\"https:\/\/images.unsplash.com\/photo-1512690459411-b9245aed614b?w=1000&q=85&fit=crop\");\r\n  }\r\n\r\n  .barber-stack-img-two {\r\n    right: 0;\r\n    bottom: 0;\r\n    width: 55%;\r\n    height: 58%;\r\n    border: 3px solid var(--barber-gold);\r\n    background-image:\r\n      url(\"https:\/\/images.unsplash.com\/photo-1599351431202-1e0f0137899a?w=1000&q=85&fit=crop\");\r\n  }\r\n\r\n  .barber-image-stack:hover .barber-stack-img-one {\r\n    transform: translate(-5px, -5px);\r\n  }\r\n\r\n  .barber-image-stack:hover .barber-stack-img-two {\r\n    transform: translate(5px, 5px);\r\n  }\r\n\r\n  .barber-stack-badge {\r\n    position: absolute;\r\n    left: 8%;\r\n    bottom: 4%;\r\n    z-index: 3;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 18px 22px;\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);\r\n  }\r\n\r\n  .barber-stack-badge strong {\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 28px;\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  .barber-stack-badge span {\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-about-content > p:not(.barber-eyebrow) {\r\n    max-width: 650px;\r\n  }\r\n\r\n  .barber-feature-list {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n    gap: 12px;\r\n    margin-top: 34px;\r\n  }\r\n\r\n  .barber-feature-item {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n    gap: 14px;\r\n    align-items: start;\r\n    min-height: 118px;\r\n    padding: 18px;\r\n    border: 1px solid var(--barber-border);\r\n    background: rgba(255, 255, 255, 0.025);\r\n    transition:\r\n      border-color 0.3s ease,\r\n      background 0.3s ease,\r\n      transform 0.3s ease;\r\n  }\r\n\r\n  .barber-feature-item:hover {\r\n    border-color: rgba(201, 168, 76, 0.55);\r\n    background: rgba(201, 168, 76, 0.055);\r\n    transform: translateY(-4px);\r\n  }\r\n\r\n  .barber-feature-item > span {\r\n    color: var(--barber-gold);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 26px;\r\n  }\r\n\r\n  .barber-feature-item p {\r\n    margin: 0;\r\n    font-size: 13px !important;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  .barber-feature-item strong {\r\n    display: block;\r\n    margin-bottom: 4px;\r\n    color: var(--barber-cream);\r\n    font-size: 13px;\r\n  }\r\n\r\n  \/* SECTION HEADINGS *\/\r\n\r\n  .barber-section-head {\r\n    max-width: 780px;\r\n    margin:\r\n      0 auto\r\n      clamp(44px, 6vw, 72px);\r\n    text-align: center;\r\n  }\r\n\r\n  .barber-section-head .barber-eyebrow {\r\n    justify-content: center;\r\n  }\r\n\r\n  .barber-section-head h2 {\r\n    margin-inline: auto;\r\n  }\r\n\r\n  .barber-section-head > p:last-child {\r\n    max-width: 650px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* SERVICES *\/\r\n\r\n  .barber-services,\r\n  .barber-locations {\r\n    background:\r\n      linear-gradient(\r\n        rgba(255, 255, 255, 0.018) 1px,\r\n        transparent 1px\r\n      ),\r\n      linear-gradient(\r\n        90deg,\r\n        rgba(255, 255, 255, 0.018) 1px,\r\n        transparent 1px\r\n      ),\r\n      var(--barber-black);\r\n    background-size: 58px 58px;\r\n  }\r\n\r\n  .barber-services-grid {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n    gap: 18px;\r\n  }\r\n\r\n  .barber-service-card {\r\n    position: relative;\r\n    display: flex;\r\n    min-height: 310px;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    padding: clamp(28px, 3vw, 40px);\r\n    border: 1px solid var(--barber-border);\r\n    background:\r\n      linear-gradient(\r\n        145deg,\r\n        rgba(255, 255, 255, 0.035),\r\n        rgba(255, 255, 255, 0.012)\r\n      );\r\n    transition:\r\n      transform 0.35s ease,\r\n      border-color 0.35s ease,\r\n      background 0.35s ease,\r\n      box-shadow 0.35s ease;\r\n  }\r\n\r\n  .barber-service-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: auto -35% -60% auto;\r\n    width: 220px;\r\n    height: 220px;\r\n    border-radius: 50%;\r\n    background:\r\n      radial-gradient(\r\n        circle,\r\n        rgba(201, 168, 76, 0.2),\r\n        transparent 68%\r\n      );\r\n    opacity: 0;\r\n    transition:\r\n      opacity 0.35s ease,\r\n      transform 0.5s ease;\r\n  }\r\n\r\n  .barber-service-card:hover {\r\n    z-index: 2;\r\n    border-color: rgba(201, 168, 76, 0.66);\r\n    background:\r\n      linear-gradient(\r\n        145deg,\r\n        rgba(201, 168, 76, 0.08),\r\n        rgba(255, 255, 255, 0.018)\r\n      );\r\n    transform: translateY(-9px);\r\n    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);\r\n  }\r\n\r\n  .barber-service-card:hover::before {\r\n    opacity: 1;\r\n    transform: translate(-18px, -18px);\r\n  }\r\n\r\n  .barber-card-number {\r\n    margin-bottom: auto;\r\n    color: var(--barber-gold);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 54px;\r\n    line-height: 1;\r\n    opacity: 0.9;\r\n  }\r\n\r\n  .barber-service-card h3 {\r\n    margin: 32px 0 12px;\r\n  }\r\n\r\n  .barber-service-card p {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .barber-service-card a {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-top: auto;\r\n    color: var(--barber-gold);\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-service-card a span {\r\n    transition: transform 0.25s ease;\r\n  }\r\n\r\n  .barber-service-card a:hover span {\r\n    transform: translate(4px, -4px);\r\n  }\r\n\r\n  \/* LARGE IMAGE SECTION *\/\r\n\r\n  .barber-image-break {\r\n    position: relative;\r\n    display: grid;\r\n    min-height: clamp(500px, 62vw, 720px);\r\n    place-items: center;\r\n    overflow: hidden;\r\n    background:\r\n      url(\"https:\/\/images.unsplash.com\/photo-1503951914875-452162b0f3f1?w=1800&q=85&fit=crop\")\r\n      center \/ cover no-repeat fixed;\r\n  }\r\n\r\n  .barber-image-break::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(5, 5, 5, 0.28);\r\n  }\r\n\r\n  .barber-image-break-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(\r\n        to right,\r\n        rgba(5, 5, 5, 0.78),\r\n        rgba(5, 5, 5, 0.22),\r\n        rgba(5, 5, 5, 0.74)\r\n      ),\r\n      linear-gradient(\r\n        to top,\r\n        rgba(5, 5, 5, 0.58),\r\n        transparent 54%\r\n      );\r\n  }\r\n\r\n  .barber-image-break-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    padding-block: 100px;\r\n    text-align: center;\r\n  }\r\n\r\n  .barber-image-break-content h2 {\r\n    margin-bottom: 30px;\r\n    color: #fff;\r\n    font-size: clamp(64px, 10vw, 138px);\r\n  }\r\n\r\n  \/* PRICING *\/\r\n\r\n  .barber-price-grid {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n    align-items: stretch;\r\n    gap: 20px;\r\n  }\r\n\r\n  .barber-price-card {\r\n    position: relative;\r\n    display: flex;\r\n    min-height: 520px;\r\n    flex-direction: column;\r\n    padding: clamp(30px, 3.4vw, 44px);\r\n    border: 1px solid var(--barber-border);\r\n    background: var(--barber-card);\r\n    transition:\r\n      transform 0.35s ease,\r\n      border-color 0.35s ease,\r\n      box-shadow 0.35s ease;\r\n  }\r\n\r\n  .barber-price-card:hover {\r\n    border-color: rgba(201, 168, 76, 0.64);\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .barber-price-topline {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n  }\r\n\r\n  .barber-price-topline span {\r\n    color: rgba(201, 168, 76, 0.58);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: 34px;\r\n  }\r\n\r\n  .barber-price {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    margin: 28px 0 12px;\r\n    color: var(--barber-gold);\r\n    font-family: 'Bebas Neue', Impact, sans-serif;\r\n    font-size: clamp(70px, 7vw, 94px);\r\n    line-height: 0.85;\r\n  }\r\n\r\n  .barber-price small {\r\n    margin: 8px 4px 0 0;\r\n    font-size: 28px;\r\n  }\r\n\r\n  .barber-price-note {\r\n    min-height: 52px;\r\n    margin-bottom: 28px;\r\n    font-size: 13px !important;\r\n  }\r\n\r\n  .barber-price-card ul {\r\n    display: grid;\r\n    gap: 14px;\r\n    margin: 0 0 34px;\r\n    padding: 26px 0 0;\r\n    border-top: 1px solid var(--barber-border);\r\n    list-style: none;\r\n  }\r\n\r\n  .barber-price-card li {\r\n    position: relative;\r\n    padding-left: 24px;\r\n    color: var(--barber-muted);\r\n    font-size: 14px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .barber-price-card li::before {\r\n    content: \"\u2713\";\r\n    position: absolute;\r\n    left: 0;\r\n    color: var(--barber-gold);\r\n  }\r\n\r\n  .barber-price-card > a {\r\n    display: flex;\r\n    min-height: 50px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-top: auto;\r\n    border: 1px solid var(--barber-gold);\r\n    color: var(--barber-gold);\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.2em;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    transition:\r\n      background 0.28s ease,\r\n      color 0.28s ease,\r\n      transform 0.28s ease;\r\n  }\r\n\r\n  .barber-price-card > a:hover {\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .barber-featured {\r\n    border-color: var(--barber-gold);\r\n    background:\r\n      linear-gradient(\r\n        155deg,\r\n        rgba(201, 168, 76, 0.13),\r\n        transparent 38%\r\n      ),\r\n      var(--barber-card-light);\r\n  }\r\n\r\n  .barber-featured > a {\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n  }\r\n\r\n  .barber-featured > a:hover {\r\n    background: var(--barber-black);\r\n    color: var(--barber-gold);\r\n  }\r\n\r\n  .barber-popular-label {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    padding: 9px 13px;\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  \/* LOCATION *\/\r\n\r\n  .barber-location-layout {\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(0, 0.85fr)\r\n      minmax(0, 1.15fr);\r\n    align-items: center;\r\n    gap: clamp(50px, 8vw, 120px);\r\n  }\r\n\r\n  .barber-location-copy p:not(.barber-eyebrow) {\r\n    max-width: 540px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .barber-location-panel {\r\n    border: 1px solid var(--barber-border);\r\n    background: rgba(255, 255, 255, 0.025);\r\n    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);\r\n  }\r\n\r\n  .barber-location-row {\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(110px, 0.38fr)\r\n      minmax(0, 1fr);\r\n    gap: 28px;\r\n    padding: clamp(24px, 3vw, 34px);\r\n  }\r\n\r\n  .barber-location-row + .barber-location-row {\r\n    border-top: 1px solid var(--barber-border);\r\n  }\r\n\r\n  .barber-location-row > span {\r\n    color: var(--barber-gold);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.24em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-location-row p {\r\n    margin: 0;\r\n    color: var(--barber-cream);\r\n    font-size: 14px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  .barber-location-row a {\r\n    color: var(--barber-cream);\r\n    text-decoration: none;\r\n    transition: color 0.25s ease;\r\n  }\r\n\r\n  .barber-location-row a:hover {\r\n    color: var(--barber-gold);\r\n  }\r\n\r\n  \/* CONTACT *\/\r\n\r\n  .barber-contact-layout {\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(0, 0.82fr)\r\n      minmax(0, 1.18fr);\r\n    align-items: start;\r\n    gap: clamp(50px, 8vw, 110px);\r\n  }\r\n\r\n  .barber-contact-copy {\r\n    position: sticky;\r\n    top: calc(var(--barber-header-height) + 30px);\r\n  }\r\n\r\n  .barber-contact-copy > p:not(.barber-eyebrow) {\r\n    max-width: 540px;\r\n  }\r\n\r\n  .barber-contact-info {\r\n    display: grid;\r\n    gap: 12px;\r\n    margin-top: 34px;\r\n  }\r\n\r\n  .barber-contact-info a {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    padding: 18px 20px;\r\n    border: 1px solid var(--barber-border);\r\n    color: var(--barber-cream);\r\n    text-decoration: none;\r\n    transition:\r\n      border-color 0.3s ease,\r\n      background 0.3s ease,\r\n      transform 0.3s ease;\r\n  }\r\n\r\n  .barber-contact-info a:hover {\r\n    border-color: rgba(201, 168, 76, 0.6);\r\n    background: rgba(201, 168, 76, 0.05);\r\n    transform: translateX(6px);\r\n  }\r\n\r\n  .barber-contact-info span {\r\n    color: var(--barber-gold);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-contact-info strong {\r\n    overflow-wrap: anywhere;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .barber-form {\r\n    display: grid;\r\n    gap: 18px;\r\n    padding: clamp(28px, 4vw, 46px);\r\n    border: 1px solid var(--barber-border);\r\n    background: rgba(255, 255, 255, 0.025);\r\n    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.26);\r\n  }\r\n\r\n  .barber-form-row {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n    gap: 16px;\r\n  }\r\n\r\n  .barber-form label {\r\n    display: grid;\r\n    gap: 9px;\r\n  }\r\n\r\n  .barber-form label > span {\r\n    color: var(--barber-cream);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .barber-form input,\r\n  .barber-form select,\r\n  .barber-form textarea {\r\n    width: 100%;\r\n    min-height: 54px;\r\n    padding: 15px 16px;\r\n    border: 1px solid var(--barber-border);\r\n    border-radius: 0;\r\n    outline: none;\r\n    background: var(--barber-card);\r\n    color: var(--barber-cream);\r\n    font-size: 14px;\r\n    transition:\r\n      border-color 0.25s ease,\r\n      background 0.25s ease,\r\n      box-shadow 0.25s ease;\r\n  }\r\n\r\n  .barber-form input::placeholder,\r\n  .barber-form textarea::placeholder {\r\n    color: rgba(245, 240, 232, 0.38);\r\n  }\r\n\r\n  .barber-form select {\r\n    cursor: pointer;\r\n  }\r\n\r\n  .barber-form select option {\r\n    background: var(--barber-card);\r\n    color: var(--barber-cream);\r\n  }\r\n\r\n  .barber-form textarea {\r\n    min-height: 140px;\r\n    resize: vertical;\r\n  }\r\n\r\n  .barber-form input:focus,\r\n  .barber-form select:focus,\r\n  .barber-form textarea:focus {\r\n    border-color: var(--barber-gold);\r\n    background: #191919;\r\n    box-shadow:\r\n      0 0 0 3px\r\n      rgba(201, 168, 76, 0.08);\r\n  }\r\n\r\n  .barber-form button {\r\n    display: inline-flex;\r\n    min-height: 56px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    margin-top: 4px;\r\n    padding: 16px 24px;\r\n    border: 1px solid var(--barber-gold);\r\n    background: var(--barber-gold);\r\n    color: var(--barber-black);\r\n    cursor: pointer;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    transition:\r\n      background 0.28s ease,\r\n      color 0.28s ease,\r\n      transform 0.28s ease,\r\n      box-shadow 0.28s ease;\r\n  }\r\n\r\n  .barber-form button:hover,\r\n  .barber-form button:focus-visible {\r\n    background: var(--barber-black);\r\n    color: var(--barber-gold);\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);\r\n  }\r\n\r\n  .barber-form button span {\r\n    font-size: 15px;\r\n    transition: transform 0.25s ease;\r\n  }\r\n\r\n  .barber-form button:hover span {\r\n    transform: translate(4px, -4px);\r\n  }\r\n\r\n  \/* SCROLL REVEALS *\/\r\n\r\n  .barber-reveal {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n\r\n  @supports (animation-timeline: view()) {\r\n    .barber-reveal {\r\n      opacity: 0;\r\n      transform: translateY(44px);\r\n      animation: barberScrollReveal linear both;\r\n      animation-timeline: view();\r\n      animation-range: entry 5% cover 28%;\r\n    }\r\n\r\n    @keyframes barberScrollReveal {\r\n      to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n  }\r\n\r\n  \/* TABLET *\/\r\n\r\n  @media (max-width: 1050px) {\r\n    .barber-hero {\r\n      grid-template-columns: 1fr;\r\n      min-height: auto;\r\n    }\r\n\r\n    .barber-hero::before {\r\n      inset: 0;\r\n      mask-image:\r\n        linear-gradient(\r\n          to bottom,\r\n          #000,\r\n          transparent 75%\r\n        );\r\n    }\r\n\r\n    .barber-hero-content {\r\n      min-height: 650px;\r\n      padding-block: 90px 76px;\r\n      text-align: center;\r\n    }\r\n\r\n    .barber-hero-copy {\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .barber-hero-description {\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .barber-hero-buttons {\r\n      justify-content: center;\r\n    }\r\n\r\n    .barber-hero-details {\r\n      margin-inline: auto;\r\n      text-align: left;\r\n    }\r\n\r\n    .barber-hero-image {\r\n      min-height: 560px;\r\n    }\r\n\r\n    .barber-hero-shade {\r\n      background:\r\n        linear-gradient(\r\n          to bottom,\r\n          var(--barber-black),\r\n          transparent 22%\r\n        ),\r\n        linear-gradient(\r\n          to top,\r\n          rgba(8, 8, 8, 0.72),\r\n          transparent 46%\r\n        );\r\n    }\r\n\r\n    .barber-two-col,\r\n    .barber-location-layout,\r\n    .barber-contact-layout {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .barber-image-stack {\r\n      width: min(100%, 700px);\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .barber-about-content {\r\n      width: min(100%, 760px);\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .barber-services-grid,\r\n    .barber-price-grid {\r\n      grid-template-columns:\r\n        repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .barber-price-card:last-child {\r\n      grid-column: 1 \/ -1;\r\n      width: min(100%, calc(50% - 10px));\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .barber-location-copy {\r\n      max-width: 760px;\r\n    }\r\n\r\n    .barber-contact-copy {\r\n      position: static;\r\n      max-width: 760px;\r\n    }\r\n  }\r\n\r\n  \/* MOBILE *\/\r\n\r\n  @media (max-width: 700px) {\r\n    .barber-site {\r\n      --barber-gutter: 22px;\r\n    }\r\n\r\n    .barber-section {\r\n      padding-block: 78px;\r\n    }\r\n\r\n    .barber-eyebrow {\r\n      letter-spacing: 0.22em;\r\n    }\r\n\r\n    .barber-hero-content {\r\n      min-height: auto;\r\n      padding-block: 76px 64px;\r\n    }\r\n\r\n    .barber-hero h1 {\r\n      font-size: clamp(62px, 20vw, 92px);\r\n      line-height: 0.86;\r\n    }\r\n\r\n    .barber-hero-description {\r\n      margin-bottom: 28px;\r\n    }\r\n\r\n    .barber-hero-buttons {\r\n      display: grid;\r\n      width: 100%;\r\n    }\r\n\r\n    .barber-btn {\r\n      width: 100%;\r\n      min-height: 54px;\r\n    }\r\n\r\n    .barber-hero-details {\r\n      gap: 0;\r\n      margin-top: 42px;\r\n      padding-top: 20px;\r\n    }\r\n\r\n    .barber-hero-details div {\r\n      padding-right: 8px;\r\n    }\r\n\r\n    .barber-hero-details div + div {\r\n      padding-left: 10px;\r\n    }\r\n\r\n    .barber-hero-details strong {\r\n      font-size: 19px;\r\n    }\r\n\r\n    .barber-hero-details span {\r\n      font-size: 8px;\r\n      letter-spacing: 0.14em;\r\n    }\r\n\r\n    .barber-hero-image {\r\n      min-height: 440px;\r\n    }\r\n\r\n    .barber-rating-card {\r\n      left: 18px;\r\n      bottom: 22px;\r\n      min-width: 140px;\r\n      padding: 16px 18px;\r\n    }\r\n\r\n    .barber-rating-card strong {\r\n      font-size: 34px;\r\n    }\r\n\r\n    .barber-image-label {\r\n      right: 20px;\r\n      bottom: 26px;\r\n    }\r\n\r\n    .barber-image-label strong {\r\n      font-size: 24px;\r\n    }\r\n\r\n    .barber-ticker {\r\n      padding: 13px 0;\r\n    }\r\n\r\n    .barber-ticker-track {\r\n      animation-duration: 20s;\r\n    }\r\n\r\n    .barber-ticker span {\r\n      padding-inline: 25px;\r\n      font-size: 17px;\r\n    }\r\n\r\n    .barber-image-stack {\r\n      min-height: 390px;\r\n    }\r\n\r\n    .barber-stack-img-one {\r\n      width: 78%;\r\n      height: 78%;\r\n    }\r\n\r\n    .barber-stack-img-two {\r\n      width: 58%;\r\n      height: 54%;\r\n    }\r\n\r\n    .barber-stack-badge {\r\n      left: 4%;\r\n      bottom: 2%;\r\n      padding: 14px 16px;\r\n    }\r\n\r\n    .barber-stack-badge strong {\r\n      font-size: 23px;\r\n    }\r\n\r\n    .barber-feature-list {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .barber-feature-item {\r\n      min-height: auto;\r\n    }\r\n\r\n    .barber-section-head {\r\n      margin-bottom: 42px;\r\n    }\r\n\r\n    .barber-services-grid,\r\n    .barber-price-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .barber-service-card {\r\n      min-height: 280px;\r\n    }\r\n\r\n    .barber-service-card:hover,\r\n    .barber-price-card:hover {\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .barber-image-break {\r\n      min-height: 520px;\r\n      background-attachment: scroll;\r\n    }\r\n\r\n    .barber-image-break-content h2 {\r\n      font-size: clamp(58px, 18vw, 92px);\r\n    }\r\n\r\n    .barber-price-card,\r\n    .barber-price-card:last-child {\r\n      grid-column: auto;\r\n      width: 100%;\r\n      min-height: auto;\r\n    }\r\n\r\n    .barber-price-note {\r\n      min-height: auto;\r\n    }\r\n\r\n    .barber-location-row {\r\n      grid-template-columns: 1fr;\r\n      gap: 10px;\r\n    }\r\n\r\n    .barber-form {\r\n      padding: 24px 18px;\r\n    }\r\n\r\n    .barber-form-row {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .barber-contact-info a:hover {\r\n      transform: none;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 430px) {\r\n    .barber-hero h1 {\r\n      font-size: clamp(58px, 19vw, 78px);\r\n    }\r\n\r\n    .barber-hero-details {\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n      text-align: center;\r\n    }\r\n\r\n    .barber-hero-details div,\r\n    .barber-hero-details div + div {\r\n      padding: 10px 0;\r\n      border-left: 0;\r\n      border-top: 1px solid var(--barber-border);\r\n    }\r\n\r\n    .barber-hero-details div:first-child {\r\n      border-top: 0;\r\n    }\r\n\r\n    .barber-image-label {\r\n      display: none;\r\n    }\r\n\r\n    .barber-rating-card {\r\n      right: 18px;\r\n      left: auto;\r\n    }\r\n\r\n    .barber-image-stack {\r\n      min-height: 340px;\r\n    }\r\n\r\n    .barber-stack-badge {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  \/* REDUCED MOTION ACCESSIBILITY *\/\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .barber-intro {\r\n      display: none;\r\n    }\r\n\r\n    .barber-site *,\r\n    .barber-site *::before,\r\n    .barber-site *::after {\r\n      scroll-behavior: auto !important;\r\n      animation-duration: 0.01ms !important;\r\n      animation-iteration-count: 1 !important;\r\n      transition-duration: 0.01ms !important;\r\n    }\r\n\r\n    .barber-load,\r\n    .barber-load-image,\r\n    .barber-reveal {\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n      clip-path: none !important;\r\n      filter: none !important;\r\n    }\r\n  }\r\n  \r\n\/* Prevent contact section from appearing faded *\/\r\n.barber-contact .barber-reveal {\r\n  opacity: 1 !important;\r\n  transform: none !important;\r\n  animation: none !important;\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Your Barbershop Premium Cuts &amp; Grooming Premium Barber Shop Sharp Cuts. Clean Style. A modern barbershop experience for clean fades, classic cuts, beard trims, hot towel shaves, and premium grooming. Book Appointment View Services Walk-Ins Welcome Premium Grooming Easy Booking 4.9 \u2605\u2605\u2605\u2605\u2605 Customer Rating Precision In Every Detail Classic Cuts Skin Fades Beard Trims Hot [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":33,"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/pages\/52\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/sunlightwebmedia.site\/barber-demo\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}