:root {
  /* --- Brand Colors --- */
  --color-primary: #083d5a;         /* Yale Blue: Main Brand Identity */
  --color-primary-light: #92c1d6;   /* Sky Blue Light: Accents/Hovers */
  --color-accent: #c5a365;          /* Soft Fawn: Call-to-Action/Highlights */

  /* --- Surface & Backgrounds --- */
  --color-bg-main: #f9f6f0;         /* Parchment: Primary Page Background */
  --color-bg-alt: #eaecee;          /* Platinum: Card Backgrounds/Secondary Sections */
  
  /* --- Typography --- */
  --color-text-bold: #1d2a35;       /* Jet Black: Headings and Primary Body */
  --color-text-muted: #8e9ca8;      /* Cool Steel: Captions and Helper Text */
  --color-text-on-dark: #f9f6f0;    /* Parchment: Contrast text for dark buttons/headers */

  /* --- UI Elements --- */
  --color-border: #8e9ca8;          /* Cool Steel: Subtle borders and dividers */
  --color-interactive-hover: #92c1d6; /* Sky Blue Light: Focus and Hover states */

  /* --- Status Colors --- */
  
  /* Info: Derived from your Sky Blue / Yale Blue mix */
  --color-info: #5b8ba1; 
  --color-info-bg: #e8f1f5;

  /* Error: A desaturated red to match the "Soft Fawn" warmth */
  --color-error: #bc4b41;
  --color-error-bg: #f9ecea;

  /* Success: An earthy green to complement the "Parchment" base */
  --color-success: #607d5b;
  --color-success-bg: #eff3ee;

  /* Warning: A muted gold/amber that pairs with "Soft Fawn" */
  --color-warning: #b3862e;
  --color-warning-bg: #fbf4e6;

  /* --- Overlay Colors --- */
  
  /* Option A: Brand Tint (Recommended) */
  /* Uses Yale Blue with 60% opacity for a high-end, cinematic feel */
  --color-overlay-brand: rgba(8, 61, 90, 0.6); 

  /* Option B: Neutral Depth */
  /* Uses Jet Black with 50% opacity for maximum text legibility */
  --color-overlay-dark: rgba(29, 42, 53, 0.5);

  /* Option C: Gradient (Best for bottom-aligned text) */
  --color-overlay-gradient: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(29, 42, 53, 0.8) 100%
  );

  /* --- Font Sizes --- */
  --fs-text: clamp(1rem, 0.9rem + 0.25vw, 1rem);
  --fs-h1:   clamp(2rem, 1.2rem + 2.5vw, 2.5rem);
  --fs-h2:   clamp(1.75rem, 1.1rem + 2vw, 2.125rem);
  --fs-h3:   clamp(1.5rem, 1rem + 1.6vw, 1.75rem);
  --fs-h4:   clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
  --fs-h5:   clamp(1.125rem, 0.85rem + 0.9vw, 1.25rem);
  --fs-h6:   clamp(1rem, 0.8rem + 0.6vw, 1.125rem);

  /* --- Line Heights (Compact Scale) --- */
  --lh-h1: 1.1;    /* Tightest: For large multi-line titles */
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-h5: 1.3;
  --lh-h6: 1.35;   /* Smallest heading needs slightly more space */

  --lh-text: 1.45; /* Clean & Professional: Better for UI-heavy layouts */

/* --- Font Families --- */
  --ff-display: "Source Serif 4", serif;
  --ff-body: "Source Sans 3", sans-serif;

  /* --- Font Weights --- */
  --fw-light: 300;
  --fw-reg: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* --- Typography Defaults --- */
  --fs-text: clamp(1rem, 0.9rem + 0.25vw, 1rem);
  --lh-text: 1.45;
  --lh-h1: 1.1;

  /* Helper for optical sizing */
  --font-opt-size: auto;
}

