/*!
Theme Name: Sugar Beauty Lounge Child
Theme URI: http://underscores.me/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpha
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
::-webkit-scrollbar {
  width: 7px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #daa103;
  border-radius: 16px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
  background-color: #fff;
}

/* The page never scrolls horizontally by design (content is overflow-safe
   300→3200px) — `clip` guarantees no horizontal scrollbar can ever appear
   (e.g. sub-pixel rounding at odd browser zoom/DPI levels used to flash a
   gold horizontal scrollbar, styled by the rules above). Unlike
   `overflow-x: hidden`, `clip` does NOT create a scroll container, so GSAP
   ScrollTrigger pinning and Lenis smooth scrolling are unaffected. */
html {
  overflow-x: clip;
}

body {
  /* overflow-x: hidden; */
  line-height: 1.5;
  color: #000;
}

ul {
  padding: 0;
  margin: 0;
}

.section {
  padding: 50px 0;
}

a {
  text-decoration: none !important;
  transition: 0.5s ease !important;
}

a,
input,
button {
  outline: 0 !important;
}

.post,
.page {
  margin: 0;
}

body,
p {
  font-weight: 400;
  color: #000;
  font-family: "Proxima Nova Rg";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Proxima Nova Lt";
}

.home .entry-title {
  display: none;
}

ul li,
li {
  list-style: none;
}

.skip-link.screen-reader-text {
  display: none;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;
  opacity: 1;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit;
  opacity: 1;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
  opacity: 1;
}

#sidebar {
  display: none;
}

.entry-footer {
  clear: both;
}

#colophon {
  clear: both;
}

/* 404 - NOT FOUND PAGE */

.error-404.not-found {
  text-align: center;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  background-image: url(/wp-content/uploads/2020/10/404.jpg);
  background-size: cover;
}

.not_found_inner {
  max-width: 69.5%;
}

.error404 #masthead,
.error404 #colophon {
  display: none;
}

.logo a {
  outline: 0 !important;
}

.error-404.not-found .logo {
  padding: 0;
  background-color: transparent;
}

.error-404.not-found h1 {
  font-size: 200px;
  line-height: 1;
  color: #404040;
  margin: 30px 0;
  font-weight: 800;
}

.error-404.not-found h1 span {
  color: #e01e26;
}

.page-header h3 {
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 40px;
}

.page-header p {
  font-size: 22px !important;
  color: #000;
  margin-bottom: 20px;
}

.page-content .return_home {
  background-color: #e01e26;
  color: #fff;
  padding: 20px 50px;
  display: inline-block;
  font-size: 20px;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  border: 2px solid #e01e26;
}

.page-content .return_home:hover {
  transform: translateY(-3px);
  background-color: transparent;
  color: #000;
  transform: scale(1.1);
}

/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */

.search-results article.product,
.search-results article.page {
  display: none;
}

.search-results .page-title span::before,
.search-results .page-title span::after {
  content: '"';
}

.search-results .page-title {
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}

.search-results .page-header {
  width: 100%;
}

.search-results #primary {
  display: flex;
  flex-wrap: wrap;
}

.search-results #primary article {
  width: 30%;
  margin: 0 1.5%;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding-top: 0;
  margin-bottom: 35px;
  border-radius: 6px;
}

.search-results #primary article a.post-thumbnail {
  display: block;
  margin-left: -20px;
  margin-right: -20px;
}

.search-results #primary article a.post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.search-results #primary article .entry-title a {
  display: block;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}

.no-results.not-found {
  text-align: center;
  margin-bottom: 50px;
}

.no-results.not-found .search-form input.search-field {
  height: 45px;
  padding-left: 10px;
  border: 1px solid #eee;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  width: 250px;
}

.no-results.not-found .search-form .search-submit {
  height: 45px;
  padding: 0 30px;
  border: 0;
  background-color: #0b204d;
  color: #fff;
  cursor: pointer;
}

.no-results.not-found .search-form .search-submit:hover {
  background-color: #252525;
}

.no-results.not-found .search-form label span {
  display: none;
  width: 0;
}

/*SEARCH RESULTS - NO RESULTS CSS ENDS*/

/* Modal box CSS*/

.modal {
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: transparent !important;
  border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.modal-footer {
  display: none !important;
}

.modal-header {
  border-bottom: 0px !important;
}

.close {
  color: #000 !important;
  opacity: 1 !important;
  border: 1px solid #fff !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff !important;
  padding: 0 !important;
  float: left !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.modal-dialog {
  max-width: 650px !important;
  margin: 50px auto !important;
}

.close span {
  display: block;
  color: #fff;
  position: absolute;
  left: 120%;
  top: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 50px !important;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding: 15px 15px 15px 40px !important;
}

.dgwt-wcas-details-main-image img {
  max-height: 200px !important;
}

.dgwt-wcas-suggestion-selected {
  background-color: #0b204d;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
  color: #fff;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
  color: #fff;
}

.dgwt-wcas-pd-addtc .add_to_cart_inline {
  margin-left: 20px;
}

.asl_nores {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.results .asl_nores .asl_keyword {
  padding: 5px 0px !important;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  border-top: 1px solid #eee;
}

.asl_nores_header {
  margin-bottom: 10px !important;
}

/*  Modal CSS ENDS */

/*  Drop down menu CSS*/
#primary-menu {
  text-align: center;
}

#primary-menu li {
  display: inline-block;
  padding: 0 10px;
}

#primary-menu li a {
  padding: 10px 0;
  color: #000;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: -5px;
  top: 2px;
  display: block;
}

.menu-item-has-children .sub-menu {
  position: absolute;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
  top: calc(100% + 10px);
  left: 10px;
  width: 220px;
  border-radius: 5px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  overflow: hidden;
}

.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#primary-menu .sub-menu li {
  display: block;
  padding: 0;
}

#primary-menu .sub-menu li a:hover {
  color: #fff;
  border-color: transparent;
}

#primary-menu .sub-menu li a {
  display: block;
  text-align: left;
  padding: 17px 10px;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 9;
  transition: all 0.5s ease-in-out;
}

#primary-menu .sub-menu li:last-child a {
  border-bottom: 0;
}

#primary-menu .sub-menu li a:hover::before {
  width: 100%;
  background-color: #0b204d;
  border-color: #0b204d;
}

#primary-menu .sub-menu li a::before {
  content: "";
  background-color: transparent;
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom: 1px solid transparent;
}

.menu-toggle {
  display: none;
}

/*  Drop down menu CSS ENDS */

/*
Nav bar
*/
#mm #primary-menu ul.sub-menu li a {
  padding-left: 35px;
}

#mm #primary-menu .sub-menu li a::before {
  content: unset;
}

#mm ul.sub-menu {
  position: relative;
  visibility: visible;
  opacity: 1;
  transform: translate(0);
  display: block !important;
  height: auto !important;
}

#mml {
  padding: 0 15px;
  color: #ffffff;
}

#mml h4 {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 12px;
}

.mm {
  position: relative;
  background-color: #000;
  min-height: 49px;
}

#mmb {
  position: absolute;
  width: 40px;
  height: 50px;
  margin-right: 15px;
  top: 0;
  right: 0;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#mmb span {
  display: block;
  position: absolute;
  height: 1.5px;
  width: 100%;
  background: #ffffff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#mmb span:nth-child(1) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(2) {
  top: 26px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb.on span {
  height: 2px;
}

#mmb.on span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 11px;
  left: 8px;
}

#mmb.on span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#mmb.on span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

#mm ul {
  padding-left: 0;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1000;
  display: none;
}

#mm li {
  display: block;
  position: relative;
  padding: 0;
}

#mm #primary-menu a {
  display: block;
  padding: 16px 26px 15px 17px;
  border-bottom: #dedede 1px solid;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 25px;
  background-color: #000;
  word-wrap: break-word;
  text-align: left;
}

#mm #primary-menu a:hover {
  background-color: #0b204d;
}

.mm,
#mm {
  display: none;
}

/* 
 * NAVBAR CSS ENDS
 */

/* WOOCOMMERCE CSS START */

.woocommerce td.product-name a {
  color: #000;
  font-weight: 600;
}

.woocommerce td.product-name a:hover {
  color: #0b204d;
}

input#coupon_code {
  width: 200px !important;
  padding-left: 10px;
  margin-right: 10px;
  height: 45px;
  background-color: #eee;
  border: 0;
  border-radius: 3px;
  font-size: 14px;
}

.coupon .button {
  height: 45px;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  color: #fff;
  height: 45px;
}

.actions button {
  height: 45px;
}

.woocommerce a.added_to_cart {
  padding: 10px 20px;
  border-radius: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  color: #fff;
  background-color: #0b204d;
  padding: 10px 20px;
  line-height: 1.5;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: #fff;
  background-color: #333;
}

.post-type-archive li .added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.wc-proceed-to-checkout a,
#place_order {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  font-weight: 600 !important;
}

.wc-proceed-to-checkout a:hover,
#place_order:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: unset;
  display: block;
  width: 100%;
  height: 45px;
}

a.shipping-calculator-button {
  color: #0b204d;
  text-transform: uppercase;
  font-weight: 600;
}

.woocommerce a.remove,
td.product-remove button {
  background: #0b204d !important;
  color: #fff !important;
  line-height: 17px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100px;
}

.woocommerce-cart-form {
  width: 62%;
  float: left;
}

.woocommerce .cart-collaterals {
  width: 35%;
  float: right;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: unset;
  width: 100%;
  background: rgba(84, 84, 84, 0.05);
  padding: 40px 40px 30px;
}

.woocommerce table.shop_table {
  border: 0;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  text-align: center;
}

.woocommerce table.shop_table th {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 13px !important;
}

.woocommerce table.shop_table .actions {
  padding-top: 40px !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebe9eb;
  padding-bottom: 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  font-size: 16px;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce .cart-collaterals table.shop_table td {
  padding-left: 0;
  padding-right: 0;
}

.cart_totals tr:not(:last-child) td {
  padding-bottom: 30px !important;
}

.qib-container button {
  cursor: pointer;
}

.woocommerce-shipping-destination {
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 14px;
  color: #000;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  font-size: 14px;
}

input[type="checkbox"],
input[type="radio"],
.input-radio,
.input-checkbox {
  width: 17px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  outline-width: medium;
  position: relative;
  border: none;
  cursor: pointer;
  outline-width: 0;
  border-radius: 50%;
  top: 3px;
}

input[type="radio"]::before {
  background: #0b204d;
}

.input-radio::before,
input[type="radio"]::before,
.input-radio::before,
input[type="checkbox"]::before {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  width: 17px;
  height: 17px;
  display: block;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.input-radio::before,
input[type="checkbox"]::before {
  border-radius: 0%;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.input-radio::before,
.input-radio::after,
.input-checkbox::before,
.input-checkbox::after {
  content: "";
}

input[type="radio"]::after,
.input-radio::after,
input[type="checkbox"]::after,
.input-checkbox::after,
.widget_product_categories ul li a::before,
.widget_layered_nav ul li a::before,
.post_tags a,
.wpb_widgetised_column .tagcloud a,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-color: rgba(84, 84, 84, 0.8);
}

.input-radio::after,
input[type="radio"]::after {
  border-radius: 50%;
}

input[type="checkbox"]::after,
input[type="radio"]::after,
.input-radio::after,
.input-checkbox::after {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid #a5a5a5;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}

.input-radio:checked::before,
input[type="radio"]:checked::before,
.input-radio:checked::before,
input[type="checkbox"]:checked::before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  background: #0b204d;
}

input[type="radio"]:checked::after,
.input-radio:checked::after,
input[type="checkbox"]:checked::after,
.input-checkbox:checked::after,
.return-to-shop .button.wc-backward {
  border-color: #0b204d;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #000;
  font-weight: 400;
  height: 45px;
}

.woocommerce form .form-row {
  padding: 3px 0;
  margin: 0 0 06px;
  display: block;
}

#calc_shipping_city_field {
  margin-bottom: 2px;
}

.order-total .woocommerce-Price-amount {
  font-weight: 600 !important;
  font-size: 25px;
}

.woocommerce-checkout .checkout_coupon input#coupon_code {
  width: 100% !important;
  padding-left: 15px !important;
  display: inline-block;
  padding: 6px 10px;
}

.checkout.woocommerce-checkout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
  width: 60%;
}

#order_review {
  width: 38%;
  background: rgba(84, 84, 84, 0.05);
  padding: 20px 40px 40px;
  position: relative;
}

#order_review_heading {
  display: none;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  float: unset;
  width: 100%;
  max-width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  float: unset;
  width: 100%;
  max-width: 100%;
}

.checkout_coupon.woocommerce-form-coupon .button {
  height: 45px;
}

.checkout_coupon.woocommerce-form-coupon .form-row-first {
  width: 50%;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-total {
  text-align: right;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot th {
  border: none;
  vertical-align: top;
}

.woocommerce .shop_table.woocommerce-checkout-review-order-table td {
  padding: 16px 0px;
}

.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding-top: 40px;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}

#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
  float: right;
  line-height: 20px;
  margin-left: 10px;
  color: #000;
  font-weight: 300;
  font-size: 12px;
  border-bottom: 1px dashed;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
  width: 80px;
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
h3#order_review_heading,
#post-79 .entry-title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-Address-title.title h3,
div#customer_login h2 {
  text-transform: uppercase;
  color: #252525;
  font-size: 24px !important;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 0;
  position: relative;
}

span.select2-selection.select2-selection--single {
  height: 45px !important;
  padding: 9px 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 45px;
  right: 10px;
}

form.checkout.woocommerce-checkout label {
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 500;
  text-transform: uppercase;
}

#order_comments {
  height: 100px;
}

#add_payment_method #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
  border-bottom: 1px solid rgba(84, 84, 84, 0.15);
  line-height: 16px;
  padding: 17px 0 14px;
}

#add_payment_method #payment ul.payment_methods li div.payment_box,
.woocommerce #payment ul.payment_methods li div.payment_box {
  background-color: transparent;
  line-height: 1.538em;
  padding: 0 35px;
  margin: 0;
  width: 100%;
  font-size: 1rem;
  margin-top: 20px !important;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.woocommerce #payment div.payment_box p {
  font-size: 13px;
  line-height: 1.4285em;
  margin: -2px 0 0;
  margin-bottom: 0px;
  text-shadow: none;
  font-weight: 400;
  color: #333;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  content: unset;
}

.woocommerce-privacy-policy-text p {
  font-size: 14px;
  color: #333;
}

.shop_table.woocommerce-checkout-review-order-table thead th,
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
  padding: 10px 0;
}

.woocommerce ul#shipping_method li label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
}

form.checkout.woocommerce-checkout ul.payment_methods li label {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 14px;
  text-transform: capitalize;
  line-height: 1.3em;
  font-weight: 700;
  color: #000;
  margin-top: 12px;
}

.woocommerce-error {
  border-color: #0b204d !important;
}

.woocommerce-message::before,
.woocommerce-error::before {
  color: #c12a30 !important;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
  width: 100%;
}

.woocommerce-message a,
a.woocommerce-Button.button,
p.return-to-shop a,
.added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  margin-top: 8px !important;
  font-weight: bold;
}

.woocommerce-message a:hover,
a.woocommerce-Button.button:hover,
p.return-to-shop a:hover,
.added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.woocommerce-message a {
  margin-top: 0 !important;
}

.woocommerce-message,
.woocommerce-notices-wrapper a,
.woocommerce-message::before {
  border-top-color: #0b204d !important;
}

.woocommerce-order-received .woocommerce-customer-details {
  display: none;
}

.woocommerce-order-received p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  color: #0b204d;
}

.woocommerce-order-received .woocommerce table.shop_table tfoot td,
.woocommerce-order-received .woocommerce table.shop_table tfoot th {
  border: 0;
  padding-top: 15px;
}

.woocommerce-order-received .woocommerce table.shop_table tbody td,
.woocommerce-order-received .woocommerce table.shop_table tbody th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 40px;
  padding: 15px 0;
}

.woocommerce-order-received .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table th {
  padding: 15px 0;
}

.woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
  border-collapse: collapse;
}

.woocommerce-order-received .woocommerce td.product-name a {
  color: #0b204d;
  font-weight: 600;
  font-size: 20px;
}

.woocommerce-order-received .woocommerce td.product-name a:hover {
  color: #252525;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
  vertical-align: middle;
  margin-bottom: 0;
  margin-top: 7px;
}

.woocommerce form .form-row.create-account .input-checkbox {
  display: inline-block;
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: unset;
}

#ship-to-different-address label span {
  margin-left: 8px;
  font-weight: bold;
  color: #000;
}

.tinv-wishlist .product-action {
  width: 165px;
}

#tinvwl_product_actions {
  height: 45px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.tinvwl-table-manage-list tr td {
  border-top: 1px solid #ccc;
}

.tinvwl-to-left.look_in {
  display: flex;
  flex-wrap: wrap;
}

.select-wrapper {
  flex: 1;
  margin-right: 5px;
  position: relative;
}

.select-wrapper::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
  line-height: 0;
  color: #666;
}

.tinvwl-to-left.look_in .tinvwl-input-group {
  width: 100%;
  border-collapse: collapse;
}

.wishlist_item .product-thumbnail img {
  width: 100px;
  height: auto;
  max-width: unset;
}

.woocommerce-Message.woocommerce-Message--info.woocommerce-info .button {
  margin-top: 0 !important;
}

