html {
	font-size: 15px;
}
@media (min-width: 576px) {
html {
	font-size: 15px;
}
}
@media (min-width: 768px) {
html {
	font-size: 16px;
}
}
@media (min-width: 992px) {
html {
	font-size: 16px;
}
}
@media (min-width: 1200px) {
html {
	font-size: 17px;
}
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px !important;
	color: rgba(200,200,200,1);
	background: rgba(237,230,212,1);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0;
}
.grecaptcha-badge{
	visibility: collapse !important;  
}
/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,1);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
/*===========================================
  FONTS
  ===========================================*/
@font-face {
	font-family: titles;
	src: url('https://lompran.co.uk/wp-content/themes/lompran-theme/fonts/CormorantGaramond-Light.ttf');
}
@font-face {
	font-family: serif-titles;
	src: url('https://lompran.co.uk/wp-content/themes/lompran-theme/fonts/Inter-Variable.ttf');
}
@font-face {
	font-family: standard;
	src: url('https://lompran.co.uk/wp-content/themes/lompran-theme/fonts/Inter-Variable.ttf');
}
@font-face {
	font-family: handwriting;
	src: url('https://lompran.co.uk/wp-content/themes/lompran-theme/fonts/GreatVibes-Regular.ttf');
}
p {
	margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 1.3em;
	margin-bottom: 0.5em;
	line-height: 1.2;
}

h1 {
	margin-top: 0;
}
p {
	line-height: 1.5;
}
h1 {
	font-family: titles;
	font-size: 3rem;
	font-weight: 400;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}
h2 {
	font-family: titles;
	font-size: 2.5rem;
	font-weight: 200;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}
h3 {
	font-family: titles;
	font-size: 2.5rem;
	font-weight: 200;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}
h4 {
	font-family: titles;
	font-size: 2rem;
	font-weight: 200;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}
h5 {
	font-family: titles;
	font-size: 1.5rem;
	font-weight: 200;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}
h6 {
	font-family: titles;
	font-size: 1rem;
	font-weight: 200;
	color: rgba(40,40,40,1);
	letter-spacing: -0.03em;
}

p {
	font-family: standard;
	font-size: 1rem;
	font-weight: 300;
	color: rgba(40,40,40,1);
}

a {
	color: rgba(200,200,200,1);
	letter-spacing: 0px;
	text-decoration: none;
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1);
}
a:hover {
	text-decoration: none;
	color: rgba(209,141,62,1);
}

h1.dark, h2.dark, h3.dark, h4.dark, h5.dark, h6.dark, p.dark {
	color: rgba(31,41,51,1);
}

.handwriting {
	font-family: handwriting;
}
.extralarge {
	font-size: 4rem;
}

.divider {
	position: relative;
	left: 50%;
    transform: translateX(-50%);
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	width: 50%;
	height: 1px;
	background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
}
/*===========================================
  LISTS & FORMS
  ===========================================*/
ul {
	font-family: standard;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	margin-left: 25px;
	list-style: disc;
	padding: 0;
	display: block;
}
li {
	display: list-item;
    padding: 0;
	color: rgba(40,40,40,1);
}
li:hover {
	color: rgba(40,40,40,1);
}
li a {
	font-size: 1rem;
}
li a:hover {
	color: rgba(12,139,137,1) !important;
}

.wpcf7 {
	width:100% !important;
}

.wpcf7-form {
	width:100% !important;
}
.wpcf7-form input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea {
	width:100% !important;
}
form {
	font-family: standard;
	font-size: 1rem;
}
textarea {
	padding: 5px;
}
input {
	border: 1px solid rgba(0,0,0,1);
	background-color: rgba(255,255,255,1);
	padding: 5px;
}
label {
	width: 100% !important;
}

/*===========================================
  HEADER & FOOTER
  ===========================================*/
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	box-sizing: border-box;
	background: rgba(215,181,118,0.85);
	transition: 0.5s all cubic-bezier(1,0,0,1);
	z-index: 99999;
}
header.fixed {
	height: 70px;
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
}
.header-menu {
	height: 70px;
}
.header-spacer {
	position: relative;
	width: 100%;
	height: 70px;
}
footer {
	position: relative;
	width: 100%;
	min-height: 50px;
	background-color: rgba(0,0,0,0);
	box-sizing: border-box;
	transition: 0.7s all cubic-bezier(0.5,0.8,0,1.2);
	z-index: 999;
}
footer a, footer p, footer h1, footer h2, footer h3, footer h4 {
	color: rgba(255,255,255,1);
	letter-spacing: 0px;
	text-decoration: none;
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1.7);
}
footer a:hover {
	text-decoration: none;
}
footer a:hover p {
	letter-spacing: 0px;
}
footer img {
	margin: 5px;
}
footer p {
	margin: 0 0 0.5em 0;
}
/*===========================================
  LOGO
  ===========================================*/