/* --- Typography Group --- */

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-reg);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-optical-sizing: var(--font-opt-size);
  color: var(--color-text-bold);
  background-color: var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .c-display {
  font-family: var(--ff-display);
  font-optical-sizing: var(--font-opt-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
}

/* Header */
.main-logo svg {
  height: 60px; /* ~75% of header height */
  width: auto;
  color: var(--color-text-bold);
  display: block;
  transition: height 0.3s ease, color 0.3s ease;
}

/* --- Desktop Breakpoint (1024px and up) --- */
@media (min-width: 1024px) {
  .main-logo svg {
    height: 80px; /* Scales up to 80% of header height */
  }
}

/* Optional: If you want a hover effect using your primary light color */
.main-logo a:hover svg {
  color: var(--color-bg-main);
}

/* Homepage */
.home-hero-section {
    position: relative;
    z-index: 1;
    overflow: hidden;

    display: flex !important;
    width: 100%;
    aspect-ratio: 2 / 3;
    background-image: var(--hero-bg-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    align-items: flex-end;
}

.home-hero-section,
.home-hero-section .l-section-h,
.home-hero-section .g-cols,
.home-hero-section .home-hero-column-wrapper,
.home-hero-section .vc_column-inner {
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.home-hero-section .l-section-h {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Move content down on mobile/tablet */
.home-hero-column-wrapper {
    padding-bottom: 1.8rem;
}

/* Mobile-first layout */
.home-hero-section .vc_column-inner > .wpb_wrapper {
    display: block;
}

/* Hide the empty second wrapper on mobile/tablet */
.home-hero-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:last-child {
    display: none;
}

/* Desktop & Laptop - unchanged */
@media (min-width: 1024px) {

    .home-hero-section {
        aspect-ratio: 16 / 9;
        background-image: var(--hero-bg-desktop);
        align-items: center;
    }

    .home-hero-column-wrapper {
        padding-bottom: 0;
    }

    .home-hero-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 3rem;
    }

    .home-hero-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:last-child {
        display: block;
    }
}

.home-hero-title {
  color: var(--color-text-on-dark, #f9f6f0);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  font-family: var(--ff-display);
}

.home-hero-tagline {
  color: var(--color-text-on-dark, #f9f6f0);
  font-size: var(--fs-h4);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  font-family: var(--ff-body);
}

.contact-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

@media (min-width: 1025px) {
    .contact-cta-wrapper {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

/* service section */
/* ==========================================
   Mobile & Tablet Base Styles (Default)
   ========================================== */

.service-section-title {
  color: var(--color-primary, #083d5a);
  font-size: var(--fs-h3);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  font-family: var(--ff-display);
  
  max-width: 100%; /* Full width on smaller devices */
}

.service-section-tagline {
  color: var(--color-primary, #083d5a);
  font-size: var(--fs-h4);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  font-family: var(--ff-body);
  
  max-width: 100%; /* Full width on smaller devices */
}

/* ==========================================
   Laptops and Desktops (From 1024px and up)
   ========================================== */
@media (min-width: 1024px) {
  .service-section-title,
  .service-section-tagline {
    max-width: 50%; /* Restricts width to ~65 characters */
    
    /* Uncomment the line below if you want the text blocks 
       centered on the screen rather than left-aligned: */
    /* margin-inline: auto; */
  }
}

/* ==========================================================================
   Bespoke Services Grid
   ========================================================================== */

.bespoke-service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.bespoke-service-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	border-radius: 1rem;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-on-dark, #f9f6f0);
	transition: transform .3s ease;
}

.bespoke-service-card:hover {
	transform: translateY(-4px);
}

.bespoke-service-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.bespoke-service-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,.8) 0%,
		rgba(0,0,0,.35) 50%,
		rgba(0,0,0,.15) 100%
	);
}

.bespoke-service-content {
	position: relative;
	z-index: 2;
	padding: 2rem;
	width: 100%;
}

.bespoke-service-title {
	margin: 0 0 .5rem;
	font-size: var(--fs-h3);
	line-height: 1.2;
	color: var(--color-text-on-dark, #f9f6f0);
}

.bespoke-service-tagline {
	font-size: var(--fs-h6);
	line-height: 1.5;
	color: var(--color-text-on-dark, #f9f6f0);
  opacity: 0.9;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.bespoke-service-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	/* First row = 2 cards */

	.bespoke-service-card:nth-child(1),
	.bespoke-service-card:nth-child(2) {
		grid-column: span 3;
		min-height: 450px;
	}

	/* Second row = 3 cards */

	.bespoke-service-card:nth-child(3),
	.bespoke-service-card:nth-child(4),
	.bespoke-service-card:nth-child(5) {
		grid-column: span 2;
		min-height: 360px;
	}
}

/* the-mobile-atelier-section */
/* ==========================================================================
   Shared Section Layout
   ========================================================================== */

.the-mobile-atelier-section,
.hour72-express-section {
  background: var(--color-primary, #083d5a);
}

/* Main 2-wrapper grid */
.the-mobile-atelier-section .vc_column-inner > .wpb_wrapper,
.hour72-express-section .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

/* Both inner wrappers */
.the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper,
.hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper {
  min-width: 0;
}

/* Mobile order */
.the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
.hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1) {
  grid-row: 2;
}

.the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2),
.hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2) {
  grid-row: 1;

  aspect-ratio: 1280 / 854;
  width: 100%;
  min-height: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content spacing */
.content-wrapper {
  padding: clamp(2rem, 1rem + 4vw, 6rem);
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper p {
  color: var(--color-text-on-dark, #f9f6f0);
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3 {
  width: 80%;
}

/* Desktop */
@media (min-width: 1025px) {

  .the-mobile-atelier-section .vc_column-inner > .wpb_wrapper,
  .hour72-express-section .vc_column-inner > .wpb_wrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* Reset mobile ordering */
  .the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
  .the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2),
  .hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
  .hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2) {
    grid-row: auto;
  }

  .the-mobile-atelier-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2),
  .hour72-express-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2) {
    height: auto;
  }

}

/* ==========================================================================
   Shared Section Layout
   Image in Wrapper 1
   ========================================================================== */

.island-luxury-collection-section,
.lifetime-bespoke-section {
  background: var(--color-accent, #c5a365);
}

/* Main 2-wrapper grid */
.island-luxury-collection-section .vc_column-inner > .wpb_wrapper,
.lifetime-bespoke-section .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

/* Both inner wrappers */
.island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper,
.lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper {
  min-width: 0;
}

/* Mobile order: image first */
.island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
.lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1) {
  grid-row: 1;

  aspect-ratio: 1280 / 854;
  width: 100%;
  min-height: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2),
.lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2) {
  grid-row: 2;
}

/* Content spacing */
.content-wrapper {
  padding: clamp(2rem, 1rem + 4vw, 6rem);
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper p {
  color: var(--color-text-on-dark, #f9f6f0);
}

/* Desktop */
@media (min-width: 1025px) {

  .island-luxury-collection-section .vc_column-inner > .wpb_wrapper,
  .lifetime-bespoke-section .vc_column-inner > .wpb_wrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* Reset mobile ordering */
  .island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
  .island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2),
  .lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
  .lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(2) {
    grid-row: auto;
  }

  .island-luxury-collection-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1),
  .lifetime-bespoke-section .vc_column-inner > .wpb_wrapper > .w-vwrapper:nth-child(1) {
    height: auto;
  }

}

/* Footer section */
.main-footer-section {
  background: var(--color-primary-light, #92c1d6);
}

.main-footer-section .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1025px) {
  .main-footer-section .vc_column-inner > .wpb_wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
}
}

.review-wrapper .sb-post-item-wrap {
  background: var(--color-bg-alt, #eaecee)!important;
  padding: 0.8rem;
  border-radius: 12px;
}

.review-wrapper .sb-post-item {
  background: var(--color-bg-alt, #eaecee)!important;
  padding: 1.2rem;
}

.review-wrapper .sbr-owl-dots .sbr-owl-dot span {
    background: #083d5a;
}

.instagram-section {
  background: var(--color-primary, #083d5a);
}

.instagram-feed-wrapper .sbi-owl-dots .sbi-owl-dot span {
    -webkit-backface-visibility: visible;
    background: #8e9ca8!important;
}

.instagram-section-title,
.instagram-section-tagline {
  color: var(--color-text-on-dark, #f9f6f0);
}

#sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-number,
#sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a,
#sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a:hover,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commenter,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commenter:hover,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username p,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username:hover p,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption a,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption a:hover,
.sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_username,
.sbi_lb-comments-enabled .sbi_lb-closeContainer .sbi_lb-close {
  color: var(--color-text-on-dark, #92c1d6);
}