.woocommerce-account .woocommerce-columns--addresses.col2-set.addresses,
.u-columns.woocommerce-Addresses.col2-set.addresses {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-account .woocommerce-column--shipping-address.col-2,
.woocommerce-account .woocommerce-column--billing-address.col-1,
.u-column1.col-1.woocommerce-Address,
.u-column2.col-2.woocommerce-Address {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  max-width: 48%;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
}

.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set::before {
  content: unset;
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
  border: 0;
  padding: 0 0 10px;
  line-height: 1.8;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tfoot th {
  text-align: right;
  border-top: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-account .woocommerce table.shop_table {
  border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
  padding: 20px 10px;
}

.woocommerce-account .woocommerce .account-orders-table {
  text-align: center;
}

.woocommerce-account.woocommerce .col2-set,
.woocommerce-account.woocommerce-page .col2-set {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-account #customer_login .col-1,
#customer_login .col-2 {
  flex: 49%;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  height: 400px;
}

/*Dashboad*/
nav.woocommerce-MyAccount-navigation ul {
  padding: 0;
  list-style: none;
  margin: 0 !important;
}

nav.woocommerce-MyAccount-navigation ul li a {
  padding: 9px 10px;
  display: block;
  border: 1px solid #0b204d;
  margin-bottom: 9px;
  color: white;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease-in;
  background-color: #0b204d;
}

nav.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #252525;
  color: white;
  border: 1px solid #252525;
}

nav.woocommerce-MyAccount-navigation ul li a:hover {
  color: white !important;
  border: 1px solid #252525;
  background-color: #252525;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: #0b204d;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #252525;
}

form.woocommerce-EditAccountForm fieldset {
  padding-left: 0;
  padding-right: 0;
}

/**DASHBOARD END**/
.woocommerce table.my_account_orders .button {
  background-color: #0b204d;
  color: #fff;
  padding: 8px 25px;
  font-size: 14px;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  display: inline-block;
  font-weight: 300;
}

.woocommerce table.my_account_orders .button:hover {
  background-color: #252525;
  color: #fff;
}

.woocommerce-account .addresses .title h3 {
  position: relative;
}

.woocommerce-privacy-policy-text a {
  color: #252525;
}

.woocommerce-privacy-policy-text a:hover {
  color: #0b204d;
}

.woocommerce-info {
  border-top-color: #0b204d;
  margin-bottom: 10px !important;
}

.lost_password a {
  color: #252525 !important;
}

.lost_password a:hover {
  color: #0b204d !important;
}

.woocommerce-info::before {
  color: #0b204d;
}

.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
p.woocommerce-LostPassword.lost_password a {
  color: #252525 !important;
}

.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover,
.woocommerce-privacy-policy-text a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
  color: #0b204d !important;
}

.woocommerce-privacy-policy-text {
  padding-bottom: 20px;
}

.woocommerce form .form-row .required {
  color: #0b204d;
}

a.showcoupon {
  font-size: 16px;
  font-weight: 500;
}

h3#order_review_heading {
  margin-top: 40px;
}

form.woocommerce-cart-form .product-thumbnail {
  height: auto;
  border: none;
}

.woocommerce-cart-form .woocommerce-Price-amount.amount {
  font-size: 16px;
}

.woocommerce-form-coupon-toggle {
  margin-bottom: 40px;
}

ul.woocommerce-error {
  margin-bottom: 50px !important;
}

.tinv-header {
  display: none;
}

.tinv-wishlist.woocommerce.tinv-wishlist-clear {
  margin-top: 30px;
}

.post-type-archive .products li {
  text-align: center;
}

.tax-product_cat .products li {
  text-align: center;
}

.tax-product_cat li .added_to_cart {
  background-color: #c12a30 !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  border-radius: 25px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  /*    display: inline-block !important; */
  font-weight: 300 !important;
}

.tax-product_cat li .added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.quantity {
  position: relative;
  width: fit-content;
}

.woocommerce-cart .quantity .minus {
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 5px 14px 7px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}

.woocommerce-cart .quantity .plus {
  background: transparent;
  position: absolute;
  right: 0;
  top: 0px;
  padding: 12px 4px 11px 4px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}

a.restore-item {
  margin-left: 10px;
  margin-top: -10px !important;
}

.page-id-317 .woocommerce-form-login {
  height: 492px;
}

.woocommerce-order-received .woocommerce-order-details__title {
  position: relative;
}

.woocommerce-order-received .woocommerce-column__title {
  position: relative;
}

.page-id-316 .wc-backward {
  margin-left: 20px !important;
  color: #252525 !important;
}

.page-id-316 .wc-backward:hover {
  color: #c12a30 !important;
}

.page-id-317 .woocommerce-MyAccount-content .woocommerce-Button {
  position: relative;
  top: -10px !important;
}

/* Woo Commerce End Here */

/* =============================================================================
   SUGAR BEAUTY LOUNGE - HOMEPAGE HERO + HEADER  (Figma 390:2101)
   All hero/header styling lives in this block. Vanilla, no framework classes.
   Fonts: Playfair Display (headings/nav) enqueued via functions.php.
          Body copy falls back to a system sans (Figma used "General Sans",
          not a Google font - swap the stack below if you self-host it).
   Palette (from Figma): Neutral/10 #FFFFFF, golden #DDA403.
   ============================================================================= */

:root {
  --sugar-white: #ffffff;
  --sugar-gold: #dda403;
  --sugar-ink: #000000;
  --sugar-overlay: rgba(0, 0, 0, 0.55);
  --sugar-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sugar-sans: "General Sans";
  /*
	 * Horizontal widths/padding come from the theme's existing Bootstrap
	 * `.container` (max-width 1240px @ >=1250, 15px side padding). The header
	 * inner and hero content carry the `.container` class in the markup; we do
	 * NOT define our own page widths here.
	 */

  /* ABOUT V2 tokens (page_templates/about-v2.php) — merged into this same
     :root rule rather than a second `:root{}` block further down: this
     browser engine was silently dropping an entire second top-level :root
     rule (present in the parsed stylesheet text, absent from both cssRules
     and the computed style — not a syntax error, just broken handling of a
     duplicate :root selector), so every var(--sbl-*) resolved to nothing and
     silently fell back to Bootstrap's defaults. One :root rule sidesteps it
     entirely, browser-behavior-proof. */
  --sbl-black: #000000;
  --sbl-ink: #0A0A09;
  --sbl-gold: #DDA403;
  --sbl-gold-light: #F8B84E;
  --sbl-white: #FFFFFF;
  --sbl-body: rgba(0,0,0,.68);
  --sbl-body-inv: rgba(255,255,255,.72);
  --sbl-rule: rgba(0,0,0,.12);
  --sbl-rule-inv: rgba(255,255,255,.16);
  --sbl-radius: 28px;
  --sbl-serif: "Playfair Display",Georgia,"Times New Roman",serif;
  --sbl-sans: "General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sbl-script: "Great Vibes",cursive;

  /* ABOUT V3 tokens (page_templates/about-v3.php) — merged into the same
     :root rule for the same reason as the ABOUT V2 tokens above. New names
     only; --sbl-body-inv already exists with a different value used
     elsewhere, so a V3-specific variant is added instead of changed. */
  --sbl-ivory: #FAF7F1;
  --sbl-ivory-deep: #F2ECE0;
  --sbl-ease: cubic-bezier(.16,1,.3,1);
  --sbl-av3-body-inv: rgba(255,255,255,.76);
}

/* ============================================================================
   SITE HEADER / PRIMARY NAV  (rendered from header.php)
   ============================================================================ */
.sugar-header {
  width: 100%;
  z-index: 100;
}

/* Front page: transparent bar overlaying the hero. */
.sugar-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  transition:
    background-color 0.35s ease,
    transform 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* Sticky dark state after scrolling (added by custom.js on the front page). */
/* .sugar-header--overlay.is-scrolled {
  position: fixed;
  background-color: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
} */


/*
 * Header inner carries the theme `.container` in the markup (width, side
 * padding and centring inherited from it). We only add flex alignment and
 * vertical padding here - no horizontal width/padding of our own.
 */
.sugar-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 18px;
  /* logo top ~18px in Figma */
  padding-bottom: 18px;
}

.sugar-nav {
  flex: 1 1 auto;
  width: 100%;
}

.sugar-nav__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.sugar-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sugar-nav__list--left {
  flex: 1;
  justify-content: flex-start;
  gap: 44px;
  /* Home / Treatments / About us */
}

.sugar-nav__list--right {
  flex: 1;
  justify-content: flex-end;
  gap: 55px;
  /* Gallery / FAQ / Contact (Figma gap 55px) */
}

.sugar-nav__item {
  margin: 0;
}

.sugar-nav__link {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--sugar-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* Underline accent (Figma "Line 9", 26px) - revealed on hover / focus. */
.sugar-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 1px;
  background-color: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.sugar-nav__link:hover,
.sugar-nav__link:focus-visible,
.sugar-nav__link.is-active {
  color: var(--sugar-gold);
}

.sugar-nav__link:hover::after,
.sugar-nav__link:focus-visible::after,
.sugar-nav__link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.sugar-nav__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  margin: 0 24px;
}

.sugar-nav__logo img {
  display: block;
  width: auto;
  height: 120px;
  /* Figma logo height ~119.64px */
  max-width: 100%;
}

/* Mobile hamburger - hidden on desktop. */
.sugar-nav__toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: 15px;
  /* aligns to the .container side padding */
  transform: translateY(-50%);
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Mobile slide-in menu backdrop — hidden on desktop (only shown <=767, see the
   responsive section). Scroll lock class is toggled by custom.js while open. */
.sugar-menu-backdrop {
  display: none;
}

/* Logo in the mobile header bar — desktop hides it (logo lives in the nav row). */
.sugar-mobile-logo {
  display: none;
}

html.sugar-menu-lock,
body.sugar-menu-lock {
  overflow: hidden;
}

.sugar-nav__toggle-bar {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background-color: var(--sugar-white);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* ============================================================================
   HERO
   ============================================================================ */
/* Front page starts flush at the very top (header is an absolute overlay). */

.sugar-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* account for mobile browser chrome */
  width: 100%;
  max-width: 100vw;
  /* never exceed the viewport (forces headline to wrap) */
  overflow: hidden;
  background-color: var(--sugar-ink);
  isolation: isolate;
}

/* Background photo - mirrored horizontally to match the Figma composition.
   Starts un-zoomed; custom.js adds `.is-bg-zoom` to the hero AFTER the full
   intro finishes, running a one-shot cinematic zoom-in that then holds
   (mirrors the Figma prototype: full-face -> eyes close-up). The mirror is
   preserved by keeping scaleX(-1) in both states. */
.sugar-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform: scaleX(-1) scale(1);
  transform-origin: center center;
  transition: transform 6s ease-out;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}

.sugar-hero.is-bg-zoom .sugar-hero__bg {
  transform: translateX(-40%) translateY(40%) scaleX(-1) scale(1.8);
}

/* Texture (mix-blend overlay, 50% opacity - Figma "Rectangle"). */
.sugar-hero__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 735px;
  /* Figma texture height */
  max-height: 100%;
  object-fit: cover;
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: -2;
  pointer-events: none;
}

/* Dark tint over the whole hero (rgba(0,0,0,0.55)). */
.sugar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sugar-overlay);
  z-index: -1;
  pointer-events: none;
}

/* Top-down gradient behind the navigation (Figma 192px). */
.sugar-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 192px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 1) 0.79%,
      rgba(0, 0, 0, 0.51) 60.25%,
      rgba(0, 0, 0, 0.08) 84.35%,
      rgba(0, 0, 0, 0) 99.21%);
  z-index: -1;
  pointer-events: none;
}

/* Decorative vertical accent glyphs on the right edge (Figma "Component 6").
   Faint white outline letters already baked at 10% opacity in the SVGs. */
.sugar-hero__accent {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 58px;
  pointer-events: none;
}

.sugar-hero__accent-item {
  display: block;
  width: 100%;
  height: 60px;
}

/*
 * Accent reveal: the 5 glyphs enter one-by-one, starting from the BOTTOM image
 * and moving upward. Each slides in from the right while fading in, then holds
 * (no loop). custom.js adds `.is-animating` only after the hero content
 * (title -> subtitle -> button) has finished.
 */
.js-sugar-hero .sugar-hero__accent-item {
  opacity: 0;
  transform: translateX(40px);
  /* start off to the right */
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger bottom -> top: nth-child(5) is the bottom image, so it goes first. */
.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item:nth-child(5) {
  transition-delay: 0s;
}

.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item:nth-child(4) {
  transition-delay: 0.19s;
}

.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item:nth-child(3) {
  transition-delay: 0.38s;
}

.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item:nth-child(2) {
  transition-delay: 0.57s;
}

.js-sugar-hero .sugar-hero__accent.is-animating .sugar-hero__accent-item:nth-child(1) {
  transition-delay: 0.76s;
}

/* ----------------------------- HERO CONTENT ----------------------------- */
/*
 * Content carries the theme `.container` in the markup, so its width, side
 * padding and horizontal centring are inherited (on a 1440 viewport the 1240px
 * container leaves the ~100px left inset the Figma design shows). We only add
 * vertical placement here.
 */
.sugar-hero__content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  /* push the block toward the lower area (Figma anchors it near the bottom) */
  /* Figma: button sits ~137px above the hero bottom. */
  padding-bottom: clamp(56px, 16vh, 137px);
}

/* Headline - Playfair Display SemiBold 72px, line-height 77.76 (1.08). */
.sugar-hero__title {
  margin: 0 0 14px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.08;
  color: var(--sugar-white);
  overflow-wrap: break-word;
}

.sugar-hero__line {
  display: block;
}

.sugar-hero__word {
  display: inline-block;
  margin-right: 0.1em;
}

/* Subtitle - 22px, line-height 29.25 (1.33), with soft shadow. */
.sugar-hero__subtitle {
  max-width: 690px;
  margin: 0 0 28px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.53vw, 22px);
  line-height: 1.33;
  color: var(--sugar-white);
  text-shadow: 0 4px 7.7px rgba(0, 0, 0, 0.28);
}

/* CTA button - 167x46, border 1px white, radius 107px, gap 8, padding 14/24. */
.sugar-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 167px;
  padding: 14px 24px;
  border: 1px solid var(--sugar-white);
  border-radius: 107px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  text-transform: capitalize;
  color: var(--sugar-white);
  text-decoration: none;
  background: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.sugar-hero__btn-icon {
  flex: 0 0 auto;
  width: 13px;
  height: auto;
  transition: transform 0.3s ease;
}

.sugar-hero__btn:hover,
.sugar-hero__btn:focus-visible {
  background-color: #dda403;
  color: var(--sugar-white);
  border-color: #dda403;
}

/* .sugar-hero__btn:hover .sugar-hero__btn-icon,
.sugar-hero__btn:focus-visible .sugar-hero__btn-icon {
	transform: translateX(4px);
} */

/* ----------------------------------------------------------------------------
   ENTRANCE ANIMATIONS
   Words / copy / button start hidden; JS adds .is-visible to reveal them.
   Mirrors the Figma opacity-0 -> visible word-by-word reveal.
   ---------------------------------------------------------------------------- */
.js-sugar-hero .sugar-hero__word,
.js-sugar-hero .sugar-hero__subword,
.js-sugar-hero .sugar-hero__btn {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.3s ease,
    transform 1.3s ease;
}

/* Subtitle words: inline so the paragraph still wraps; each fades + rises. */
.sugar-hero__subword {
  display: inline-block;
}