.logo {
	position: absolute;
	margin-left: clamp(20px, 5vw, 80px);
	top: 20px;
	height: 30px;
	width: 160px;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 0.5s all cubic-bezier(0.5,0.8,0,1.3);
}
header.fixed .logo {
	top: 20px;
	height: 30px;
	width: 160px;
}

/*===========================================
  HEADER BORDER
  ===========================================*/
.border {
	position: absolute;
	opacity: 0.85;
	top: 70px;
	height: 13px;
	width: 100%;
	background-repeat: repeat;
	background-size: auto 100%;
	transition: 0.5s all cubic-bezier(0.5,0.8,0,1.3);
}
/*===========================================
  MENU
  ===========================================*/
.menu-button {
	position: relative;
	visibility: visible;
	margin-right: clamp(20px, 5vw, 80px);
	opacity: 1;
	top: 15px;
	float: right;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background-color: rgba(139,12,13,0);
	transition: 0.4s all cubic-bezier(0.060, 0.5, 0.195, 1);
	z-index: 99999999;
}
.menu-bar-1, .menu-bar-2, .menu-bar-3 {
	position: absolute;
	opacity: 1;
	left: 20%;
	height: 1px;
	width: 60%;
	background-color: rgba(240,240,240,1);
	transition: 0.4s opacity cubic-bezier(0.060, 0.5, 0.195, 1) 0.4s, 0.4s margin-top cubic-bezier(0.060, 0.5, 0.195, 1) 0.4s, 0.4s top cubic-bezier(0.060, 0.5, 0.195, 1) 0s, 0.4s transform cubic-bezier(0.060, 0.5, 0.195, 1) 0s;
}
.menu-button.on .menu-bar-1, .menu-button.on .menu-bar-2, .menu-button.on .menu-bar-3 {
	transition: 0.4s opacity cubic-bezier(0.060, 0.5, 0.195, 1) 0s, 0.4s margin-top cubic-bezier(0.060, 0.5, 0.195, 1) 0s, 0.4s top cubic-bezier(0.060, 0.5, 0.195, 1) 0.4s, 0.4s transform cubic-bezier(0.060, 0.5, 0.195, 1) 0.4s;
}
.menu-bar-1 {
	top: 13px;
	margin-top: 0px;
}
.menu-bar-2 {
	top: 19px;
	margin-top: 0px;
}
.menu-bar-3 {
	top: 25px;
	margin-top: 0px;
}
.menu-button:hover {
	cursor: pointer;
}
.menu-button.on .menu-bar-1 {
	top: 8px; /* Final cross */
	margin-top: 11px; /* Intermediate */
	transform: rotate(135deg);
}
.menu-button.on .menu-bar-2 {
	top: 19px;
	opacity: 0;
}
.menu-button.on .menu-bar-3 {
	top: 30px; /* Final cross */
	margin-top: -11px; /* Intermediate */
	transform: rotate(225deg);
}
.container.menu {
	visibility: hidden;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: -100%;
	padding: 70px 0;
	box-sizing: border-box;
	background-image: linear-gradient(to bottom right, rgba(214,195,163,1), rgba(214,195,163,1));
	transition: 0.4s all cubic-bezier(1,0,0,1);
	z-index: 9999;
}
.container.menu.on {
	visibility: visible;
	top: 0;
	right: 0;
}
.menu-inner {
	position: absolute;
	padding: 50px 10px 30px 40px;
	right: 50%;
	transform: translateX(50%);
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0px 0px 20px rgba(0,0,0,0);
	background-image: linear-gradient(to bottom right, rgba(20,20,20,0), rgba(20,20,20,0));
}
.container.menu p {
	font-family: serif-titles;
	font-size: 2rem;
	line-height: 3.5rem;
	font-weight: 200;
	letter-spacing: 0px;
	text-align: center;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 20px;
	text-transform: none;
	color: rgba(31,41,51,1);
	transition: 0.4s all ease-on-out;
}
.container.menu a {
	text-decoration: none;
}
.container.menu a:hover {
	text-decoration: none;
}
.container.menu a:hover p {
	color: rgba(209,141,62,1);
	letter-spacing: 0rem;
}
.menu-item {
	position: relative;
	transition: 0.4s all ease-in-out;
	overflow: hidden;
}
.menu-item-sub {
	visibility: hidden;
	opacity: 0;
	height: 0px;
	transition: 0.4s height cubic-bezier(0.5,0.8,0,1) 0s, 0.2s opacity ease-in-out 0s;
}
.menu-item:hover .menu-item-sub {
	visibility: visible;
	opacity: 1;
	height: 2rem;
	transition: 0.4s height cubic-bezier(0.5,0.8,0,1) 0s, 0.4s opacity ease-in-out 0.2s;
}
.menu-item p {
	
}
.menu-item-sub p {
	margin-right: 30px !important;
	font-size: 1.2rem;
}