.js-sugar-hero .sugar-hero__subword {
  transform: translateY(16px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/*
 * Button entrance: slower + smoother than the title/subtitle (eased-out,
 * no fast pop-in). It is NOT revealed by .is-visible; custom.js adds
 * `.is-revealed` only after the subtitle's transition has finished
 * (event-based, so it stays correct if durations change).
 */
.js-sugar-hero .sugar-hero__btn {
  transition:
    opacity 1.95s ease-out,
    transform 1.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Title reveals with .is-visible. Subtitle waits for its own class
   (.is-subs-in), added by custom.js only AFTER the title has fully finished,
   so the stages never overlap. */
.js-sugar-hero.is-visible .sugar-hero__word {
  opacity: 1;
  transform: translateY(0);
}

.js-sugar-hero.is-subs-in .sugar-hero__subword {
  opacity: 1;
  transform: translateY(0);
}

.js-sugar-hero .sugar-hero__btn.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(1) .sugar-hero__word:nth-child(1) {
  transition-delay: 0.19s;
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(1) .sugar-hero__word:nth-child(2) {
  transition-delay: 0.38s;
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(1) .sugar-hero__word:nth-child(3) {
  transition-delay: 0.57s;
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(2) .sugar-hero__word:nth-child(1) {
  transition-delay: 0.76s;
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(2) .sugar-hero__word:nth-child(2) {
  transition-delay: 0.95s;
}

.js-sugar-hero.is-visible .sugar-hero__line:nth-child(2) .sugar-hero__word:nth-child(3) {
  transition-delay: 1.14s;
}

/* Subtitle words get their staggered transition-delays from custom.js (word count varies). */
/* Button reveal is event-driven (see custom.js) - no fixed transition-delay. */

/* =============================================================================
   FRONT-PAGE SECTIONS (below the hero)
   ============================================================================= */

/* Generic scroll reveal (fade + rise). JS adds .is-in when in view. */
.js-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   FEATURED TREATMENTS  (Figma 366:3112)
   White section (1440x1094 in Figma). Heading + copy on the left (vertically
   centred at left:100px); a dark gradient ellipse + mirrored arch portrait
   bleed off the right edge. Right-side positions are percentages of the
   section so they stay proportional as it scales.
   --------------------------------------------------------------------------- */
.sugar-featured {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  min-height: 100vh;
  /* 1094/1440 */
}

.sugar-featured__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.sugar-featured__text {
  max-width: 590px;
}

.sugar-featured__title {
  margin: 0 0 20px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(40px, 4.51vw, 65px);
  line-height: 1.077;
  /* 70/65 */
  color: #000000;
}

.sugar-featured__title span {
  display: block;
}

.sugar-featured__subtitle {
  margin: 0;
  max-width: 398px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.46;
  /* 29.25/20 */
  text-transform: capitalize;
  color: #000000;
}

/* Right-hand visual: dark gradient ellipse (behind) + mirrored arch portrait
   (front) layered at the exact Figma coordinates, bleeding off the right edge. */
.sugar-featured__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Dark gradient disc recreated purely in CSS (was Ellipse 1 SVG:
   #0F1014 -> #101619). */
.sugar-featured__disc {
  position: absolute;
  right: -150px;
  bottom: -150px;
  width: 980px;
  /* 999.226/1440 */
  height: 980px;
  /* 988.596/1094 */
  border-radius: 50%;
  background: radial-gradient(ellipse 72% 72% at 66% 30%,
      #101216 55%,
      #11181d 100%);
}

/* Portrait is clipped to the Figma arch shape (sect01: tl/tr 300px,
   br 100px, bl 0). The video variant is additionally mirrored (see
   video.sugar-featured__portrait below) — that flip was tuned
   specifically for that video asset's own composition (per the Figma
   source, "-scale-x-100"), and does not apply to an admin-uploaded
   Featured Image: mirroring a plain photo flips its composition and,
   combined with the cover-crop, was cutting off content the uploader
   never intended to lose from the left side.

   Width/height/right/bottom now match .sugar-featured__disc's own box
   exactly at every breakpoint (disc unchanged) instead of only the
   previous, narrower size anchored to the same right/bottom corner —
   that left visible gaps of bare disc on every side (left especially,
   but also top/right/bottom), since the media box was smaller than
   the circle behind it on all sides, not just narrower. Matching the
   full box eliminates the gap entirely; the only remaining difference
   is the corner treatment (this element's Figma arch clip — rounded
   top corners, square bottom — vs. the disc's full circle), which is
   deliberate per "sect01" above and far less noticeable than an empty
   gap. */
.sugar-featured__portrait {
  position: absolute;
  /* Figma sect01 */

  /* 655/1440 */
  /* 866/1094 */
  right: -150px;
  object-fit: cover;
  object-position: top;
  overflow: hidden;
  width: 980px;
  height: 980px;
  bottom: -150px;
  border-radius: 300px 300px 0px 0px;
}
video.sugar-featured__portrait {
  transform: scaleX(-1);
  /* -scale-x-100 in Figma */
}

/* ---------------------------------------------------------------------------
   BRAND STATEMENT  (Figma 253:2554) - dark video background, centred heading +
   copy. Heading fades up, copy fades in once the heading's entrance has begun
   (staggered transition-delay off the shared .sugar-statement.is-in class).
   --------------------------------------------------------------------------- */
.sugar-statement {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(520px, 58vw, 844px);
  padding: clamp(64px, 9vw, 120px) 0;
  overflow: hidden;
  background: #0d0d0d;
  isolation: isolate;
}

/* Disable the generic whole-block reveal here; we stagger the lines instead. */
.sugar-statement.js-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.sugar-statement__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
}

/* Subtle extra dim so the copy stays legible. */
.sugar-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77));
}

.sugar-statement__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.sugar-statement__title {
  /* Clear, balanced gap to the body copy below — matches the heading-to-content
     spacing already used by other centred dark-section titles on this site
     (Testimonials, Gallery, FAQ all use this same clamp), rather than the
     tighter 30px it started with, which read as crowded against a 60px
     heading and 50px line-height paragraph. */
  margin: 0 0 clamp(36px, 5vw, 50px);
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.1;
  color: #ffffff;
  /* Fade-in + upward movement. opacity/transform only — never affects layout
     flow, so the reveal cannot shift the section's spacing. */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sugar-statement__text {
  margin: 0 auto;
  /* Narrower than the section/container width so the copy reads as a compact,
     centred block rather than stretching edge-to-edge — in the same range as
     the site's other centred lead paragraphs under a big heading
     (.sugar-cform__lead: 663px, .sugar-cvisit__lead: 750px). */
/*   max-width: 700px; */
  font-family: var(--sugar-sans);
  font-weight: 400;
  color: #ffffff;
  font-size: 26px;
  line-height: 50px;
  letter-spacing: 0.5px;
  /* Fade-in only (no movement), starting once the heading's own entrance has
     begun — see the transition-delay on .is-in below. */
  opacity: 0;
  transition: opacity 1s ease;
}

.sugar-statement.is-in .sugar-statement__title {
  opacity: 1;
  transform: translateY(0);
}

.sugar-statement.is-in .sugar-statement__text {
  opacity: 1;
  transition-delay: 0.45s;
}

/* ---------------------------------------------------------------------------
   TESTIMONIALS  (Figma 196:4409) - dark bg, fanned overlapping client cards
   --------------------------------------------------------------------------- */
.sugar-testimonials {
  background: #0d0d0d;
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: hidden;
}

.sugar-testimonials__title {
  margin: 0 0 clamp(36px, 5vw, 40px);
  text-align: center;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.1;
  color: #ffffff;
}

.sugar-testimonials__row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sugar-tcard {
  flex: 0 0 auto;
  margin: 0;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Fan sizing + overlap (center largest, outers smaller/behind). */
.sugar-tcard--l {
  width: 370px;
  z-index: 5;
}

.sugar-tcard--m {
  width: 300px;
  z-index: 3;
  margin-inline: -34px;
}

.sugar-tcard--s {
  width: 211px;
  z-index: 1;
  margin-inline: -30px;
  opacity: 0.85;
}

/* No client photo — the card is text-only, so .sugar-tcard__body (the light
   surface, already the outer .sugar-tcard's own background/radius) is the
   entire card. Content order top -> bottom: service (small label) -> stars ->
   quote (focal) -> client name. */
.sugar-tcard__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* More generous than the old 14-26px — with no image above it, the body IS
     the card, so it needs its own comfortable margins instead of the tighter
     padding that used to sit under a photo. */
  padding: clamp(24px, 3vw, 36px);
}

/* Service name — small standalone label at the top, styled on the same
   uppercase/letter-spaced eyebrow convention already used for
   .sugar-about-intro__eyebrow, so it reads as a heading-like element without
   introducing a new type treatment, and stays clearly distinct from the
   quote below it (colour + case + tracking, not just size). */
.sugar-tcard__service {
  margin: 0;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sugar-gold);
}

.sugar-tcard__stars {
  color: #f8b84e;
  letter-spacing: 3px;
  font-size: 24px;
  line-height: 1;
}

.sugar-tcard--s .sugar-tcard__stars {
  font-size: 10px;
  letter-spacing: 2px;
}

/* Quote — the card's focal content: unstyled otherwise (still the site's
   existing quote typography), it becomes the visual centre of the card
   simply by being the largest text block, immediately after the compact
   service label + stars and before the closing name. */
.sugar-tcard__quote {
  margin: 0;
  font-family: var(--sugar-sans);
  font-weight: 300;
  color: #000000;
  line-height: 22.75px;
  font-size: 14px;
}

.sugar-tcard--l .sugar-tcard__quote {
  font-size: 14px;
}

.sugar-tcard--m .sugar-tcard__quote {
  font-size: 12px;
}

.sugar-tcard--s .sugar-tcard__quote {
  font-size: 10px;
  line-height: 1.5;
}

/* Client name — closing signature at the bottom. <cite> in the markup (the
   figure/blockquote/figcaption/cite pattern for an attributed quote); browsers
   italicise <cite> by default, so font-style is reset to match the site's
   existing name styling exactly. */
.sugar-tcard__name {
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-style: normal;
  color: #252525;
  font-size: 16px;
}

.sugar-tcard--l .sugar-tcard__name {
  font-size: 14px;
}

.sugar-tcard--m .sugar-tcard__name,
.sugar-tcard--s .sugar-tcard__name {
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   REUSABLE PILL BUTTON (outline) - used across sections
   --------------------------------------------------------------------------- */
.sugar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 33px;
  border: 1px solid var(--sugar-white);
  border-radius: 107px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  text-transform: capitalize;
  color: var(--sugar-white);
  background: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
}

.sugar-btn__icon {
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.sugar-btn:hover,
.sugar-btn:focus-visible {
  background: #dda403;
  border-color: #dda403;
  color: #fff;
}

/* Dark-on-light variant (for white sections) */
.sugar-btn--dark {
  border-color: #111;
  color: #111;
}

.sugar-btn--dark:hover,
.sugar-btn--dark:focus-visible {
  background: #111;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   GALLERY  (Figma 196:4488) - dark collage
   --------------------------------------------------------------------------- */
.sugar-gallery {
  background: #0d0d0d;
  padding-bottom: 100px;
  /* Clip the horizontal entrance travel (tiles start ±130px off their final
     spot) so right-edge tiles never push the page wider on small screens.
     Full-bleed section → desktop collage sits well inside, so this only hides
     the off-screen pre-reveal offset. */
  overflow-x: hidden;
}

.sugar-gallery__title {
  margin: 0 0 clamp(36px, 5vw, 60px);
  text-align: center;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.1;
  color: #ffffff;
}

/* Scattered photo collage — absolute tiles inside a 694:290 aspect box, exactly
   matching Figma 91:412. Because the box keeps the 694/290 ratio, every square
   tile (left/top/width/height in % of that box) stays square at any width, so
   the whole composition scales uniformly across desktop / tablet / mobile. */
.sugar-gallery__grid {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 694 / 290;
}

.sugar-gallery__item {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  /* Figma tiles have square corners */
  /* Dedicated Gallery entrance — matches the Figma prototype: each tile fades in
     while rising a short distance as the collage enters the viewport. No scale,
     no rotation, no horizontal motion. Quick, ease-out, subtle position stagger. */
  /* Premium staggered entrance — directional fade-slide reveals. Directions are
     assigned by each tile's place in the collage so neighbours enter from
     different sides. Fade + slide only: no scale, rotation, bounce or blur. */
  opacity: 0;
  transition:
    opacity 1.7s ease-out,
    transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sugar-gallery.is-in .sugar-gallery__item {
  opacity: 1;
  transform: none;
}

/* Initial offsets per direction (130px — dramatic cinematic travel):
   up = translateY(130px) · down = translateY(-130px)
   left = translateX(-130px) · right = translateX(130px) */
.sugar-gallery__item--1 {
  transform: translateX(130px);
}

/* right  */
.sugar-gallery__item--2 {
  transform: translateY(130px);
}

/* up     */
.sugar-gallery__item--3 {
  transform: translateY(-130px);
}

/* down   */
.sugar-gallery__item--4 {
  transform: translateX(-130px);
}

/* left   */
.sugar-gallery__item--5 {
  transform: translateY(-130px);
}

/* down   */
.sugar-gallery__item--6 {
  transform: translateY(130px);
}

/* up     */
.sugar-gallery__item--7 {
  transform: translateY(-130px);
}

/* down   */
.sugar-gallery__item--8 {
  transform: translateX(-130px);
}

/* left   */
.sugar-gallery__item--9 {
  transform: translateX(130px);
}

/* right  */
.sugar-gallery__item--10 {
  transform: translateX(-130px);
}

/* left   */
.sugar-gallery__item--11 {
  transform: translateY(130px);
}

/* up     */

/* Cinematic 120ms stagger in layer order. */
.sugar-gallery.is-in .sugar-gallery__item--1 {
  transition-delay: 0s;
}

.sugar-gallery.is-in .sugar-gallery__item--2 {
  transition-delay: 0.12s;
}

.sugar-gallery.is-in .sugar-gallery__item--3 {
  transition-delay: 0.24s;
}

.sugar-gallery.is-in .sugar-gallery__item--4 {
  transition-delay: 0.36s;
}

.sugar-gallery.is-in .sugar-gallery__item--5 {
  transition-delay: 0.48s;
}

.sugar-gallery.is-in .sugar-gallery__item--6 {
  transition-delay: 0.6s;
}

.sugar-gallery.is-in .sugar-gallery__item--7 {
  transition-delay: 0.72s;
}

.sugar-gallery.is-in .sugar-gallery__item--8 {
  transition-delay: 0.84s;
}

.sugar-gallery.is-in .sugar-gallery__item--9 {
  transition-delay: 0.96s;
}

.sugar-gallery.is-in .sugar-gallery__item--10 {
  transition-delay: 1.08s;
}

.sugar-gallery.is-in .sugar-gallery__item--11 {
  transition-delay: 1.2s;
}

.sugar-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sugar-gallery__item:hover img {
  transform: scale(1.05);
}

/* Exact tile geometry (px in the 694x290 Figma frame → % of the aspect box). */
.sugar-gallery__item--1 {
  left: -1.441%;
  top: 66.552%;
  width: 15.85%;
  height: 37.931%;
}

.sugar-gallery__item--2 {
  left: 4.539%;
  top: 36.207%;
  width: 11.671%;
  height: 27.931%;
}

.sugar-gallery__item--3 {
  left: 17.219%;
  top: 15.69%;
  width: 20.245%;
  height: 48.448%;
}

.sugar-gallery__item--4 {
  left: 15.418%;
  top: 66.552%;
  width: 7.061%;
  height: 16.897%;
}

.sugar-gallery__item--5 {
  left: 23.487%;
  top: 66.552%;
  width: 13.977%;
  height: 33.448%;
}

.sugar-gallery__item--6 {
  left: 38.473%;
  top: 31.552%;
  width: 24.352%;
  height: 58.276%;
}

.sugar-gallery__item--7 {
  left: 63.833%;
  top: 0.862%;
  width: 14.049%;
  height: 33.621%;
}

.sugar-gallery__item--8 {
  left: 63.833%;
  top: 36.897%;
  width: 20.389%;
  height: 48.793%;
}

.sugar-gallery__item--9 {
  left: 78.89%;
  top: 5.517%;
  width: 11.887%;
  height: 28.448%;
}

.sugar-gallery__item--10 {
  left: 85.23%;
  top: 80%;
  width: 7.997%;
  height: 19.138%;
}

.sugar-gallery__item--11 {
  left: 85.23%;
  top: 36.897%;
  width: 17.003%;
  height: 40.69%;
}

/* Tile 11 is mirrored in the design (rotate 180 + flip Y = horizontal mirror). */
.sugar-gallery__item--11 img {
  transform: scaleX(-1);
}

.sugar-gallery__item--11:hover img {
  transform: scaleX(-1) scale(1.05);
}

.sugar-gallery__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 56px);
}

.sugar-treatments__cta {
  display: flex;
  justify-content: center;
  padding: clamp(36px, 5vw, 56px) 0;
}

/* ---------------------------------------------------------------------------
   FAQ  (Figma 196:2661) - accordion over dark photo
   --------------------------------------------------------------------------- */
.sugar-faq {
  position: relative;
  padding: clamp(64px, 8vw, 100px) 0;
  overflow: hidden;
  background: #000000;
  isolation: isolate;
}

.sugar-faq__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.sugar-faq__title {
  margin: 0 0 clamp(36px, 5vw, 50px);
  text-align: center;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 55px);
  line-height: 1.1;
  color: #ffffff;
}

.sugar-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sugar-faq__item {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.sugar-faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.sugar-faq__q-text {
  font-family: var(--sugar-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: #ffffff;
}

.sugar-faq__chevron {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--sugar-gold);
  transition: transform 0.35s ease;
}

.sugar-faq__item.is-open .sugar-faq__chevron {
  transform: rotate(180deg);
}

.sugar-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.sugar-faq__a-text {
  margin: 0;
  padding: 0 28px 24px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* FAQ "Load More" — first 4 shown; extras render with [hidden]. custom.js
   reveals the button, and clicking un-hides the extras with a staggered
   fade-up. No-JS: button stays hidden. Accordion styling is unchanged. */
@keyframes sugarFaqReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sugar-faq__item--revealing {
  animation: sugarFaqReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sugar-faq__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
}

@media (prefers-reduced-motion: reduce) {
  .sugar-faq__item--revealing {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   CONTACT  (Figma 196:4513) - info + consultation form
   --------------------------------------------------------------------------- */
.sugar-contact {
  background: #0d0d0d;
  padding: clamp(64px, 8vw, 110px) 0;
}

.sugar-contact__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
}

.sugar-contact__info {
  flex: 1 1 50%;
}

.sugar-contact__title {
  margin: 0 0 24px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 55px);
  line-height: 1.1;
  color: #ffffff;
}

.sugar-contact__lead {
  margin: 0 0 40px;
  max-width: 480px;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.sugar-contact__details {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sugar-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.sugar-contact__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #ffffff;
}

.sugar-contact__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sugar-contact__label {
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
}

.sugar-contact__value {
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.sugar-contact__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #00a73e;
  border-radius: 100px;
  color: #ffffff;
  font-family: var(--sugar-serif);
  font-weight: 500;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.sugar-contact__whatsapp:hover {
  background: #00902f;
  transform: translateY(-2px);
  color: #fff;
}

a.sugar-contact__value:hover {
  color: var(--sugar-gold);
}

/* Form card — also the #sugar-book-consultation anchor target, so leave room
   above it when jumped to from another page. */
.sugar-contact__card {
  scroll-margin-top: 24px;
  flex: 1 1 50%;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
}

.sugar-contact__card-title {
  margin: 0 0 28px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  color: #000000;
}

.sugar-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sugar-form__row {
  display: flex;
  gap: 16px;
}

.sugar-form__row .sugar-form__field {
  flex: 1 1 0;
  min-width: 0;
}

.sugar-form__field {
  display: flex;
  flex-direction: column;
}

.sugar-form__field label {
  margin-bottom: 6px;
  font-family: var(--sugar-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #000000;
}

.sugar-form__field input,
.sugar-form__field select,
.sugar-form__field textarea {
  width: 100%;
  background: #fafafa;
  border: 1px solid #efefef;
  border-radius: 16px;
  padding: 12px 16px;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 14px;
  color: #000000;
  transition: border-color 0.25s ease;
}

.sugar-form__field textarea {
  resize: none;
  min-height: 106px;
  line-height: 1.45;
}

.sugar-form__field input::placeholder,
.sugar-form__field textarea::placeholder {
  color: #9a9a9a;
}

.sugar-form__field input:focus,
.sugar-form__field select:focus,
.sugar-form__field textarea:focus {
  border-color: var(--sugar-gold);
  outline: none;
}

/* Inline validation states (error markup is hidden until JS/server sets it,
   so nothing here shifts the default layout or spacing). */
.sugar-form__field input.is-invalid,
.sugar-form__field select.is-invalid,
.sugar-form__field textarea.is-invalid {
  border-color: #d64545;
}

.sugar-form__field-error {
  display: block;
  margin-top: 6px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  color: #ff3838;
}

.sugar-form__field-error[hidden] {
  display: none;
}

.sugar-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Placeholder option shown ("- Select a Service -" etc.) reads as a hint, not
   a real value — same muted grey as the text input placeholders above.
   .is-placeholder is toggled by js/custom.js whenever the select's current
   value is its empty placeholder option. */
.sugar-form__field select.is-placeholder {
  color: #9a9a9a;
}

.sugar-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 14px 28px;
  background: #000000;
  border: 0;
  border-radius: 100px;
  color: #ffffff;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.sugar-form__submit svg {
  transition: transform 0.3s ease;
}

.sugar-form__submit:hover {
  background: #dda403;
}

/* ---- Submit loader -------------------------------------------------------- */
/* The spinner <span> is injected by js/sugar-contact.js when the AJAX request
   starts and stays until the response lands. It takes the arrow's place inside
   the button (same box, 16px) so nothing around the button moves; `currentColor`
   keeps it on-brand in both button variants (black homepage pill, outlined
   contact-page pill). */
.sugar-btn__spinner {
  display: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sugarBtnSpin 0.7s linear infinite;
}

.sugar-form button[type="submit"].is-loading .sugar-btn__spinner {
  display: block;
}

/* Arrow steps aside for the spinner — same slot, no width jump. */
.sugar-form button[type="submit"].is-loading svg {
  display: none;
}

/* Disabled while in flight: keep the resting look, signal "working". */
.sugar-form button[type="submit"][disabled] {
  cursor: progress;
  opacity: 0.75;
}

@keyframes sugarBtnSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sugar-btn__spinner {
    animation-duration: 1.6s;
  }
}

/* Success confirmation shown below the form after a valid submit. */
.sugar-form__success {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--sugar-gold);
  background: rgba(221, 164, 3, 0.08);
  border-radius: 6px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #252525;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.sugar-form__success.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   FOOTER  (Figma 196:2759)
   --------------------------------------------------------------------------- */
/* Footer — Figma 196:2759 (1440x400, centred 760 column). Vertical rhythm and
   sizes taken from Dev Mode measurements. */
.sugar-footer {
  background: #000000;
  min-height: 400px;
  padding: 34px 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  clear: both;
}

.sugar-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sugar-footer__logo {
  display: block;
  line-height: 0;
}

.sugar-footer__logo img {
  width: auto;
  height: 120px;
}

.sugar-footer__name {
  margin: 5px 0 0;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #ffffff;
}

.sugar-footer__tagline {
  margin: 9px 0 0;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 3.6px;
  color: #ffffff;
}

.sugar-footer__nav {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.sugar-footer__nav a {
  font-family: var(--sugar-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.26px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}

.sugar-footer__nav a:hover,
.sugar-footer__nav a:focus-visible {
  color: var(--sugar-gold);
}

.sugar-footer__nav a.is-active {
  color: var(--sugar-gold);
}

.sugar-footer__socials {
  margin-top: 27px;
  display: flex;
  gap: 12px;
}

.sugar-footer__social {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  color: #ffffff;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.sugar-footer__social i {
  font-size: 18px;
  line-height: 1;
}

.sugar-footer__social:hover,
.sugar-footer__social:focus-visible {
  background: var(--sugar-gold);
  border-color: var(--sugar-gold);
  color: #ffffff;
}

.sugar-footer__divider {
  width: 100%;
  max-width: 760px;
  height: 1px;
  margin: 32px 0 25px;
  background: rgba(255, 255, 255, 0.12);
}

.sugar-footer__copy {
  margin: 0;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  color: #ffffff;
}

.sugar-footer__copy a {
  color: #fff;
}

.sugar-footer__copy a:hover {
  color: var(--sugar-gold);
}

/* ---------------------------------------------------------------------------
   TESTIMONIALS - Swiper coverflow (matches the Figma prototype: centre card
   enlarged + raised on top, neighbours scaled down/behind, overlapping fan,
   seamless loop). Card internal design unchanged; Swiper handles scale/depth.
   --------------------------------------------------------------------------- */
.js-testi-swiper {
  width: 100%;
  padding: 20px 0 0px !important;
  /* room for the raised centre card + shadow */
  overflow: visible;
  /* let the section clip instead, so neighbours show */
}

.js-testi-swiper .swiper-slide {
  width: 363px;
  /* Figma centre-card width; neighbours scaled by coverflow */
  height: auto;
  display: flex;
}

.js-testi-swiper .swiper-slide .sugar-tcard {
  width: 100%;
  opacity: 0.9;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.6s ease;
}

/* Centre (active) card: fully opaque, lifted, stronger shadow, on top. */
.js-testi-swiper .swiper-slide-active .sugar-tcard {
  opacity: 1;
  /* transform: translateY(-16px); */
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
}

.js-testi-swiper .swiper-slide.swiper-slide-fully-visible .sugar-tcard {
  opacity: 1;
}

.js-testi-swiper .swiper-slide-active {
  z-index: 3;
}

.js-testi-swiper .swiper-slide-prev,
.js-testi-swiper .swiper-slide-next {
  z-index: 2;
}

/* Pagination dots — pill dots below the slider, styled to the site theme.
   Inactive: white 10x10 pill. Active: gold 32x10 pill. Smooth 0.3s morph. */
.sugar-testi-pagination {
  position: static;
  /* sits in normal flow, directly below the slider */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
}

.sugar-testi-pagination .sugar-testi-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: var(--sugar-white);
  opacity: 1;
  cursor: pointer;
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

.sugar-testi-pagination .sugar-testi-dot.is-active {
  width: 32px;
  background: var(--sugar-gold);
}

.sugar-testi-pagination .sugar-testi-dot:focus-visible {
  outline: 2px solid var(--sugar-gold);
  outline-offset: 2px;
}

/* ===========================================================================
   TREATMENT SHOWCASE  (Figma 366:3212 / 3240 / 3288 / 3336 / 3396)
   Black stage with a soft radial glow; five panels
   of title (left) + arch-top image (centre) + description/price/button (right).
   =========================================================================== */
.sugar-treatments {
  position: relative;
  background: #000000;
  padding: 0 0 40px;
  overflow: hidden;
}

.sugar-treatments::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 2200px;
  height: 2200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(90, 78, 72, 0.22) 0%,
      rgba(40, 34, 31, 0.1) 32%,
      rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
  z-index: 0;
}

.sugar-treatments>* {
  position: relative;
  z-index: 1;
}

/* Panel — one full viewport; the .container grid stretches to that height so it
   can distribute the free space itself (see .sugar-treatment__grid). */
.sugar-treatment {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
}

.sugar-treatment__grid {
  display: grid;
  /* 60 / 40 content split: arch-top media in the wide column, copy in the narrow
     one. minmax(0, …fr) (not plain fr) keeps the ratio exact — the fixed 221px
     CTA in the right column can't inflate its min-content and steal width.
     Four rows, two of them flexible spacers, give the section an even vertical
     rhythm: [space] heading [space] media+copy. Both spacers are 1fr, so the
     gap above the heading always matches the gap below it, while the media
     stays flush with the bottom of the panel (its arch rises off that edge).
     row-gap is 0 here on purpose — the spacer rows ARE the spacing. */
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  grid-template-rows: minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  grid-template-areas:
    ". ."
    "head head"
    ". ."
    "media content";
  align-items: center;
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: 0;
  width: 100%;
}

/* Row 1 — treatment name in the site's standard centred section-title style
   (same serif / 700 / clamp(32px, 4vw, 55px) as Testimonials, Gallery, FAQ). */
.sugar-treatment__name {
  grid-area: head;
  justify-self: center;
  margin: 0;
  text-align: center;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.1;
  color: #ffffff;
}

.sugar-treatment__media {
  grid-area: media;
  align-self: end;
  width: 100%;
  max-width: 496px;
  height: 644px;
  margin: 0;
  overflow: hidden;
  border-radius: 100px 100px 0 0;
}

.sugar-treatment__media img,
.sugar-treatment__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sugar-treatment__content {
  grid-area: content;
  justify-self: start;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sugar-treatment__desc {
  margin: 0;
  max-width: 312px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.625;
  /* Sentence case: show the copy as written, not Capitalized Per Word. */
  color: #ffffff;
}

.sugar-treatment__price {
  margin: 0;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.43;
  color: #ffffff;
}

.sugar-treatment__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 221px;
  height: 46px;
  padding: 14px 24px;
  border: 1px solid #ffffff;
  border-radius: 107px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.sugar-treatment__btn span {
  white-space: nowrap;
}

.sugar-treatment__btn svg {
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.sugar-treatment__btn:hover,
.sugar-treatment__btn:focus-visible {
  background: var(--sugar-gold);
  border-color: var(--sugar-gold);
  color: #ffffff;
}

/* Entrance reveal — premium directional, staggered (heading↓, image↑, content→). */
.sugar-treatment__name,
.sugar-treatment__media,
.sugar-treatment__content {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sugar-treatment__name {
  transform: translateY(-32px);
}

.sugar-treatment__media {
  transform: translateY(48px);
}

.sugar-treatment__content {
  transform: translateX(48px);
}

.sugar-treatment.is-in .sugar-treatment__media {
  transition-delay: 0.05s;
}

.sugar-treatment.is-in .sugar-treatment__content {
  transition-delay: 0.15s;
}

.sugar-treatment.is-in .sugar-treatment__name,
.sugar-treatment.is-in .sugar-treatment__media,
.sugar-treatment.is-in .sugar-treatment__content {
  opacity: 1;
  transform: none;
}

/* Single pinned cinematic stage (GSAP) — desktop only. JS moves .sugar-featured
   and the 5 .sugar-treatment panels into ONE pinned .sugar-cine stage, stacked
   absolutely (100vh each, opaque, z-index by order). A single master timeline
   slides each next panel up (translateY 100% -> 0) to fully cover the previous.
   Only vertical movement; no scale/opacity/rotation. Reverted on teardown. */
.sugar-cine {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.sugar-cine>.sugar-featured,
.sugar-cine>.sugar-treatment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  /* base flush at top:0; GSAP inline transform owns the slide */
  will-change: transform;
}

.sugar-cine>.sugar-treatment {
  background: #000000;
}

/* Content always visible (the slide is the animation) — no opacity reveal. */
.sugar-cine .sugar-treatment__name,
.sugar-cine .sugar-treatment__media,
.sugar-cine .sugar-treatment__content {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Original wrapper hidden while the stage is active. */
.sugar-treatments.is-cine-hidden {
  display: none;
}

/* ===========================
   ABOUT PAGE
   =========================== */
/* Inner hero (shared by the About + FAQ page templates) + breadcrumb. */
.sugar-inner-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 46vw, 600px);
  padding: clamp(90px, 14vw, 160px) 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
  background-color: var(--sugar-ink);
  isolation: isolate;
}

.sugar-inner-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* transform: scaleX(-1); */
  z-index: -2;
  pointer-events: none;
}

.sugar-inner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sugar-overlay);
  z-index: -1;
  pointer-events: none;
}

.sugar-inner-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 192px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 1) 0.79%,
      rgba(0, 0, 0, 0.51) 60.25%,
      rgba(0, 0, 0, 0.08) 84.35%,
      rgba(0, 0, 0, 0) 99.21%);
  z-index: -1;
  pointer-events: none;
}

.sugar-inner-hero__inner {
  position: relative;
  z-index: 1;
}

.sugar-inner-hero__title {
  margin: 0 0 14px;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.08;
  color: var(--sugar-white);
}

.sugar-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--sugar-sans);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.sugar-breadcrumb__link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sugar-breadcrumb__link:hover,
.sugar-breadcrumb__link:focus-visible {
  color: var(--sugar-gold);
}

.sugar-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.sugar-breadcrumb__current {
  color: var(--sugar-gold);
}

/* About introduction — two columns: copy (left) + media (right). */
.sugar-about-intro {
  background: #ffffff;
  padding: clamp(72px, 10vw, 130px) 0;
}

.sugar-about-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.sugar-about-intro__eyebrow {
  margin: 0 0 16px;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sugar-gold);
}

.sugar-about-intro__title {
  margin: 0 0 24px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.12;
  color: var(--sugar-ink);
}

.sugar-about-intro__text {
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: #2b2b2b;
}

.sugar-about-intro__text p {
  margin: 0 0 18px;
  font-family: var(--sugar-sans);
}

/* .sugar-about-intro__text p:last-child {
  margin-bottom: 0;
  font-family: var(--sugar-sans);
  font-style: normal;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--sugar-ink);
} */

/* Right-column media frame. */
.sugar-about-intro__media {
  position: relative;
}

.sugar-about-intro__frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: #0d0d0d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

.sugar-about-intro__asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =============================================================================
   RESPONSIVE
   All media queries live here (base/global styles are above). Order: container
   widths, then max-width breakpoints descending, then reduced-motion.
   ============================================================================= */

/* ---- Container widths (Bootstrap .container overrides) -------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px !important;
  }
}

@media (min-width: 1250px) {
  .container {
    max-width: 1240px !important;
  }
}

/* ---- 1919 --------------------------------------------------------------- */
@media (max-width: 1919px) {
  .sugar-featured__disc {
    width: 750px;
    height: 750px;
    right: -70px;
    bottom: -70px;
  }

  .sugar-featured__portrait {
    width: 750px;
    height: 750px;
    right: -70px;
    bottom: -70px;
  }

  .sugar-treatment__media {
    width: 90%;
    height: 540px;
    margin: auto;
  }
}

/* ---- 1440 --------------------------------------------------------------- */
@media (max-width: 1440px) {
  .sugar-featured__portrait {
    width: 650px;
    height: 650px;
    right: -60px;
    bottom: -65px;
  }

  .sugar-featured__disc {
    width: 650px;
    height: 650px;
    right: -60px;
    bottom: -65px;
  }

  .sugar-treatment__media {
    width: 73%;
    height: 450px;
  }
}

/* ---- 1280 : keep long headings/nav from crowding on smaller laptops ----- */
@media (max-width: 1365px) {
  .sugar-treatment__media {
    width: 80%;
    height: 500px;
  }
}

/* ---- 1199 : header nav + hero accent --------------------------------- */
@media (max-width: 1199px) {
  .sugar-nav__list--left {
    gap: 28px;
  }

  .sugar-nav__list--right {
    gap: 32px;
  }

  .sugar-nav__logo img {
    height: 96px;
  }

  .sugar-hero__accent {
    gap: 16px;
    width: 46px;
  }

  .sugar-hero {
    min-height: 700px;
  }

  .sugar-featured {
    min-height: 650px;
  }

  .sugar-featured__portrait {
    width: 580px;
    height: 580px;
    right: -50px;
    bottom: -50px;
  }

  .sugar-featured__disc {
    width: 580px;
    height: 580px;
    right: -50px;
    bottom: -50px;
  }

  .sugar-treatment {
    min-height: auto;
    padding: 70px 0px;
  }

  .sugar-treatment__media {
    width: 70%;
    height: 500px;
  }

  .js-testi-swiper .swiper-slide .sugar-tcard {
    opacity: 1;
  }

  .js-testi-swiper .swiper-slide {
    width: 390px;
  }

  .sugar-gallery {
    padding-bottom: 70px;
  }
}

/* ---- 1080 : testimonials become equal wrapped cards ------------------- */
@media (max-width: 1080px) {
  .sugar-testimonials__row {
    flex-wrap: wrap;
    gap: 20px;
  }

  .sugar-tcard,
  .sugar-tcard--l,
  .sugar-tcard--m,
  .sugar-tcard--s {
    width: min(300px, 42vw);
    margin: 0;
    opacity: 1;
    z-index: auto;
  }

  .sugar-tcard__quote {
    font-size: 13px !important;
  }

  .sugar-tcard__name {
    font-size: 14px !important;
  }

  .sugar-tcard__service {
    font-size: 12px !important;
  }
}

/* ---- 1024+ : the row is the 60/40 split, so the media fills its wide column and
   the copy its narrow one (the percentage widths further up the file drive the
   stacked layout below 1024). */
@media (min-width: 1024px) {
  /* 1024–1199 sets `min-height: auto; padding: 70px 0` for the pre-pin layout;
     that padding lifts the card off the bottom edge and makes the gap above the
     heading (padding + spacer) unequal to the gap below it. Restore the
     full-viewport panel here so the grid's spacer rows own the rhythm at every
     two-column width. */
  .sugar-treatment {
    min-height: 100vh;
    padding: 0;
  }

  .sugar-treatment__media {
    width: 100%;
    max-width: none;
    margin: 0;
    /* The panel is exactly 100vh, so cap the card's height to leave room for the
       heading plus the even spacers above and below it (~61px heading + 2×100).
       Taller viewports keep the designed height untouched; short laptop
       viewports crop the card instead of pushing it past the fold. */
    max-height: calc(100vh - 260px);
  }

  .sugar-treatment__content {
    max-width: none;
  }

  .sugar-treatment__desc {
    max-width: 100%;
  }
}

/* ---- 1024–1199 -----------------------------------------------------------
   Only range where the desktop pinned treatment runs on Bootstrap's 960px
   container, so the media is shorter and the columns are tightened. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .sugar-treatment__media {
    height: 571px;
  }

  .sugar-treatment__grid {
    column-gap: 20px;
  }
}

/* ---- 1023.98 : treatment panels stack (tablet) — boundary set just below
   the GSAP min-width:1024 so 1024 stays 2-col (no pinned + stacked collision) */
@media (max-width: 1023.98px) {
  .sugar-treatment {
    padding: 50px 0;
    padding-bottom: 0;
  }

  .sugar-treatments {
    padding: 0 0 50px;
  }

  /* 60/40 collapses to one column: the flexible spacer rows are dropped (the
     panel is content-height here, not 100vh) and row-gap takes over the rhythm,
     matched to the 50px panel padding so heading → media → copy stay even. */
  .sugar-treatment__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "media"
      "content";
    justify-items: center;
    text-align: center;
    row-gap: clamp(36px, 5vw, 50px);
  }

  .sugar-treatment__media {
    align-self: center;
  }

  .sugar-treatment__content {
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .sugar-treatment__desc {
    max-width: 420px;
  }

  /* Stacked layout only: every panel already carries its own
     .sugar-treatment__btn, so the section-level CTA lands directly under the
     last panel's button — two identical "Request a Consultation" buttons to the
     same destination. Desktop keeps it: there the panels are lifted into the
     pinned .sugar-cine stage (js/treatments-scroll.js), so the CTA only appears
     after the pin releases and never sits beside a panel button. */
  .sugar-treatments__cta {
    display: none;
  }
}

/* ---- 900 : featured + contact stack ----------------------------------- */
@media (max-width: 991px) {

  /* About intro: single column, media below the copy. */
  .sugar-about-intro__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .sugar-about-intro__media {
    order: 2;
  }

  .sugar-about-intro__frame {
    aspect-ratio: 16 / 10;
    max-width: 640px;
    margin-inline: auto;
  }

  /* Featured: stack the disc under the copy, centred. */
  .sugar-featured {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    padding: clamp(56px, 9vw, 90px) 0 0;
  }

  .sugar-featured__inner {
    z-index: 2;
  }

  .sugar-featured__text {
    max-width: 560px;
    margin-inline: auto;
  }

  .sugar-featured__subtitle {
    margin-inline: auto;
  }

  .sugar-featured__media {
    position: relative;
    inset: auto;
    width: min(92vw, 500px);
    height: min(85vw, 500px);
    margin: 36px auto 0;
  }

  .sugar-featured__disc {
    left: -5%;
    width: 110%;
    height: 110%;
    right: 0;
    bottom: -60px;
  }

  .sugar-featured__portrait {
    top: auto;
    bottom: -60px;
    width: 110%;
    height: 110%;
    object-position: top;
    left: -5%;
    right: 0;
    margin: 0;
  }

  /* Contact: info + form stack full-width. */
  .sugar-contact__inner {
    flex-direction: column;
  }

  .sugar-contact__info,
  .sugar-contact__card {
    flex: none;
    width: 100%;
  }

  .sugar-hero__subtitle {
    max-width: 80%;
  }

  .sugar-treatment__media {
    width: 50%;
    height: 500px;
  }

  .sugar-statement {
    min-height: clamp(400px, 50vw, 844px);
  }

  .js-testi-swiper .swiper-slide {
    width: 295px;
  }

  .sugar-hero__btn,
  .sugar-btn {
    padding: 10px 22px;
  }
}

/* ---- 767 : mobile nav (hamburger) + hero + drop-down menu ------------- */
@media (max-width: 767px) {
  .sugar-inner-hero__bg {
    object-position: 70% 100%;
  }

  /* Theme drop-down menu → mobile slide menu. */
  .mm,
  #mm {
    display: block;
  }

  #primary-menu {
    display: none;
  }

  /* ---------------------------------------------------------------------------
     MOBILE NAV — slide-in drawer (<=767 only). The logo stays in the header bar
     (.sugar-mobile-logo); the drawer holds the links only. Link font-size,
     weight and spacing match the desktop menu. Animations, backdrop and scroll
     lock are unchanged. --------------------------------------------------------- */
  .sugar-header__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    justify-content: center;
  }

  /* Logo lives in the bar; hide the one inside the drawer. */
  .sugar-mobile-logo {
    display: inline-block;
    line-height: 0;
  }

  .sugar-mobile-logo img {
    width: 120px;
    max-width: 100%;
  }

  .sugar-nav__menu .sugar-nav__logo {
    /* !important is unavoidable: the logo span carries Bootstrap's
       .d-inline-block (display:inline-block!important) for desktop centring. */
    display: none !important;
  }

  .sugar-nav__toggle {
    display: flex;
    z-index: 210;
    /* above the panel so the X stays tappable */
  }

  /* Slide-in dark luxury panel (drawer from the right). Fixed → no layout
     shift; the header bar keeps the fixed logo + hamburger/X on top. */
  .sugar-nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(88vw, 420px);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 104px 32px calc(40px + env(safe-area-inset-bottom, 0px));
    display: block;
    background: #0d0d0d;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(105%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sugar-header.is-open .sugar-nav__menu {
    transform: translateX(0);
  }

  /* Stack the Bootstrap row vertically inside the panel. */
  .sugar-nav__menu .row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
  }

  .sugar-nav__menu .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  /* Link lists: SAME font-size/weight as the desktop menu (inherited from the
     base .sugar-nav__link), stacked with comfortable spacing. */
  .sugar-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    flex: none;
    width: 100%;
  }

  .sugar-nav__list--right {
    margin-top: 28px;
  }

  .sugar-nav__link {
    /* font-size/weight/underline accent inherited from desktop base rule */
    /* staggered entrance while the panel slides in */
    opacity: 0;
    transform: translateX(26px);
    transition:
      opacity 0.5s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.25s ease;
    font-size: 18px;
  }

  .sugar-header.is-open .sugar-nav__link {
    opacity: 1;
    transform: none;
  }

  .sugar-nav__link::after {
    display: none;
  }

  .sugar-header.is-open .sugar-nav__list--left .sugar-nav__item:nth-child(1) .sugar-nav__link {
    transition-delay: 0.12s;
  }

  .sugar-header.is-open .sugar-nav__list--left .sugar-nav__item:nth-child(2) .sugar-nav__link {
    transition-delay: 0.18s;
  }

  .sugar-header.is-open .sugar-nav__list--left .sugar-nav__item:nth-child(3) .sugar-nav__link {
    transition-delay: 0.24s;
  }

  .sugar-header.is-open .sugar-nav__list--right .sugar-nav__item:nth-child(1) .sugar-nav__link {
    transition-delay: 0.3s;
  }

  .sugar-header.is-open .sugar-nav__list--right .sugar-nav__item:nth-child(2) .sugar-nav__link {
    transition-delay: 0.36s;
  }

  .sugar-header.is-open .sugar-nav__list--right .sugar-nav__item:nth-child(3) .sugar-nav__link {
    transition-delay: 0.42s;
  }

  /* Backdrop dimmer (fades in; click to close). Below the header's stacking
     context (z 100) so the panel renders above it. */
  .sugar-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s ease,
      visibility 0.45s ease;
    z-index: 90;
  }

  .sugar-menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Animate hamburger into an X when the menu is open. */
  .sugar-header.is-open .sugar-nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .sugar-header.is-open .sugar-nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .sugar-header.is-open .sugar-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .sugar-hero__content {
    padding-bottom: 64px;
  }

  .sugar-hero__subtitle {
    max-width: 90%;
  }

  /* Decorative accent adds clutter on small screens - hide it. */
  .sugar-hero {
    min-height: 550px;
  }

  .sugar-hero__accent {
    right: 5px;
    bottom: 10px;
  }

  .sugar-hero__accent-item {
    display: block;
    width: 60%;
    height: 30px;
  }

  .sugar-featured__media {
    width: min(80vw, 400px);
    height: min(80vw, 400px);
  }

  .sugar-featured__portrait {
    height: 110%;
  }

  .sugar-hero__btn,
  .sugar-btn {
    padding: 8px 15px;
    min-width: 150px;
  }

  .sugar-gallery {
    padding-bottom: 50px;
  }

  .sugar-footer {
    padding-bottom: 20px;
    min-height: auto;
  }
}

/* ---- 600 : testimonials / FAQ / swiper slide tuning ------------------- */
@media (max-width: 600px) {
  .sugar-hero {
    min-height: 100vh;
  }

  /* About intro media frame. */
  .sugar-about-intro__frame {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .sugar-tcard,
  .sugar-tcard--l,
  .sugar-tcard--m,
  .sugar-tcard--s {
    width: min(320px, 86vw);
  }

  .sugar-faq__q {
    padding: 18px 20px;
  }

  .sugar-faq__a-text {
    padding: 0 20px 18px;
  }

  .js-testi-swiper .swiper-slide {
    width: 280px;
  }
}

/* ---- 560 : treatment media fluid ------------------------------------- */
@media (max-width: 560px) {
  .sugar-treatment__media {
    width: 88vw;
    height: auto;
    aspect-ratio: 496 / 644;
    border-radius: 70px 70px 0 0;
  }

  .sugar-treatment__content {
    padding: 0 20px;
    max-width: 100%;
  }

  .sugar-treatment__desc {
    max-width: 100%;
    font-size: 16px;
  }
}

/* ---- 520 : form row + footer ----------------------------------------- */
@media (max-width: 520px) {
  .sugar-form__row {
    flex-direction: column;
  }

  .sugar-footer__tagline {
    letter-spacing: 2.4px;
  }

  .sugar-footer__nav {
    gap: 18px;
  }

  .sugar-footer__copy {
    font-size: 12px;
  }
}

/* ---- 420 : small phones ---------------------------------------------- */
@media (max-width: 420px) {
  .sugar-hero__title {
    font-size: clamp(32px, 9vw, 40px);
  }

  .sugar-footer__nav {
    gap: 12px;
  }
}

/* ---- Reduced motion : disable all scripted entrances ------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-sugar-hero .sugar-hero__accent-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* No cinematic zoom under reduced motion. */
  .sugar-hero__bg {
    transition: none;
  }

  .sugar-hero.is-bg-zoom .sugar-hero__bg {
    transform: scaleX(-1) scale(1);
  }

  .js-sugar-hero .sugar-hero__word,
  .js-sugar-hero .sugar-hero__subword,
  .js-sugar-hero .sugar-hero__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sugar-statement__title,
  .sugar-statement__text {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sugar-gallery__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sugar-treatment__name,
  .sugar-treatment__media,
  .sugar-treatment__content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* iPad / tablet only (768–1199px): the tablet block above fixes the hero to a
   flat 700px, which is shorter than iPad viewports and leaves white space
   below. Restore a full-viewport hero here using small-viewport units (svh),
   with a vh fallback. Desktop (>=1200) and mobile (<=767) are untouched. */
@media (min-width: 768px) and (max-width: 1199px) {
  .sugar-hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* =============================================================================
   CONTACT PAGE  (Figma 646:6780 — page_templates/contact.php)
   Three sections: split hero, "We'd Love To Have You Visit" info cards, and the
   "Get in Touch" form over a darkened photo. Header/footer are the shared
   partials and are not restyled here. Figma sizes are quoted per rule.
   ============================================================================= */

/* ---- 1. Hero (646:6796) — copy left, edge-bleed media right ---------------- */
.sugar-chero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 56vw, 806px);
  /* Figma 806px @1440 */
  padding-top: 120px;
  /* clears the overlay header (Figma Hero_Right y=120) */
  overflow: hidden;
  background: #101010;
  isolation: isolate;
}

/* Media bleeds to the right edge; 620x780 in Figma, clipped by the section. */
.sugar-chero__media {
  position: absolute;
  top: 120px;
  right: 0;
  bottom: 0;
  width: min(620px, 45%);
  border-top-left-radius: 180px;
  overflow: hidden;
  z-index: -1;
}

.sugar-chero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Bottom fade into the section background (Figma gradient from 60% → #101010). */
.sugar-chero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 60%, rgb(16 16 16 / 30%) 100%);
  pointer-events: none;
}