@media (min-width: 9999999999999992px) {

.menu-button {
	visibility: hidden;
}
.container.menu {
	visibility: visible;
	position: fixed;
	right: 0;
	top: 0;
	padding: 0;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px rgba(0,0,0,0);
	background-image: linear-gradient(to bottom right, rgba(220,220,220,0.9), rgba(250,250,250,0.9));
	transition: 0.4s all cubic-bezier(1,0,0,1);
	z-index: 99999;
}
.menu-inner {
	position: absolute;
	padding: 0px 10px 30px 40px;
	right: 0;
	transform: translateX(0%);
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: 0px 0px 20px rgba(0,0,0,0);
	background-image: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(250,250,250,0));
}
.container.menu p {
	font-family: serif-titles;
	line-height: 80px;
	letter-spacing: 2px;
	text-align: right;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 20px;
	text-transform: uppercase;
	color: rgba(200,200,200,1);
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1.7);
}
.container.menu a{
	text-decoration: none;
}
.container.menu a:hover {
	text-decoration: none;
}
.container.menu a:hover p {
	color: rgba(200,200,200,1);
	letter-spacing: 2px;
}
.menu-item {
	position: relative;
	float: left;
	transition: 0.4s all ease-in-out;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(209,141,62,0.5) 0%, rgba(209,141,62,0.5) 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 0px 0px;
	transition: 0.4s background-size cubic-bezier(1,0,0,1);
}
.menu-item:hover {
	background-size: 4px 100%;
}
.menu-item:hover p {
	color: rgba(200,200,200,1);
}
.menu-item-sub {
	visibility: hidden;
	background-color: rgba(12,139,137,1);
	opacity: 0;
	height: 0px;
	transition: 0.2s height cubic-bezier(1,0,0,1) 0s, 0.2s opacity ease-in-out 0s;
	z-index: 99998;
}
.menu-item:hover .menu-item-sub {
	visibility: visible;
	opacity: 1;
	height: 2rem;
	transition: 0.4s height cubic-bezier(1,0,0,1.3) 0.2s, 0.4s opacity ease-in-out 0.2s;
}
.menu-item p {
	font-size: 0.8rem;
	padding-left: 20px !important;
	padding-right: 20px !important;
	margin-right: 0px !important;
}
.menu-item-sub p {
	opacity: 0;
	margin-right: 10px !important;
	margin-left: 10px !important;
	font-size: 0.9rem;
	transition: 0.4s opacity ease-in-out 0s;
}
.menu-item:hover .menu-item-sub p {
	opacity: 1;
	transition: 0.4s opacity ease-in-out 0s;
}
.menu-item-sub:hover p {
	color: rgba(0,0,0,1) !important;
}


}

/*===========================================
  MAIN STYLES
  ===========================================*/

.home-container {
	position: fixed;
	height: 100vh;
	width: 100vw;
	background-image:
        linear-gradient(135deg, #0a0f2c, #1a1f4f 40%, #2d1a4f 75%, #0a0f2c),
        linear-gradient(200deg, rgba(255, 120, 200, 0.10), transparent 60%),
        linear-gradient(260deg, rgba(100, 150, 255, 0.10), transparent 65%),
        linear-gradient(320deg, rgba(180, 120, 255, 0.08), transparent 70%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.04), transparent 50%),
        linear-gradient(300deg, rgba(120, 160, 255, 0.06), transparent 75%);
	background-position: right bottom;
	background-repeat: no-repeat;
	overflow: hidden;
}
.home-container::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 1;
	pointer-events: none;
	background-position: center;
	background-size: cover;
}