.sugar-chero__inner {
  position: relative;
  z-index: 1;
}

.sugar-chero__content {
  max-width: 620px;
  /* Figma Hero_Left */
}

.sugar-chero__title {
  margin: 0 0 16px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(46px, 6.1vw, 88px);
  /* Figma 88px / 96px */
  line-height: 1.09;
  color: var(--sugar-white);
}

.sugar-chero__lead {
  margin: 0 0 36px;
  /* Figma gap 36 to the CTA */
  max-width: 534px;
  /* Figma HeroDescription width */
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  /* Figma 20px / 30px */
  line-height: 1.5;
  color: var(--sugar-white);
}

/* Figma "Book CTA Button": 240x50, radius 25, warm drop shadow. */
.sugar-chero__cta,
.sugar-cform__submit {
  min-width: 240px;
  min-height: 50px;
  padding: 14px 36px;
  gap: 12px;
  border-radius: 25px;
  letter-spacing: 0.5px;
}

/* ---- 2. Visit us (646:6880) — intro + three info cards --------------------- */
.sugar-cvisit {
    background: #0b0b0b;
    padding: clamp(100px, 8vw, 150px) 8vw 100px !important;
}

.sugar-cvisit__head {
  text-align: center;
}

.sugar-cvisit__title {
  margin: 0;
  padding-top: 20px;
  /* Figma SectionTitle pt */
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 55px);
  /* Figma 55px / 60px */
  line-height: 1.1;
  color: var(--sugar-white);
}

.sugar-cvisit__lead {
  margin: 24px auto 0;
  /* Figma Paragraph pt 24 */
  max-width: 750px;
  /* Figma 750.078px */
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  /* Figma 20px / 30px */
  line-height: 1.5;
  color: var(--sugar-white);
}

.sugar-cvisit__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  /* Figma gap 30 */
  margin: 50px 0 0;
  /* Figma section gap 50 */
  padding: 0;
  list-style: none;
}

.sugar-cvisit__card {
  flex: 0 1 350px;
  /* Figma card width 350 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: #141414;
  border: 1px solid rgba(221, 164, 3, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sugar-cvisit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--sugar-white);
}

.sugar-cvisit__label {
  font-family: var(--sugar-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--sugar-gold);
}

.sugar-cvisit__value {
  font-family: var(--sugar-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--sugar-white);
  text-decoration: none;
}

/* Figma wraps the address after "Melbourne"; the other two values fit one line. */
.sugar-cvisit__value--address {
  max-width: 270px;
}

/* Clickable values (tel:, mailto:) — pointer + gold + underline so
   the affordance reads on desktop; the same colour change fires on tap focus. */
a.sugar-cvisit__value {
  cursor: pointer;
  transition: color 0.25s ease;
}

a.sugar-cvisit__value:hover,
a.sugar-cvisit__value:focus-visible {
  color: var(--sugar-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* iOS/Safari data detectors wrap bare numbers and dates in their own
   <a href="tel:"> inside our markup and paint it link-blue. Inherit instead, so
   anything Safari links keeps the intended white. Our own values are real
   anchors (rules above), so this only ever hits the injected ones. */
.sugar-cvisit__value a,
.sugar-cvisit__label a,
.sugar-contact__value a,
.sugar-contact__label a {
  color: inherit;
  text-decoration: none;
}

/* Card hover / tap — lift + gold accent. Only paint properties and a transform
   change, so the flex sizing (350px desktop, 1 1 200px tablet, full-width
   phones) and every measured Figma value stay exactly as they are. Touch
   devices get the same look through .is-hover, toggled in custom.js. */
.sugar-cvisit__card {
  transition: transform 0.35s ease, background-color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.sugar-cvisit__card:hover,
.sugar-cvisit__card:focus-within,
.sugar-cvisit__card.is-hover {
  transform: translateY(-6px);
  background: #191919;
  border-color: rgba(221, 164, 3, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.sugar-cvisit__card:hover .sugar-cvisit__icon,
.sugar-cvisit__card:focus-within .sugar-cvisit__icon,
.sugar-cvisit__card.is-hover .sugar-cvisit__icon {
  border-color: rgba(221, 164, 3, 0.6);
  color: var(--sugar-gold);
}

.sugar-cvisit__icon {
  transition: border-color 0.35s ease, color 0.35s ease;
}

/* Phones lift less — the cards are full width and stacked, so a big shift
   reads as a jump rather than a hover. */
@media (max-width: 767px) {

  .sugar-cvisit__card:hover,
  .sugar-cvisit__card:focus-within,
  .sugar-cvisit__card.is-hover {
    transform: translateY(-3px);
  }
}

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

  .sugar-cvisit__card,
  .sugar-cvisit__icon {
    transition: none;
  }

  .sugar-cvisit__card:hover,
  .sugar-cvisit__card:focus-within,
  .sugar-cvisit__card.is-hover {
    transform: none;
  }
}

/* ---- 3. Get in touch (652:7321) — form over a darkened photo --------------- */
.sugar-cform {
  position: relative;
  padding: clamp(64px, 8vw, 100px) 0;
  /* Figma py 100 */
  overflow: hidden;
  background: #101010;
  isolation: isolate;
}

.sugar-cform__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
}

.sugar-cform::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  /* Figma overlay */
  z-index: -1;
  pointer-events: none;
}

/* Not a .container: the theme forces `.container { max-width: 1240px }` with
   !important, and the Figma form column is 1140 wide. Same 15px side padding. */
.sugar-cform__inner {
  position: relative;
  width: 100%;
  max-width: 1170px;
  /* 1140 content + 2×15 padding */
  margin-inline: auto;
  padding-inline: 15px;
}

.sugar-cform__head {
  text-align: center;
  margin-bottom: 50px;
  /* Figma gap 50 */
}

.sugar-cform__title {
  margin: 0 0 20px;
  /* Figma gap 20 */
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 55px);
  /* Figma 55px */
  line-height: 1.15;
  color: var(--sugar-white);
}

.sugar-cform__lead {
  margin: 0 auto;
  max-width: 663px;
  /* Figma 662.469px */
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  /* Figma 20px / 30px */
  line-height: 1.5;
  color: var(--sugar-white);
}

/* Dark variant of the shared .sugar-form — scoped so the homepage card form
   (light) is untouched. */
.sugar-cform__form {
  gap: 20px;
  /* Figma row gap 20 */
}

.sugar-cform__form .sugar-form__row {
  gap: 20px;
}

/* Fields are ACF-ordered and each marked half or full width, so the two-column
   Figma layout survives whatever field list the editor configures. */
.sugar-cform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  /* Figma row/column gap 20 */
}

.sugar-cform__fields .sugar-form__field--full {
  grid-column: 1 / -1;
}

/* Required marker — only rendered for fields switched to Required in ACF. */
.sugar-form__required {
  margin-left: 2px;
  color: var(--sugar-gold);
}

.sugar-cform__form .sugar-form__field label {
  margin-bottom: 6px;
  font-size: 16px;
  /* Figma label 16px, tracking 0.3 */
  letter-spacing: 0.3px;
  color: var(--sugar-white);
}

.sugar-cform__form .sugar-form__field input,
.sugar-cform__form .sugar-form__field select,
.sugar-cform__form .sugar-form__field textarea {
  min-height: 46px;
  /* Figma input height 46 */
  padding: 13px 17px;
  background: transparent;
  border: 1px solid #585858;
  border-radius: 16px;
  font-family: var(--sugar-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: var(--sugar-white);
}

/* Dropdown fields (ACF input type "Dropdown"): white caret on the dark panel,
   and readable options in the native popup. */
.sugar-cform__form .sugar-form__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  padding-right: 40px;
}

.sugar-cform__form .sugar-form__field select option {
  color: #101010;
}

.sugar-cform__form .sugar-form__field textarea {
  min-height: 106px;
  /* Figma text area height */
  resize: vertical;
}

.sugar-cform__form .sugar-form__field input::placeholder,
.sugar-cform__form .sugar-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.sugar-cform__form .sugar-form__field input:focus,
.sugar-cform__form .sugar-form__field select:focus,
.sugar-cform__form .sugar-form__field textarea:focus {
  border-color: var(--sugar-gold);
}

/* Status messages: the success copy is server-rendered after a no-JS submit,
   so it must be visible without the JS fade class too. */
.sugar-cform__success:not([hidden]) {
  opacity: 1;
  transform: none;
}

.sugar-cform__actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  /* Figma gap 50 between fields and CTA (incl. row gap) */
}

.sugar-cform__submit {
  background: transparent;
}

/* Status messages sit on the dark photo, not the white card. */
.sugar-cform__success,
.sugar-cform__error {
  max-width: 663px;
  margin-inline: auto;
  text-align: center;
  color: var(--sugar-white);
}

/* ---- Contact page responsive --------------------------------------------- */
@media (max-width: 991px) {

  /* Hero: media drops below the copy, full width (media is first in the DOM
     for the desktop overlay, so re-order it here). */
  .sugar-chero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: clamp(120px, 18vw, 160px);
  }

  .sugar-chero__media {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: clamp(280px, 58vw, 460px);
    margin-top: clamp(32px, 6vw, 56px);
    border-top-left-radius: 100px;
    z-index: 0;
  }

  .sugar-chero__inner {
    order: 1;
  }

  .sugar-chero__content {
    max-width: none;
  }

  .sugar-chero__lead {
    max-width: 560px;
  }

  /* Info cards: keep the three-up row, sharing the narrower width evenly. */
  .sugar-cvisit__card {
    flex: 1 1 200px;
  }

  .sugar-cvisit__value--address {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .sugar-cvisit__cards {
    margin-top: 36px;
    gap: 20px;
  }

  .sugar-cvisit__card {
    flex: 1 1 100%;
  }

  .sugar-cvisit__value {
    max-width: none;
  }

  .sugar-cform__head {
    margin-bottom: 32px;
  }

  /* .sugar-form__row already stacks at 480; contact form stacks a step earlier
     so the 46px inputs keep a usable width on phones. */
  .sugar-cform__form .sugar-form__row {
    flex-direction: column;
  }

  /* Half-width fields go full width — one column on phones. */
  .sugar-cform__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .sugar-cform__actions {
    margin-top: 20px;
  }

  .sugar-chero__cta,
  .sugar-cform__submit {
    min-width: 0;
    width: 100%;
    max-width: 280px;
    padding: 12px 28px;
  }
}

/* =============================================================================
   TREATMENTS PAGE  (Figma 600:3126, page_templates/treatments.php)
   Dark theme throughout (#101010 / #0c0c0c / #0e0e0e panels), same tokens/
   fonts/.container/.js-reveal as the rest of the site.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. HERO  (Figma 600:3152)
   --------------------------------------------------------------------------- */
.sugar-tr-hero {
  position: relative;
  background: #101010;
  padding-top: 170px;
  padding-bottom: 80px;
  overflow: hidden;
}

.sugar-tr-hero__inner {
  display: flex;
  align-items: center;
  gap: 60px;
}

.sugar-tr-hero__left {
  flex: 0 1 620px;
  min-width: 0;
}

.sugar-tr-hero__title {
  margin: 0 0 16px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.05;
  color: var(--sugar-white);
}

.sugar-tr-hero__desc {
  margin: 0 0 36px;
  max-width: 534px;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.sugar-tr-hero__cta {
  margin-bottom: 36px;
}

.sugar-tr-hero__stats {
  display: flex;
  gap: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sugar-tr-hero__stat-value {
  margin: 0 0 4px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: 32px;
  color: var(--sugar-gold);
}

.sugar-tr-hero__stat-label {
  margin: 0;
  font-family: var(--sugar-sans);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--sugar-white);
}

.sugar-tr-hero__right {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  position: relative;
}

.sugar-tr-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-top-left-radius: 180px;
}

/* ---------------------------------------------------------------------------
   2. "THE ART OF BEAUTY" CATEGORY EXPLORER  (Figma 801:3342)
   --------------------------------------------------------------------------- */
.sugar-tr-explorer {
  position: relative;
  background: #0c0c0c;
  padding: 100px 0 0;
}

.sugar-tr-explorer__head {
  text-align: center;
  margin-bottom: 48px;
}

.sugar-tr-explorer__title {
  margin: 0 0 8px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 3.5vw, 44px);
  color: var(--sugar-white);
}

.sugar-tr-explorer__subtitle {
  margin: 0 0 32px;
  font-family: var(--sugar-sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
}

.sugar-tr-explorer__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.sugar-tr-explorer__tab-dot {
  font-size: 8px;
  color: var(--sugar-gold);
  line-height: 1;
}

.sugar-tr-explorer__tab {
  padding: 6px 2px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--sugar-white);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sugar-tr-explorer__tab:hover {
  color: var(--sugar-gold);
}

.sugar-tr-explorer__tab.is-active {
  color: var(--sugar-gold);
  border-bottom-color: var(--sugar-gold);
}

/* Full-bleed hairline under the tab row (outside .container on purpose). */
.sugar-tr-explorer__tabs-rule {
  margin-top: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sugar-tr-explorer__stage {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 900px;
  overflow: hidden;
}

.sugar-tr-explorer__panel {
  /* Desktop: every panel is stacked full-bleed over the stage so JS can
     slide the incoming/outgoing pair past each other horizontally instead
     of the old instant [hidden] snap. Mobile (see max-width:991px below)
     drops back to normal document flow — a fixed-height absolute stack
     doesn't work once the layout is variable-height stacked content. */
  /* Fills .stage exactly (which is itself capped to 1440px and centered —
     see above — so the heading/nav, anchored via clamp() to *this* box's
     edges, never drift away from the image on very wide monitors). */
  position: absolute;
  inset: 0;
  min-height: 900px;
  display: flex;
  align-items: center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

.sugar-tr-explorer__panel:not(.is-active) {
  pointer-events: none;
}

.sugar-tr-explorer__media {
  position: relative;
  flex: 0 0 615px;
  max-width: 46%;
  aspect-ratio: 615 / 500;
  margin-left: clamp(24px, 8vw, 117px);
  border-radius: 24px;
  overflow: hidden;
  /* Soft placeholder while a photo is still downloading, so a not-yet-cached
     panel never flashes a hard empty hole. */
  background: rgba(255, 255, 255, 0.04);
}

.sugar-tr-explorer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Watermark + treatment name sit together as their own heading column, top
   right of the panel — NOT inside the description card (Figma 801:3342: the
   card only ever holds the description + price). */
.sugar-tr-explorer__heading {
  position: absolute;
  /* top: 130px; */
  top: 40px;
  right: clamp(24px, 6vw, 100px);
  z-index: 1;
  text-align: right;
  max-width: 46%;
}

.sugar-tr-explorer__watermark {
  display: block;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--sugar-gold);
  opacity: 0.1;
  pointer-events: none;
  white-space: nowrap;
}

.sugar-tr-explorer__name {
  display: inline-block;
  position: relative; /* anchors the gold underline (::after) to the name itself on every layout */
  margin: 22px 0 0;
  padding-bottom: 14px;
  /* border-bottom: 1px solid var(--sugar-gold); */
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 45px);
  line-height: 1.1;
  color: var(--sugar-gold);
  white-space: nowrap;
}
h3.sugar-tr-explorer__name:after {
    content: "";
    width: 120px;
    height: 1px;
    border-bottom: 1px solid var(--sugar-gold);
    position: absolute;
    bottom: 0;
    right: 0;
}

/* .sugar-tr-explorer__panel-text {
  position: relative;
  z-index: 2;
  flex: 0 1 479px; */
  /* Negative margin pulls the card left, on top of the image's right edge —
     matches the overlapping card in the Figma design (image z-index below,
     card painted after it in DOM order so it sits on top naturally). */
  /* margin-left: clamp(-100px, -7vw, -48px);
  margin-right: clamp(24px, 6vw, 100px);
  padding: 36px 40px;
  background: rgba(15, 15, 15, 0.94);
  border: 1.5px solid var(--sugar-gold);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
} */

.sugar-tr-explorer__panel-text {
    position: relative;
    z-index: 2;
    /* flex: 0 1 479px; */
    margin-left: clamp(-100px, -7vw, -48px);
    margin-right: clamp(24px, 16vw, 200px);
    padding: 36px 40px;
    background: rgba(15, 15, 15, 0.94);
    border: 1.5px solid var(--sugar-gold);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.sugar-tr-explorer__desc {
  margin: 0 0 20px;
  font-family: var(--sugar-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--sugar-white);
}

.sugar-tr-explorer__price {
  margin: 0;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sugar-gold);
}

/* Text label + round icon, no pill/background of their own — the exported
   SVGs (icon-prev/icon-next) are already complete 50x50 circle+arrow
   components (outlined gold / solid gold).

   Bounded (not infinite-loop) carousel: JS toggles .is-disabled at either
   end of the current category's treatment list — muted/inert at the start
   (Prev) or end (Next), gold + interactive everywhere in between. */
.sugar-tr-explorer__nav {
  position: absolute;
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sugar-tr-explorer__nav-label {
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--sugar-gold);
  transition: color 0.3s ease;
}

.sugar-tr-explorer__nav img {
  display: block;
  width: 50px;
  height: 50px;
  transition: transform 0.25s ease, filter 0.3s ease;
}

.sugar-tr-explorer__nav:hover img {
  transform: scale(1.08);
}

/* Muted / inert — the far end of the list in that direction; no more
   treatments to step to. */
.sugar-tr-explorer__nav.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sugar-tr-explorer__nav.is-disabled .sugar-tr-explorer__nav-label {
  color: rgba(255, 255, 255, 0.4);
}

.sugar-tr-explorer__nav.is-disabled img {
  filter: grayscale(1);
}

.sugar-tr-explorer__nav--prev {
  left: clamp(24px, 6vw, 100px);
}

/* Both icons ship pointing right — flip prev so its arrow reads correctly. */
.sugar-tr-explorer__nav--prev img {
  transform: scaleX(-1);
}

.sugar-tr-explorer__nav--prev:hover img {
  transform: scaleX(-1) scale(1.08);
}

.sugar-tr-explorer__nav--next {
  right: clamp(24px, 6vw, 100px);
}

/* ---------------------------------------------------------------------------
   3. OUTRO — "Begin Your Transformation"  (Figma 623:3639)
   --------------------------------------------------------------------------- */
.sugar-tr-outro {
  background: #101010;
  padding: 80px 0;
  text-align: center;
  /* Gold hairline separators above/below — the surrounding sections are all
     near-identical darks, so without these the CTA band visually bleeds into
     its neighbours (especially on stacked mobile layouts). */
  border-top: 1px solid rgba(221, 164, 3, 0.35);
  border-bottom: 1px solid rgba(221, 164, 3, 0.35);
}

.sugar-tr-outro__title {
  margin: 0 0 12px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 55px);
  color: var(--sugar-white);
}

.sugar-tr-outro__subtitle {
  margin: 0 0 28px;
  font-family: var(--sugar-sans);
  font-weight: 300;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   4. ADVANCED TREATMENT SOLUTIONS  (Figma 634:3702)
   --------------------------------------------------------------------------- */
.sugar-tr-advanced {
  position: relative;
  background: #0e0e0e;
  padding: 64px 0 80px;
  overflow: hidden;
}

.sugar-tr-advanced__title {
  margin: 0 0 40px;
  text-align: center;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--sugar-white);
}

.sugar-tr-advanced__row {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.sugar-tr-advanced__list {
  flex: 0 0 370px;
  margin: 0;
  padding: 0;
  list-style: none;
      display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}

.sugar-tr-advanced__item {
  width: 100%;
  padding: 14px 24px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  text-align: left;
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.sugar-tr-advanced__item:hover {
  color: rgba(255, 255, 255, 0.8);
}

.sugar-tr-advanced__item.is-active {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--sugar-gold);
  color: var(--sugar-white);
}

.sugar-tr-advanced__panels {
  position: relative;
  flex: 1 1 0;
  min-height: 580px;
  overflow: hidden;
  border-radius: 12px;
}

.sugar-tr-advanced__panel {
  /* Desktop: panels stack full-bleed so JS can slide the incoming/outgoing
     pair past each other (see .sugar-tr-explorer__panel above — same
     technique, sbl_Tr_slider() drives both). */
  position: absolute;
  inset: 0;
  height: 580px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

.sugar-tr-advanced__panel:not(.is-active) {
  pointer-events: none;
}

.sugar-tr-advanced__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sugar-tr-advanced__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Full-height scrim: a light wash over the whole photo (tames very bright
     images on every tab) deepening steeply toward the bottom where the
     index/name/description sit — keeps the text legible without hiding the
     treatment photo, matching the Figma look. */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 26%,
    rgba(0, 0, 0, 0.48) 52%,
    rgba(0, 0, 0, 0.26) 76%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.sugar-tr-advanced__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px;
  z-index: 2;
}

.sugar-tr-advanced__index {
  display: inline-block;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sugar-gold);
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--sugar-gold);
}

.sugar-tr-advanced__name {
  margin: 0 0 16px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--sugar-white);
}

.sugar-tr-advanced__desc {
  margin: 0 0 16px;
  max-width: 700px;
  font-family: var(--sugar-sans);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.sugar-tr-advanced__note {
  display: inline-block;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sugar-gold);
  text-decoration: none;
}

/* "Read More" description toggle — desktop viewports show the full text, so
   the button only appears on the clamped tablet/mobile layouts (see the
   max-width:1199px responsive block below). */
.sugar-tr-advanced__readmore {
  display: none;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sugar-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.sugar-tr-advanced__readmore-less {
  display: none;
}

.sugar-tr-advanced__panel.is-expanded .sugar-tr-advanced__readmore-more {
  display: none;
}

.sugar-tr-advanced__panel.is-expanded .sugar-tr-advanced__readmore-less {
  display: inline;
}

/* ---------------------------------------------------------------------------
   5. "THE SUGAR BEAUTY EXPERIENCE"  (Figma 600:3294)
   --------------------------------------------------------------------------- */
.sugar-tr-experience {
  background: #101010;
  padding: 100px 0;
}

.sugar-tr-experience__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}

.sugar-tr-experience__media {
  flex: 0 0 580px;
  max-width: 46%;
  aspect-ratio: 580 / 600;
  border-radius: 20px;
  overflow: hidden;
}

.sugar-tr-experience__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sugar-tr-experience__content {
  flex: 1 1 0;
  min-width: 0;
}

.sugar-tr-experience__title {
  margin: 0 0 24px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 40px);
  color: var(--sugar-white);
}

.sugar-tr-experience__text {
  margin: 0 0 32px;
  font-family: var(--sugar-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.sugar-tr-experience__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sugar-tr-experience__check-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sugar-tr-experience__check-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--sugar-gold);
  margin-top: 4px;
}

.sugar-tr-experience__check-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sugar-tr-experience__check-text strong {
  font-family: var(--sugar-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--sugar-white);
}