.home-container .headline {
	position: relative;
	padding: 0 clamp(20px, 5vw, 80px);
	color: rgba(240,240,240,1);
	width: 100%;
	height: calc(100vh - 100px);
	top: 100px;
}
.home-container .headline h1 {
	
}


/*===========================================
  FLOATING PARTICLES
  ===========================================*/
.particles {
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      overflow: hidden;
      z-index: 0;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      animation: float linear infinite;
    }

    @keyframes float {
      from {
        transform: translateY(110vh) translateX(0);
        opacity: 0;
      }
      10% { opacity: 1; }
      90% { opacity: 1; }
      to {
        transform: translateY(-20vh) translateX(40px);
        opacity: 0;
      }
    }

    .content {
      position: relative;
      z-index: 2;
      color: white;
      padding: 100px 20px;
    }
	
.button, .customButtonDark, .customButtonLight {
	position: relative;
	margin: 1.3em 0 1.3em 0;
	padding: 0 20px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(235,235,245,0.4);
	border-radius: 20px;
	transition: 0.2s all ease-in-out;
}
.button.dark, .customButtonDark {
	border: 1px solid rgba(31,41,51,0.4);
}
.button.light, .customButtonLight {
	border: 1px solid rgba(235,235,245,0.4);
}
.button:hover, .customButtonDark:hover, .customButtonLight:hover {
	cursor: pointer;
	background-color: rgba(235,235,245,0.2);
	transform: scale(0.9, 0.9);
}
.button p, .customButtonDark p, .customButtonLight p {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 40px;
	color: rgba(235,235,245,1);
}
.button.dark p, .customButtonDark p, .customButtonDark a {
	color: rgba(31,41,51,1);
}
.button.light p, .customButtonLight p, .customButtonLight a {
	color: rgba(235,235,245,1);
}
header .button, header .customButtonDark, header .customButtonLight {
	position: absolute;
	margin: 0;
	top: 15px;
	right: clamp(70px, calc(5vw + 50px), 130px);
}


/* =========================
   GLOBAL CONTAINER
========================= */
/* Full-width section (keeps padding but no max-width) */
.container-fluid {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: clamp(20px, 5vw, 80px);
	padding-right: clamp(20px, 5vw, 80px);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* =========================
   GRID SYSTEM
========================= */
.grid {
	display: grid;
	gap: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Column variations */
.grid-1 {grid-template-columns: 1fr;}
.grid-2 {grid-template-columns: 1fr;}
.grid-3 {grid-template-columns: 1fr;}
.grid-2 > *, .grid-3 > * {text-align: center; flex-direction: column;}

@media (min-width: 576px) {
	.grid-2, .grid-3 {grid-template-columns: repeat(2, 1fr);}
	.grid-2 > *, .grid-3 > * {display: flex; text-align: left; flex-direction: column;}
}

@media (min-width: 992px) {
	.grid-1 {grid-template-columns: 1fr;}
	.grid-2 {grid-template-columns: repeat(2, 1fr);}
	.grid-3 {grid-template-columns: repeat(3, 1fr);}
	.grid-1 > *, .grid-2 > *, .grid-3 > * {text-align: left; flex-direction: column;}
}

.cards > * {
	padding-bottom: 20px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.2);
	overflow: hidden;
	height: 100%;
	width: 100%;
	text-align: center;
    display: flex;
    flex-direction: column;
	box-sizing: border-box;
}

.cards p, .cards h1, .cards h2, .cards h3, .cards h4, .cards h5, .cards h6 {
	padding-left: 20px;
	padding-right: 20px;
}

.cards h3 {
	font-size: 1.7rem;
	font-weight: 300;
}

.grid-image {
    width: 100%;
    height: 250px; /* set a fixed height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.item {
	display: grid;
	padding: 30px;
	height: 100%;
	width: 100%;
	border-radius: 20px;
	box-sizing: border-box;
	background:
    /* soft top glow */
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.06) 30%,
      rgba(255,255,255,0.02) 55%,
      transparent 75%
    ),
    /* subtle centre light body */
    radial-gradient(
      100% 100% at 50% 50%,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02) 40%,
      transparent 70%
    ),
    /* faint lower shading */
    radial-gradient(
      120% 100% at 50% 100%,
      rgba(0,0,0,0.05),
      transparent 60%
    ),
    /* ultra-soft diagonal blend */
    linear-gradient(
      120deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.01) 40%,
      rgba(0,0,0,0.02) 100%
    ),
    /* base transparency */
    rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative; /* needed for pseudo-elements to anchor correctly */
}