.sugar-tr-experience__check-text span {
  font-family: var(--sugar-sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 470px;
}

/* ---------------------------------------------------------------------------
   6. "OUR REAL RESULTS" — before/after slider  (Figma 646:6755)
   --------------------------------------------------------------------------- */
.sugar-tr-results {
  background: #0c0c0c;
  padding: 100px 0;
  text-align: center;
}

.sugar-tr-results__title {
  margin: 0 0 48px;
  font-family: var(--sugar-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 40px);
  color: var(--sugar-white);
}

.sugar-tr-results__stage {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Result slides stay in normal flow (the quote's line count varies, so a
   fixed/absolute stack would need JS height-syncing for no real benefit
   here) — a plain crossfade keeps switching smooth without that complexity. */
.sugar-tr-results__slide {
  transition: opacity 0.35s ease;
}

.sugar-tr-results__slide:not(.is-active) {
  opacity: 0;
}

.sugar-tr-ba {
  position: relative;
  aspect-ratio: 900 / 500;
  border-radius: 16px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background: #1a1a1a;
}

/* Classic reveal comparison (matches the approved staging behaviour): the
   BEFORE photo fills the box, the AFTER photo sits on top clipped from the
   divider rightward — dragging the handle wipes the after photo across. */
.sugar-tr-ba__pane {
  position: absolute;
  inset: 0;
}

.sugar-tr-ba__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sugar-tr-ba__pane--after {
  clip-path: inset(0 0 0 50%);
  /* Smooths a click-to-set jump to the new divider position; the JS drops
     this (adds .is-dragging) while actively dragging so the handle tracks
     the pointer 1:1 with no lag. */
  transition: clip-path 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.sugar-tr-ba.is-dragging .sugar-tr-ba__pane--after {
  transition: none;
}

.sugar-tr-ba__tag {
  position: absolute;
  bottom: 16px;
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--sugar-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sugar-tr-ba__tag--before {
  left: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--sugar-white);
}

.sugar-tr-ba__tag--after {
  /* Per Figma: the AFTER label sits at the bottom immediately RIGHT of the
     center divider (not in the far corner). It lives inside the clipped
     after pane, so dragging the divider left keeps it in place and dragging
     past it wipes it away naturally with the photo. */
  left: calc(50% + 20px);
  background: var(--sugar-gold);
  color: #101010;
}

.sugar-tr-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  background: var(--sugar-gold);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Grabbable — this is what the JS drag listeners are bound to. A wider
     transparent ::before extends the actual touch/click target well past
     the visible 6px bar (real hit-target, not just the thin gold line). */
  cursor: ew-resize;
  /* touch-action:none — a touch drag that starts on the handle must never
     turn into a page scroll (the JS also preventDefaults touchmove while
     dragging as a fallback). */
  touch-action: none;
  transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.sugar-tr-ba.is-dragging .sugar-tr-ba__handle {
  transition: none;
}

.sugar-tr-ba__handle::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -20px;
  right: -20px;
}

.sugar-tr-ba__handle img {
  width: 49.5px;
  height: 49.5px;
  padding: 12px;
  border-radius: 50%;
  background: var(--sugar-gold);
  border: 2.5px solid var(--sugar-white);
  box-sizing: border-box;
}

.sugar-tr-results__quote {
  margin: 32px 0 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sugar-tr-results__quote p {
  margin: 0 0 12px;
  font-family: var(--sugar-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.sugar-tr-results__quote cite {
  font-family: var(--sugar-sans);
  font-style: normal;
  font-size: 14px;
}

.sugar-tr-results__quote-name {
  color: var(--sugar-gold);
  font-weight: 600;
}

.sugar-tr-results__quote-sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.4);
}

.sugar-tr-results__quote-meta {
  color: rgba(255, 255, 255, 0.55);
}

/* Icon-only round buttons — results-arrow-prev/next.svg are already complete
   50x50 circle+arrow components (outlined gold / solid gold), same asset
   pattern as the Art of Beauty explorer nav — no extra pill background. */
.sugar-tr-results__nav {
  position: absolute;
  /* Vertically centered on the COMPARISON IMAGE, not the whole slide (the
     quote sits below) — the image is 500px tall at every width the side
     arrows are shown (stage caps at 900px, aspect 900/500), per Figma. */
  top: 250px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s ease;
  z-index: 3;
}

.sugar-tr-results__nav img {
  display: block;
  width: 100%;
  height: 100%;
}

.sugar-tr-results__nav:hover {
  transform: translateY(-50%) scale(1.08);
}

.sugar-tr-results__nav--prev {
  left: -80px;
}

/* Both icons ship pointing right — flip prev so its arrow reads correctly
   (same asset/technique as the Art of Beauty explorer nav). */
.sugar-tr-results__nav--prev img {
  transform: scaleX(-1);
}

.sugar-tr-results__nav--prev:hover img {
  transform: scaleX(-1) scale(1.08);
}

.sugar-tr-results__nav--next {
  right: -80px;
}

/* ---------------------------------------------------------------------------
   TREATMENTS PAGE — responsive
   Covers 300px → 3200px. Wide screens (>1440px) are already handled by the
   capped .container / .sugar-tr-explorer__stage boxes; the blocks below step
   the layout down through desktop-small (1199), tablet (991), mobile (767)
   and small-mobile (479).
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {

 .sugar-tr-results__navrow {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
  }

  .sugar-tr-results__nav {
    position: static;
    transform: none;
  }

  .sugar-tr-results__nav:hover {
    transform: none;
  }

  /* Advanced Solutions: on tablet/iPad the description no longer floods the
     photo — clamp it to 3 lines and hand the rest to the Read More toggle
     (JS flips .is-expanded on the panel). */
  .sugar-tr-advanced__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .sugar-tr-advanced__panel.is-expanded .sugar-tr-advanced__desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Own line, above the price/availability note. */
  .sugar-tr-advanced__readmore {
    display: block;
    width: fit-content;
  }
}

@media (max-width: 991px) {
  .sugar-tr-hero {
    padding-top: 140px;
  }

  .sugar-tr-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  /* In the stacked column layout the desktop flex-basis (620px) would become
     a 620px HEIGHT, leaving a large empty band between the copy and the
     photo — size to content instead. */
  .sugar-tr-hero__left {
    flex: 0 1 auto;
    width: 100%;
  }

  .sugar-tr-hero__right {
    width: 100%;
    align-self: auto;
  }

  /* In-flow image at its natural portrait ratio, height-capped — no more
     stretched empty band pushing the photo (and the rest of the page) far
     below the hero copy. */
  .sugar-tr-hero__image {
    position: relative;
    inset: auto;
    min-height: 0;
    height: auto;
    aspect-ratio: 620 / 686;
    max-height: 520px;
    border-top-left-radius: 120px;
  }

  .sugar-tr-explorer__panel {
    position: static;
    inset: auto;
    flex-direction: column;
    /* Base rule's align-items:center (desktop, vertical centering in the
       row layout) would otherwise shrink-to-fit + center every stacked
       child here — .heading needs full width for text-align:left to have
       anything to align within. */
    align-items: stretch;
    width: 100%;
    flex: 0 0 100%;
    min-height: 0;
    padding: 40px 0 0;
    /* Stacked layout switches with a slide + fade (JS drives the transform
       from the step direction) — same directional feel as the desktop
       carousel, adapted to variable-height in-flow panels. */
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sugar-tr-explorer__panel:not(.is-active) {
    opacity: 0;
  }

  .sugar-tr-explorer__stage,
  .sugar-tr-explorer__panel {
    min-height: 0;
  }

  /* Stage becomes a wrapping flex box: the active panel takes the full row,
     and the (now static) Prev/Next buttons sit together, centered, on the
     row below it — no more drifting/misaligned arrows. */
  .sugar-tr-explorer__stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 48px;
  }

  /* Mobile content order: text (category + name) → image → text (description
     + price) — never two images or two text blocks stacked together. */
  .sugar-tr-explorer__heading {
    order: -1;
    position: static;
    max-width: 100%;
    margin: 20px 24px 0;
    text-align: left;
  }

  .sugar-tr-explorer__media {
    /* No width:100% here — with margin:0 24px that overflowed the viewport
       by 48px (only clipped from view, not visible scroll, once .stage
       gained overflow:hidden for the slide transition). align-items:stretch
       on the panel (above) + width:auto already sizes this to
       "container minus its own margins", which is what we want. */
    max-width: 100%;
    margin: 24px 24px 0;
    flex-basis: auto;
  }

  .sugar-tr-explorer__panel-text {
    margin: 24px 24px 0;
    flex-basis: auto;
  }

  /* The huge desktop watermark becomes a small gold category eyebrow
     ("BROWS", "LIPS", …) above each treatment name, so the category is
     always visible on mobile. */
  .sugar-tr-explorer__watermark {
    display: block;
    font-family: var(--sugar-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: normal;
  }

  .sugar-tr-explorer__name {
    white-space: normal;
    margin-top: 10px;
  }

  .sugar-tr-explorer__nav {
    position: static;
    margin: 28px 14px 0;
  }

  .sugar-tr-advanced__row {
    flex-direction: column;
  }

  .sugar-tr-advanced__list {
    flex: 0 0 auto;
    display: flex;
    /* Base rule is the desktop sidebar: a space-between COLUMN — here the
       pills flow as wrapping rows instead. */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .sugar-tr-advanced__item {
    /* Wrapping pill chips (the base width:100% is for the desktop sidebar
       column and would stack one pill per row here). */
    width: auto;
    border-radius: 100px;
    border-left: none;
    background: rgba(255, 255, 255, 0.04);
  }

  /* The desktop active state was a gold LEFT border (removed on the pill
     shape) — a gold ring + tint marks the active pill instead. */
  .sugar-tr-advanced__item.is-active {
    background: rgba(221, 164, 3, 0.12);
    box-shadow: inset 0 0 0 1px var(--sugar-gold);
  }

  .sugar-tr-advanced__panels {
    /* flex:auto — the desktop `flex: 1 1 0` would LOCK this wrapper's height
       to its min-height in the stacked column layout, and overflow:hidden
       then clips whatever the expanded panel adds (the price/note was the
       first casualty). Sized by content, it grows with the panel. */
    flex: 0 0 auto;
    height: auto;
    min-height: 420px;
  }

  .sugar-tr-advanced__panel {
    /* Relative (not static): the absolute photo/scrim anchor to THIS panel.
       Flex column with the content pinned to the bottom edge — and, unlike
       the old absolute-positioned content, the content is in normal flow,
       so when Read More expands the text the PANEL GROWS with it instead of
       the text (and its number) spilling out over the top of the photo. */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    inset: auto;
    height: auto;
    min-height: 420px;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sugar-tr-advanced__panel:not(.is-active) {
    opacity: 0;
  }

  .sugar-tr-advanced__content {
    position: relative;
    inset: auto;
    z-index: 2;
  }

  .sugar-tr-experience__inner {
    flex-direction: column;
  }

  /* Text first, image second — the preceding Advanced section already ends
     on a photo, so this keeps the mobile text/image/text/image rhythm.
     flex:auto — the desktop flex-basis (580px) would become a fixed 580px
     HEIGHT in this column layout; the aspect-ratio sizes it instead. */
  .sugar-tr-experience__media {
    order: 2;
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* With 3 result slides the Prev/Next controls must stay usable on touch
     layouts — they drop out of the absolute side rails into a centered row
     under the testimonial (same treatment as the Art of Beauty nav). */
  .sugar-tr-results__navrow {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
  }

  .sugar-tr-results__nav {
    position: static;
    transform: none;
  }

  .sugar-tr-results__nav:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  /* -- Mobile: the whole page reads center-aligned ------------------------ */
  .sugar-tr-hero {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .sugar-tr-hero__inner {
    gap: 32px;
    align-items: center;
  }

  .sugar-tr-hero__left {
    width: 100%;
    text-align: center;
  }

  .sugar-tr-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .sugar-tr-hero__stats {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .sugar-tr-explorer__tabs {
    gap: 16px;
  }

  .sugar-tr-explorer__heading,
  .sugar-tr-explorer__panel-text {
    text-align: center;
  }

  h3.sugar-tr-explorer__name:after {
    right: 50%;
    transform: translateX(50%);
  }

  /* Phones: one tab per row (client preference) — the wrapping multi-pill
     rows stay on tablet only. */
  .sugar-tr-advanced__list {
    flex-direction: column;
    justify-content: flex-start;
  }

  .sugar-tr-advanced__item {
    width: 100%;
    text-align: center;
  }

  .sugar-tr-advanced__content {
    text-align: center;
  }

  .sugar-tr-advanced__readmore {
    margin-left: auto;
    margin-right: auto;
  }

  .sugar-tr-experience__content {
    text-align: center;
  }

  /* Checklist stays readable left-aligned inside, but the block itself is
     centered under the centered heading/text. */
  .sugar-tr-experience__checklist {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* Visit Us / Contact (shared component) — centered only on this page's
     mobile layout; the homepage keeps its own styling. */
  .sugar-treatmentspage .sugar-contact__info {
    text-align: center;
  }

  .sugar-treatmentspage .sugar-contact__details {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .sugar-treatmentspage .sugar-contact__whatsapp {
    margin-left: auto;
    margin-right: auto;
  }

  .sugar-treatmentspage .sugar-contact__card-title {
    text-align: center;
  }
}

/* Small phones (down to 300px): tighter type + spacing, nothing overflows. */
@media (max-width: 479px) {
  .sugar-tr-hero {
    padding-top: 104px;
  }

  .sugar-tr-hero__title {
    font-size: clamp(34px, 12vw, 44px);
  }

  .sugar-tr-hero__desc {
    font-size: 16px;
  }

  .sugar-tr-hero__image {
    border-top-left-radius: 90px;
  }

  .sugar-tr-explorer {
    padding-top: 72px;
  }

  .sugar-tr-explorer__tabs {
    gap: 10px;
  }

  .sugar-tr-explorer__tab {
    font-size: 14px;
  }

  .sugar-tr-explorer__heading,
  .sugar-tr-explorer__media,
  .sugar-tr-explorer__panel-text {
    margin-left: 16px;
    margin-right: 16px;
  }

  .sugar-tr-explorer__name {
    font-size: 26px;
  }

  .sugar-tr-explorer__panel-text {
    padding: 24px 20px;
  }

  .sugar-tr-explorer__desc {
    font-size: 16px;
  }

  .sugar-tr-explorer__nav img {
    width: 44px;
    height: 44px;
  }

  .sugar-tr-outro {
    padding: 56px 0;
  }

  .sugar-tr-advanced__item {
    padding: 10px 18px;
    font-size: 15px;
  }

  .sugar-tr-advanced__panels,
  .sugar-tr-advanced__panel {
    min-height: 360px;
  }

  .sugar-tr-advanced__content {
    padding: 24px 18px;
  }

  .sugar-tr-experience {
    padding: 64px 0;
  }

  .sugar-tr-results {
    padding: 64px 0;
  }

  .sugar-tr-ba {
    border-radius: 12px;
  }

  .sugar-tr-ba__tag {
    padding: 5px 12px;
    font-size: 10px;
  }

  .sugar-tr-ba__handle img {
    width: 40px;
    height: 40px;
    padding: 9px;
  }
}

/* ---------------------------------------------------------------------------
   7. VISIT US / CONTACT  (Figma 196:4513 / 617:4041)
   Now a shared component (template-parts/component-visit-contact.php) reused
   on both the homepage and the Treatments page — its .sugar-contact /
   .sugar-form styling lives earlier in this file (search ".sugar-contact"),
   so no page-specific CSS is needed here any more.
   --------------------------------------------------------------------------- */

/* =============================================================================
   ABOUT V2  (page_templates/about-v2.php)
   Verbatim from the "About Us" handoff's about-us.css (sugarabouthandoff),
   appended as-is rather than restyled — every selector is namespaced .sbl-*
   and every custom property --sbl-*, so nothing here can leak into or
   collide with the rest of the theme (confirmed no existing .sbl-*/--sbl-*
   usage anywhere else in this file). Fonts: Playfair Display + General Sans
   are already loaded site-wide above; Great Vibes is enqueued only on this
   template (functions.php).
   ============================================================================= */

/* TOKENS: --sbl-* custom properties now live in the theme's single shared
   :root rule near the top of this file (search "ABOUT V2 tokens") — see the
   comment there for why a second :root rule here was actively broken. */

/* NOTE: the live theme already sets .container{max-width:1240px}.
   It is NOT redeclared here — this file styles the two sections only
   and leaves Bootstrap's container alone. */

/* Base typography is scoped to the two sections, NOT to <body> — the
   sections drop into the About V2 page only and must not restyle the
   rest of the site. */
.sbl-about,
.sbl-founder{
  font-family:var(--sbl-sans);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.sbl-about{color:var(--sbl-black)}

/* shared media frame */
.sbl-figure{
  margin:0;
  overflow:hidden;
  border-radius:var(--sbl-radius);
  background:#0d0d0c;
}
.sbl-figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.sbl-figure:hover img{transform:scale(1.045)}

/* shared eyebrow */
.sbl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sbl-gold);
  margin:0 0 20px;
}
.sbl-eyebrow svg{display:block;flex:none}


/* ============================================================
   SECTION 1 — OUR STORY / WHY CHOOSE US
   ============================================================
   Inside .container, the three columns are laid out with CSS
   Grid rather than .row/.col because the right-hand image has
   to SPAN BOTH ROWS — running past the story block and bottoming
   out level with the Mission/Vision cards. Flexbox rows cannot
   do that; the grid falls back to stacked Bootstrap-style
   breakpoints below 900px.
   ============================================================ */
.sbl-about{padding:120px 0 110px;background:var(--sbl-white)}

.sbl-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  column-gap:46px;
  row-gap:74px;
  align-items:start;
}

.sbl-figure--left{
  grid-column:1;
  grid-row:1;
  aspect-ratio:1/1;
  margin-top:8px;
}

.sbl-figure--right{
  grid-column:3;
  grid-row:1 / span 2;
  align-self:stretch;
  height:100%;
  min-height:600px;
}

.sbl-story{grid-column:2;grid-row:1;padding-top:6px}

.sbl-story h2{
  font-family:var(--sbl-serif);
  font-weight:700;
  font-size:clamp(34px,3.4vw,52px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 24px;
}
.sbl-story p{
  font-size:17px;
  line-height:1.78;
  color:var(--sbl-body);
  margin:0;
  max-width:46ch;
}

/* --- Why Choose Us --- */
.sbl-why{grid-column:1 / span 2;grid-row:2}
.sbl-why h2{
  font-family:var(--sbl-serif);
  font-weight:700;
  font-size:clamp(30px,2.8vw,44px);
  line-height:1.15;
  margin:0 0 34px;
}
.sbl-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
  align-items:stretch;          /* both cards share a height, so the
                                   divider rule runs evenly between them */
  border-top:1px solid var(--sbl-rule);
}
.sbl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px 0 32px;
}
/* Divider is drawn as a pseudo-element on the MIDLINE of the gutter
   rather than as a border with negative margins. That keeps both
   cards' content flush to their own grid column, so the two icons
   land at identical positions and the whole row reads symmetrically. */
.sbl-card + .sbl-card::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-24px;
  border-left:1px solid var(--sbl-rule);
}

/* heading and icon share one row — this is what locks the icon to the
   baseline of its heading instead of floating above or below it */
.sbl-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;   /* the 48px icon already sets this row's height,
                          so the gap under the heading stays modest */
}
.sbl-card h3{
  font-weight:600;
  font-size:20px;
  line-height:1.3;
  margin:0;
}
.sbl-card p{
  font-size:15px;
  line-height:1.7;
  color:var(--sbl-body);
  margin:0;
  max-width:38ch;
}
.sbl-card-icon{
  flex:none;
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid rgba(221,164,3,.45);
  display:grid;place-items:center;
  color:var(--sbl-gold);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.sbl-card:hover .sbl-card-icon{
  background:var(--sbl-gold);
  border-color:var(--sbl-gold);
  color:var(--sbl-black);
}


/* ============================================================
   SECTION 2 — FOUNDER'S STORY (Wafa)
   Standard Bootstrap .row / .col grid — no row-spanning here.
   ============================================================ */
.sbl-founder{
  padding:110px 0;
  background:var(--sbl-ink);
  color:var(--sbl-white);
  position:relative;
  overflow:hidden;
}
/* soft gold bloom behind the copy, keeps the black band from
   reading flat — purely decorative */
.sbl-founder::after{
  content:"";
  position:absolute;
  top:-18%;right:-10%;
  width:620px;height:620px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(221,164,3,.13) 0%,rgba(221,164,3,0) 68%);
  pointer-events:none;
}
.sbl-founder > .container{position:relative;z-index:1}

.sbl-founder-figure{
  aspect-ratio:3/4;
  border-radius:var(--sbl-radius);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.sbl-founder-copy{padding-top:6px}

.sbl-script{
  font-family:var(--sbl-script);
  font-size:34px;
  line-height:1;
  color:var(--sbl-gold-light);
  margin:0 0 10px;
}

.sbl-founder h2{
  font-family:var(--sbl-serif);
  font-weight:600;
  font-size:clamp(48px,5.6vw,80px);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--sbl-white);
  margin:0 0 6px;
}
/* small registered-style dot beside the name, as in the reference */
.sbl-founder h2 .sbl-dot{
  display:inline-block;
  vertical-align:super;
  width:11px;height:11px;
  margin-left:10px;
  border-radius:50%;
  background:var(--sbl-gold);
}

.sbl-founder-role{
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--sbl-gold);
  margin:0 0 26px;
}

.sbl-founder-copy p:not(.sbl-script):not(.sbl-founder-role){
  font-size:16.5px;
  line-height:1.8;
  color:var(--sbl-body-inv);
  margin:0 0 18px;
  max-width:56ch;
}

.sbl-btn{
  display:inline-block;
  margin-top:16px;
  padding:17px 40px;
  border-radius:999px;
  background:var(--sbl-gold);
  color:var(--sbl-black);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--sbl-gold);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.sbl-btn:hover{
  background:transparent;
  color:var(--sbl-gold);
  transform:translateY(-2px);
}
.sbl-btn:focus-visible{outline:2px solid var(--sbl-gold-light);outline-offset:4px}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199.98px){
  .sbl-grid{column-gap:32px;row-gap:56px}
  .sbl-cards{gap:0 36px}
  .sbl-card + .sbl-card::before{left:-18px}
}

@media (max-width:991.98px){
  .sbl-founder{padding:84px 0}
  .sbl-founder-figure{aspect-ratio:4/3;margin-bottom:40px}
  .sbl-founder-copy{padding-top:0}
  .sbl-founder-copy p:not(.sbl-script):not(.sbl-founder-role){max-width:none}
}

@media (max-width:899.98px){
  .sbl-about{padding:84px 0 76px}
  .sbl-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .sbl-figure--left{grid-column:1;grid-row:1;margin-top:0}
  .sbl-figure--right{grid-column:2;grid-row:1;aspect-ratio:1/1;align-self:start;height:auto;min-height:0}
  .sbl-story{grid-column:1 / span 2;grid-row:2}
  .sbl-story p{max-width:none}
  .sbl-why{grid-column:1 / span 2;grid-row:3}
}

@media (max-width:639.98px){
  .sbl-about{padding:64px 0 60px}
  .sbl-founder{padding:64px 0}
  .sbl-grid{grid-template-columns:1fr;row-gap:32px}
  .sbl-figure--left{grid-column:1;aspect-ratio:4/3}
  .sbl-figure--right{grid-column:1;grid-row:2;aspect-ratio:4/3}
  .sbl-story{grid-column:1;grid-row:3}
  .sbl-why{grid-column:1;grid-row:4}
  .sbl-cards{grid-template-columns:1fr;gap:0}
  .sbl-card{padding:26px 0}
  .sbl-card + .sbl-card::before{
    top:0;bottom:auto;left:0;right:0;
    border-left:0;
    border-top:1px solid var(--sbl-rule);
  }
  .sbl-card p{max-width:none}
  .sbl-card-icon{width:44px;height:44px}
  .sbl-script{font-size:28px}
  .sbl-btn{padding:15px 32px}
}

@media (prefers-reduced-motion:reduce){
  .sbl-figure img,.sbl-card-icon,.sbl-btn{transition:none}
  .sbl-figure:hover img{transform:none}
  .sbl-btn:hover{transform:none}
}


/* ============================================================================
   ABOUT V2 — HERO
   No rules needed: page_templates/about-v2.php reuses the shared
   .sugar-inner-hero component (search "ABOUT PAGE" above) verbatim, the same
   way page_templates/faq.php does, so its hero is identical to the About Us
   page it replaces by construction. Nothing to duplicate here — if the hero
   ever needs page-specific tweaks, scope them under .sugar-about-v2.
   ============================================================================ */

/* ------------------------------------------------------------------------
   ABOUT V2 — integration overrides.
   The handoff CSS above is untouched/verbatim; these few rules exist only
   to counteract this theme's OWN global resets (near the top of this file)
   that would otherwise win against it:
     - `a{transition:.5s ease !important}` and `a,input,button{outline:0
       !important}` clobber .sbl-btn's own transition/focus-visible styling
       (both !important, so only a higher-specificity !important rule can
       beat them).
     - `body,p{font-family:"Proxima Nova Rg"}` and
       `h1,h2,h3,h4,h5,h6{font-family:"Proxima Nova Lt"}` directly match
       every <p>/<h2>/<h3> in these sections. A direct match always wins
       over an inherited value, so any element below that relies on
       inheriting --sbl-sans from .sbl-about/.sbl-founder (rather than
       declaring its own font-family — true of .sbl-eyebrow, the body
       paragraphs, .sbl-founder-role and .sbl-card h3 in the original
       handoff CSS) was silently rendering in the theme's font instead.
   ------------------------------------------------------------------------ */
.sbl-eyebrow,
.sbl-story p,
.sbl-card p,
.sbl-card h3,
.sbl-founder-role,
.sbl-founder-copy p:not(.sbl-script):not(.sbl-founder-role){
  font-family:var(--sbl-sans);
}
.sbl-btn{
  transition:background .3s ease,color .3s ease,transform .3s ease !important;
}
.sbl-btn:focus-visible{
  outline:2px solid var(--sbl-gold-light) !important;
  outline-offset:4px;
}

/* NOTE: .sugar-header-backdrop (an empty dark strip that gave the transparent
   overlay header something readable to sit on while this page had no hero) is
   gone — the page opens on a real .sugar-inner-hero now, the same way every
   other template does. It was used by this page only. */

/* ============================================================================
   ABOUT V3  (page_templates/about-v3.php)
   Founder · Our Story · Mission & Vision — ported from
   sbl-about-sections.html. Every selector is namespaced .sbl-av3-* (see the
   implementation plan's rename table) because the reference file's own
   class names (.sbl-founder, .sbl-story, .sbl-card, .sbl-eyebrow) are
   already owned by About V2's "Founder's Story" / "Why Choose Us" sections
   above, in this same global stylesheet.
   ============================================================================ */
.sbl-av3-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sbl-sans);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--sbl-gold);margin:0 0 22px;
}
.sbl-av3-eyebrow::before{
  content:"";width:26px;height:1px;background:var(--sbl-gold);flex:0 0 auto;opacity:.8;
}
.sbl-av3-eyebrow--inv{color:var(--sbl-gold-light)}
.sbl-av3-eyebrow--inv::before{background:var(--sbl-gold-light)}