/* Dark overlay */
.item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Diagonal glass flare */
.item::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 100%
  );
  transform: rotate(0deg);
  pointer-events: none;
  z-index: 3; /* above the dark overlay, below text */
}

.item > * {
  position: relative;
  z-index: 4; /* bumped up to stay above the flare */
}

/* =========================
   SIZE UTILITIES
========================= */
.h-100	{min-height: calc(100vh - 120px);}
.h-75	{min-height: calc(75vh - 120px);}
.h-66	{min-height: calc(66vh - 120px);}
.h-50	{min-height: calc(50vh - 120px);}
.h-33	{min-height: calc(33vh - 120px);}
.h-25	{min-height: calc(25vh - 120px);}

.w-100	{width: 100%; min-width: 100%;}
.w-75	{width: 75%; min-width: 75%;}
.w-66	{width: 66%; min-width: 75%;}
.w-50	{width: 50%; min-width: 75%;}
.w-33	{width: 33%; min-width: 75%;}
.w-25	{width: 25%; min-width: 75%;}

@media (min-width: 576px) {
	.w-100	{min-width: 100%;}
	.w-75	{min-width: 75%;}
	.w-66	{min-width: 75%;}
	.w-50	{min-width: 75%;}
	.w-33	{min-width: 50%;}
	.w-25	{min-width: 50%;}
}

@media (min-width: 768px) {
	.w-100	{min-width: 100%;}
	.w-75	{min-width: 75%;}
	.w-66	{min-width: 75%;}
	.w-50	{min-width: 50%;}
	.w-33	{min-width: 50%;}
	.w-25	{min-width: 50%;}
}

@media (min-width: 992px) {
	.w-100	{min-width: 100%;}
	.w-75	{min-width: 75%;}
	.w-66	{min-width: 66%;}
	.w-50	{min-width: 50%;}
	.w-33	{min-width: 50%;}
	.w-25	{min-width: 33%;}
}

@media (min-width: 1200px) {
	.w-100	{min-width: 100%;}
	.w-75	{min-width: 75%;}
	.w-66	{min-width: 66%;}
	.w-50	{min-width: 50%;}
	.w-33	{min-width: 33%;}
	.w-25	{min-width: 25%;}
}


/* =========================
   ALIGNMENT UTILITIES
========================= */

/* Horizontal alignment (within grid) */
.justify-start   { justify-items: start; }
.justify-center  { justify-items: center; }
.justify-end     { justify-items: end; }

/* Vertical alignment (within grid) */
.align-start     { align-items: start; }
.align-center    { align-items: center; }
.align-end       { align-items: end; }

/* Center entire grid content */
.center-all {
	justify-items: center;
	align-items: center;
}

/* Center individual item */
.self-center {
	justify-self: center;
	align-self: center;
}

/* =========================
   OPTIONAL: TEXT ALIGN
========================= */
.text-center { text-align: center; }


/* =========================
   GALLERY SLIDER
========================= */
.hero-slider {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Slides */
.hero-slide {
    position: absolute;
    inset: -5%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    transform: scale(1);

    will-change: transform, opacity;

    animation:
        heroFade 24s infinite,
        heroZoom 24s ease-in-out infinite;

    z-index: 0;
}

/* Content above slides */
.hero-slider > * {
    position: relative;
    z-index: 2;
}

/* Slow cinematic movement */
@keyframes heroZoom {
    from {
        transform: scale(1) translate3d(0,0,0);
    }
    to {
        transform: scale(1.08) translate3d(-1%, -1%, 0);
    }
}

/* Fade timing */
@keyframes heroFade {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    41% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.gallery-slider-wrap {
	width: 100%;
	overflow: hidden;
	/* removed vertical padding so the slider can fill section height */
}

.gallery-slider {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	cursor: grab;
	padding: 0; /* full width, no side inset */
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gallery-slider::-webkit-scrollbar {
	display: none;
}

.gallery-slider.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.gallery-slide {
	flex: 0 0 auto;
	width: clamp(240px, 70vw, 600px); /* wide enough to read as "main" image, narrow enough to show a peek of the next */
	height: 100%;
	border-radius: 0; /* square corners */
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: none;
}

.gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

@media (max-width: 768px) {
	.gallery-slider {
		gap: 16px;
	}
	.gallery-slide {
		width: 85vw;
	}
}