/* ---- Founder ---- */
.sbl-av3-founder{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sbl-black);
  color:var(--sbl-white);
  padding-block:clamp(72px,9vw,132px);
  font-family:var(--sbl-sans);
  max-width:100%;
}
.sbl-av3-founder::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 46% at 78% 8%,rgba(221,164,3,.13),transparent 70%),
    radial-gradient(48% 40% at 6% 92%,rgba(221,164,3,.08),transparent 72%);
}
.sbl-av3-founder::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.sbl-av3-founder__masthead{margin-bottom:clamp(44px,5vw,68px)}
.sbl-av3-founder__namewrap{position:relative;overflow:hidden;padding-block:.06em}
.sbl-av3-founder__script{
  position:absolute;left:8%;top:52%;translate:0 -50%;
  font-family:var(--sbl-script);
  font-size:clamp(76px,11vw,168px);line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(221,164,3,.34);
  white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 96%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 96%);
}
@media(max-width:575px){.sbl-av3-founder__script{display:none}}
.sbl-av3-founder__name{
  position:relative;z-index:1;margin:0;
  font-family:var(--sbl-serif);font-weight:500;
  font-size:clamp(46px,7.4vw,104px);line-height:.96;
  letter-spacing:-.02em;text-wrap:balance;
}
.sbl-av3-founder__name em{font-style:italic;font-weight:400;color:var(--sbl-gold)}
.sbl-av3-founder__role{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:26px 0 0;font-size:12.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.56);
}
.sbl-av3-founder__role span{display:inline-flex;align-items:center;gap:18px}
.sbl-av3-founder__role span::after{
  content:"";width:5px;height:5px;rotate:45deg;background:var(--sbl-gold);
}
.sbl-av3-founder__role span:last-child::after{display:none}
.sbl-av3-founder__spread{
  display:grid;gap:clamp(40px,4.6vw,72px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media(min-width:992px){
  .sbl-av3-founder__spread{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
}
/* Plate width: narrow enough that "never alter." wraps onto its own
   line, but wide enough that the signature row ("Wafa Kamal" /
   "FOUNDER · SUGAR BEAUTY LOUNGE") never gets clipped by the card's own
   overflow:hidden. That row — not the quote — is the true binding
   constraint: sbl-av3-plate__sigrole uses a FIXED font-size (not
   vw-scaled like the quote), so the safe width window is only ~10px
   wide right at 992px and widens fast just above it (~20px by 1050px,
   ~115px+ by 1100px) — a single clamp() can't track both the narrow
   992px window and stay generously narrow further out, so this uses
   two tiers: one that closely tracks the steep, narrow-window part of
   the curve (992-1150px), and a looser one beyond it where there's
   real room to be generous. Tiers use cascading min-width only (no
   paired max-width) — pairing adjacent min-width/max-width queries can
   leave a 1px gap at certain zoom levels where sub-pixel layout widths
   fall between them, matching neither. Empirically verified — no
   clipping, quote stays 2 lines — at 992/1050/1100/1150/1200/1300/
   1400/1440/1920px, each with real margin. Desktop two-column layout
   only — mobile/tablet (where the plate is already full-width) is
   untouched. Height/padding/typography unchanged; the extra wrapped
   quote line makes the card a little taller than the single-line
   original. */
@media(min-width:992px){
  .sbl-av3-plate{max-width:clamp(338px,calc(193px + 14.6vw),365px)}
}
@media(min-width:1150px){
  .sbl-av3-plate{max-width:clamp(368px,calc(158px + 20vw),398px)}
}
.sbl-av3-founder__bio{position:relative;padding-top:30px;border-top:1px solid var(--sbl-rule-inv)}
.sbl-av3-founder__bio::before{
  content:"";position:absolute;top:-1px;left:0;width:84px;height:2px;background:var(--sbl-gold);
}
.sbl-av3-founder__lead{
  margin:0 0 20px;font-family:var(--sbl-serif);font-weight:400;
  font-size:clamp(20px,2.1vw,26px);line-height:1.5;color:var(--sbl-white);
  max-width:34ch;text-wrap:pretty;
}
.sbl-av3-founder__lead b{font-weight:600;color:var(--sbl-white)}
.sbl-av3-founder__bio p:not(.sbl-av3-founder__lead){
  margin:0 0 18px;font-size:16.5px;line-height:1.78;color:var(--sbl-body-inv);max-width:62ch;
}
.sbl-av3-founder__bio p:last-child{margin-bottom:0}

.sbl-av3-plate{
  position:relative;overflow:hidden;
  border-radius:var(--sbl-radius);
  background:
    radial-gradient(120% 92% at 88% 0%,rgba(221,164,3,.20),transparent 62%),
    var(--sbl-white);
  color:var(--sbl-ink);
  padding:clamp(34px,3.6vw,52px) clamp(28px,3.2vw,46px);
}
.sbl-av3-plate::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(221,164,3,.30);
  border-radius:calc(var(--sbl-radius) - 8px);pointer-events:none;
}
.sbl-av3-plate__mark{
  display:block;font-family:var(--sbl-serif);font-size:74px;line-height:.62;
  color:var(--sbl-gold);margin:0 0 6px;
}
.sbl-av3-plate__quote{
  margin:0;font-family:var(--sbl-serif);font-style:italic;font-weight:400;
  font-size:clamp(27px,3vw,38px);line-height:1.22;letter-spacing:-.01em;
  text-wrap:balance;
}
.sbl-av3-plate__quote span{color:var(--sbl-gold);font-style:normal;font-weight:500}
.sbl-av3-plate__note{
  margin:22px 0 0;font-size:15px;line-height:1.7;color:var(--sbl-body);max-width:40ch;
}
.sbl-av3-plate__sign{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-top:clamp(28px,3vw,40px);padding-top:22px;
  border-top:1px solid var(--sbl-rule);
}
.sbl-av3-plate__sig{
  font-family:var(--sbl-script);font-size:clamp(38px,4.2vw,54px);
  line-height:.9;color:var(--sbl-gold);
}
.sbl-av3-plate__sigrole{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,0,0,.5);text-align:right;line-height:1.7;flex:0 0 auto;
}

.sbl-av3-rail{
  margin-top:clamp(48px,5.4vw,80px);
  display:grid;gap:1px;background:var(--sbl-rule);
  border-block:1px solid var(--sbl-rule);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:600px){.sbl-av3-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:992px){.sbl-av3-rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sbl-av3-rail__item{
  background:var(--sbl-ivory);
  padding:26px clamp(18px,2vw,30px) 28px;
  display:flex;flex-direction:column;gap:8px;
}
.sbl-av3-rail__value{
  order:-1;
  font-family:var(--sbl-serif);font-weight:500;
  font-size:clamp(26px,2.5vw,34px);line-height:1.1;letter-spacing:-.01em;
  color:var(--sbl-ink);font-variant-numeric:tabular-nums;
}
.sbl-av3-rail__value i{font-style:normal;color:var(--sbl-gold)}
.sbl-av3-rail__item dd{margin:0}
.sbl-av3-rail__label{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.5);
}

/* ---- Our Story ---- */
.sbl-av3-story{
  background:var(--sbl-white);color:var(--sbl-ink);
  font-family:var(--sbl-sans);
  padding-block:clamp(72px,8.5vw,120px);
  max-width:100%;
}
.sbl-av3-story__grid{
  display:grid;gap:clamp(28px,3.6vw,64px);
  grid-template-columns:minmax(0,1fr);align-items:end;
}
@media(min-width:992px){
  .sbl-av3-story__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.sbl-av3-story__title{
  margin:0;font-family:var(--sbl-serif);font-weight:500;
  font-size:clamp(34px,4.6vw,64px);line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;
}
.sbl-av3-story__title em{font-style:italic;color:var(--sbl-gold)}
.sbl-av3-story__body{max-width:60ch}
.sbl-av3-story__body p{margin:0;font-size:17px;line-height:1.8;color:var(--sbl-body)}
.sbl-av3-story__place{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,0,0,.42);
}
.sbl-av3-story__place::after{content:"";flex:1 1 auto;height:1px;background:var(--sbl-rule)}
.sbl-av3-story__place b{color:var(--sbl-gold);font-weight:600}

/* ---- Mission & Vision (parallax video band + drawer cards) ---- */
.sbl-av3-mv{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sbl-black);color:var(--sbl-white);
  font-family:var(--sbl-sans);
  padding-block:clamp(84px,10vw,150px);
  max-width:100%;
}
.sbl-av3-mv__bg{
  position:absolute;left:0;right:0;top:-14%;height:128%;z-index:-2;
  will-change:transform;
  background:
    radial-gradient(90% 70% at 50% 40%,#3A2A12 0%,#150F06 58%,#000 100%);
}
/* One more 90deg turn on top of the previous 180deg = 270deg total, the
   requested final orientation. 90deg/270deg swap the video's rendered
   footprint (width<->height) unlike 180deg, and this container's own
   aspect ratio swings from near-square (desktop) to very tall/narrow
   (mobile, once the Mission/Vision cards stack to one column) — so a
   single fixed scale can't cover every width without either gaps or
   extreme, unrecognizable cropping. container-type:size lets the video
   be pre-sized to the container's HEIGHT x WIDTH (swapped) via cqh/cqw
   units, so the 270deg rotation lands it back at exactly WIDTH x HEIGHT
   — an exact fit at any breakpoint, no media queries needed. */
@supports (container-type: size) {
  .sbl-av3-mv__bg{ container-type:size; }
}
.sbl-av3-mv__bg video,
.sbl-av3-mv__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Fallback for browsers without container query units: fixed rotate +
     scale large enough to cover the tallest single-column mobile layout
     without gaps (the @supports block below replaces this with an exact,
     breakpoint-independent fit on modern browsers). */
  transform:rotate(270deg) scale(3.6);
  filter:brightness(1.12) contrast(1.02) saturate(1.05);
}
@supports (container-type: size) {
  .sbl-av3-mv__bg video,
  .sbl-av3-mv__bg img{
    position:absolute;top:50%;left:50%;
    width:100cqh;height:100cqw;
    /* 1.03 = small safety margin only, for subpixel rounding — the
       swapped cqh/cqw sizing already does the real work of the fit. */
    transform:translate(-50%,-50%) rotate(270deg) scale(1.03);
  }
}
.sbl-av3-mv__overlay{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* Extra top-left darkening, subtle and localized behind the heading
       block (.sbl-av3-mv__head sits top-left) — fades out well before
       the cards, leaving the rest of the overlay exactly as it was. */
    radial-gradient(55% 60% at 12% 15%,rgba(0,0,0,.32) 0%,transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.50) 64%,rgba(0,0,0,.78) 100%),
    radial-gradient(72% 58% at 50% 42%,rgba(221,164,3,.12),transparent 70%);
}
.sbl-av3-mv__head{max-width:760px;margin-bottom:clamp(44px,5vw,72px)}
.sbl-av3-mv__title{
  margin:0;font-family:var(--sbl-serif);font-weight:500;
  font-size:clamp(36px,5vw,68px);line-height:1.04;letter-spacing:-.02em;
  color:var(--sbl-white);text-wrap:balance;
}
.sbl-av3-mv__sub{
  margin:20px 0 0;font-family:var(--sbl-serif);font-style:italic;
  font-size:clamp(19px,2.1vw,26px);line-height:1.45;
  color:var(--sbl-gold-light);
}
.sbl-av3-mv__intro{
  margin:18px 0 0;font-size:16.5px;line-height:1.8;
  color:var(--sbl-white);opacity:.86;max-width:58ch;
}
.sbl-av3-mv__cards{
  display:grid;gap:clamp(20px,2.4vw,34px);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:992px){.sbl-av3-mv__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sbl-av3-drawer{
  position:relative;overflow:hidden;border-radius:var(--sbl-radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
.sbl-av3-card{
  position:relative;height:100%;
  background:var(--sbl-white);color:var(--sbl-ink);
  border-radius:var(--sbl-radius);
  padding:clamp(30px,3.4vw,50px) clamp(26px,3vw,46px) clamp(32px,3.4vw,48px);
  display:flex;flex-direction:column;
  transform:translate3d(0,101%,0);
  transition:transform 1.05s var(--sbl-ease);
  will-change:transform;
}
.sbl-av3-card__inner{
  transform:translate3d(0,-24%,0);
  transition:transform 1.05s var(--sbl-ease);
  /* .sbl-av3-card__kicker's margin-top:auto is meant to pin the kicker
     (and its divider) to the card's bottom edge regardless of how much
     body copy sits above it, so both cards' dividers land at the same
     height — but that only works if the kicker's own parent is itself
     a flex column filling the card's full height. Without this,
     .sbl-av3-card__inner (block, natural content height) left the
     kicker following the text in normal flow, so cards with less body
     copy floated their divider noticeably higher than cards with more.
     display/flex-direction/height are layout-mechanism fixes only —
     no spacing, sizing, or typography values changed. */
  display:flex;flex-direction:column;height:100%;
}
.sbl-av3-drawer.is-open .sbl-av3-card{transform:translate3d(0,0,0)}
.sbl-av3-drawer.is-open .sbl-av3-card__inner{transform:translate3d(0,0,0)}
.sbl-av3-drawer:nth-child(2) .sbl-av3-card,
.sbl-av3-drawer:nth-child(2) .sbl-av3-card__inner{transition-delay:.14s}

.sbl-av3-card__pull{
  display:block;width:52px;height:4px;border-radius:99px;background:var(--sbl-gold);
  margin:0 0 26px;flex:0 0 auto;
}
.sbl-av3-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.sbl-av3-card__head h3{
  margin:0;font-family:var(--sbl-serif);font-weight:500;
  font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.01em;
}
.sbl-av3-card__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--sbl-gold);border:1px solid rgba(221,164,3,.42);
  background:rgba(221,164,3,.07);
}
.sbl-av3-card p{margin:0;font-size:16.5px;line-height:1.82;color:var(--sbl-body)}
.sbl-av3-card p + p{margin-top:14px}
.sbl-av3-card__kicker{
  margin-top:auto;padding-top:24px;
  font-family:var(--sbl-serif);font-style:italic;
  font-size:clamp(18px,1.9vw,22px);line-height:1.4;color:var(--sbl-ink);
}
/* .sbl-av3-card__kicker is itself a <p>, so ".sbl-av3-card p + p" above
   (higher specificity: 1 class + 2 elements vs. 1 class here) was
   silently winning and pinning it to a fixed 14px top margin instead
   of the auto value meant to push it — and its divider — flush to the
   card's bottom regardless of how much body copy precedes it. This
   re-asserts margin-top:auto at higher specificity so both cards'
   dividers land at the same height; no other spacing/typography here
   changes. */
.sbl-av3-card__inner .sbl-av3-card__kicker{margin-top:auto}
.sbl-av3-card__kicker::before{
  content:"";display:block;width:100%;height:1px;background:var(--sbl-rule);margin-bottom:22px;
}
.sbl-av3-card__kicker b{font-style:normal;font-weight:600;color:var(--sbl-gold)}

/* ---- accessibility / motion preferences ---- */
.sbl-av3-founder :focus-visible,
.sbl-av3-story :focus-visible,
.sbl-av3-mv :focus-visible{outline:2px solid var(--sbl-gold);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  .sbl-av3-card,.sbl-av3-card__inner{transform:none !important;transition:none !important}
  .sbl-av3-mv__bg{transform:none !important}
  .sbl-av3-founder__script{transform:none !important}
}
/* If JS never runs, nothing stays hidden. */
.sbl-av3.no-js .sbl-av3-card,
.sbl-av3.no-js .sbl-av3-card__inner{transform:none}