:root {
  /* Your Site's Theme Variables */
  --accent: #990000;
  --text-on-accent: #FDF9F3;
  --header-height: 72px;
  --bg: #FDF9F3;
  --text-color: #444444;

/* NEW, MORE ROBUST LOGO STYLES */
.brand {
  display: inline-block; /* Ensure the link itself takes up space */
  height: 26px;         /* Set the height on the container */
}

.brand img {
  display: block;       /* Make the image a block inside the link */
  height: 100%;         /* Make the image fill the container's height */
  width: auto;          /* Maintain aspect ratio */
}

@media (max-width: 768px) {
  .brand { 
    height: 20px; 
  }
}




}

/* --- font size classes --- */
.small-text { 
  font-size: 0.75em; 
}

/* --- font weights --- */
.semi-bold {
  font-weight: 600; /* Medium-bold look */
}

.extra-bold {
  font-weight: 800; /* Very bold look */
}


body {
  margin: 0;
  font-family: 'Source Serif 4', serif;
  background-color: var(--bg);
  color: var(--text-color);
}


/* --- Custom link style for text links --- */
.text-link {
  color: #990000;              /* your brand red */
  text-decoration: underline;
  text-underline-offset: .12em;
  transition: text-decoration-thickness 0.2s ease, opacity 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration-thickness: 2px;
}

.text-link:active {
  opacity: 0.85;
}

.text-link:visited {
  color: #7a0033; /* optional darker variant */
}


/* --- NEW: Hero Section Styles --- */
.hero {
  position: relative;
  /* UPDATED: Change from 80vh to 100vh to fill the entire screen height */
  height: calc(100dvh - 72px);
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-on-accent); /* Assuming video is dark, use light text */
  overflow: hidden; /* Prevents content from spilling out */
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Places the background behind the content */
}

/* Style for both video and fallback image to cover the area */
.hero__video,
.hero__fallback img,
.hero__fallback source {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the media covers the entire container */
  object-position: center;
}

/* By default, the fallback is hidden */
.hero__fallback {
  display: none;
}

/* If the video fails to load (e.g., on data saver mode), browsers might hide it.
   This selector targets that case and shows our fallback image instead. */
.hero__video:not([poster*="."]) + .hero__fallback {
    display: block;
}

.hero__content {
  position: absolute;
  bottom: 5%; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* Or another width */
  text-align: center;
  padding: 2rem;
  /* Add a subtle background to ensure text is readable over any video */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.hero__content h1 {
  color: var(--text-on-accent);
}
/* --- End of Hero Section Styles --- */


/* UPDATED: Removed fixed height properties to allow for proportional scaling */
.image__fullwidth {
  width: 100%;
  display: block;
}

/* UPDATED: Set height to auto to maintain aspect ratio */
.image__fullwidth img {
  width: 100%;
  height: auto;
  display: block; /* Removes extra space below the image */
}

/* NEW: Add this media query for the mobile full-bleed effect */
@media (max-width: 767px) {
  .image__fullwidth {
    /* This calculates the full viewport width and positions the element */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/* REMOVE the old .page rule if it exists */
/* .page { padding: 2rem; } */

/* --- NEW: Section Styles --- */
.section {
  padding: 2rem 2rem 2rem 2rem;
  display: grid;
  place-items: center;
  

}

.section .content {
  width: 100%;
  max-width: 800px;
}

.section--accent {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.section--lightaccent {
  background-color: #F8F3EA;
  color: var(--text-color);
}

/* Style all headings to use the new display font (from your Typekit kit) */
h1, h2, h3, h4, h5, h6 {
  /* NEW: Set the heading font to futura-pt */
  font-family: 'futura-pt', sans-serif;
  font-weight: 100;
  color: var(--accent);
  margin-top: 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Invert heading color on accent sections */
.section--accent h1,
.section--accent h2,
.section--accent h3,
.section--accent h4,
.section--accent h5,
.section--accent h6 {
  color: var(--text-on-accent);
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }

/* --- This can go after your main heading styles --- */

/* Adds space between the two headings */
.section > .content > h2 {
  margin-top: 1rem;
}

/* Adds space above the summary text */
.summary-text {
  margin-top: 1.5rem;
}

/* Styles the summary paragraph itself */
.summary-text p {
  margin: 0;
  font-size: 1.1rem; /* Slightly larger text */
  line-height: 1.6;
}

/* Makes the bolded items in the summary stand out */
.summary-text b {
  font-weight: 600; /* A slightly heavier bold */
  color: var(--text-color);
}

/* --- End of Section Styles --- */


/* --- UPDATED: Button Styles --- */
.button {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* NEW: Square edges and all-caps text */
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Adds a little space between letters */
}


/* Solid Red Button Style */
.button--red {
  background-color: #800909;
  color: var(--text-on-accent);
  border-color: var(--accent);
  color: #FDF9F3;
  border: 2px solid;
}

.button--red:hover {
    background-color: var(--accent);
}

/* Outlined Button Grey Style  */
.button--grey {
  background-color: var(--bg);
  color: var(--text-color);
  border-color: var(--text-color);
}

/* Outlined Button Style (replaces grey) */
.button--outline {
  background-color: transparent;
  color: var(--text-color);
  border-color: var(--text-color);
}

/* A wrapper for buttons to add space between them */
.button-group {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* --- End of Button Styles --- */


.site-footer { text-align: center; padding: 1rem; background-color: var(--accent); color: var(--text-on-accent);}
.site-header { display: flex; align-items: center; height: var(--header-height); padding: 0 24px; background-color: var(--accent); color: var(--text-on-accent); z-index: 100; }
.brand { color: inherit; text-decoration: none; font-weight: bold; }
.header-controls { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hamburger { background: none; border: none; color: inherit; cursor: pointer; padding: 5px; z-index: 120; margin-right: 16px; }
.hamburger .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform-origin: center; }
html.nav-open .hamburger .line1 { transform: translateY(6px) rotate(45deg); }
html.nav-open .hamburger .line2 { opacity: 0; }
html.nav-open .hamburger .line3 { transform: translateY(-6px) rotate(-45deg); }
.desktop-nav { display: none; }
@media (min-width: 900px) {
  .hamburger { display: none; }
  .mobile-nav { display: none !important; }
  /* UPDATED: Adjust desktop navigation margins */
  .desktop-nav { 
    display: block; 
    margin-left: auto; /* Pushes nav to the right, next to the brand */
    margin-right: 2rem; /* Creates space between nav and cart controls */
  }
  .brand { order: -1; }
  /* NEW: Ensure header controls (cart) stay on the far right */
  .header-controls {
    margin-left: 0;
  }
}
.desktop-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.desktop-nav a { color: inherit; text-decoration: none; }
.desktop-nav a.active { text-decoration: underline; }


/* --- Footer link styles --- */
.footer-links {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.footer-links a,
.footer-links a:visited,
.footer-links a:active {
  color: inherit; /* same as footer text */
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, text-decoration-thickness 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-links .divider {
  opacity: 0.4;
  user-select: none;
}





/* --- Cart --- */
.cart-button {
  display: flex;
  align-items: center;
  gap: 0px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.cart-button .snipcart-items-count {
  font-size: 0.8rem;
  font-weight: 600;
  /* Change this from rgba(255, 255, 255, 0.2) to transparent */
  background-color: transparent;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-content: center;
  order: 2;
}
.cart-button svg { order: 1; }
html.nav-open { overflow: hidden; }

/* --- DEFINITIVE MOBILE MENU STYLES --- */

/* 1. Make the menu full-screen and position it off-screen to the left */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important; /* Force full width */
  height: 100% !important; /* Force full height */
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: 110;
  display: flex !important; /* Force flex display */
  justify-content: center;
  align-items: center;
  padding: 0 !important; /* Remove any old padding */
}

/* 2. When open, slide it into view from the left */
.mobile-nav.open {
  transform: translateX(0);
}

/* 3. Style the navigation list and links for the full-screen layout */
.mobile-nav .nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-nav .nav-link {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 1rem 0;
  font-family: 'Source Serif 4', serif;
  font-size: 1.75rem;
  font-weight: 600;
}

/* 4. Position the close button (hamburger) inside the menu */
html.nav-open .hamburger {
    position: absolute;
    top: 20px;
    left: 20px;
}

.backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; z-index: 105; pointer-events: none; }
.backdrop.show { opacity: 1; pointer-events: auto; }
.snipcart-items-count { display: grid !important; opacity: 1 !important; }

/* --- SNIPCART CUSTOM STYLES (from your cart.php) --- */
.snipcart-modal {
    background-color: var(--bg);
}
.snipcart-cart-header {
    background-color: var(--accent);
}
.snipcart-cart-header .snipcart-modal__close-icon,
.snipcart-cart-header__icon,
.snipcart-modal__close-title,
.snipcart-cart-header__title,
.snipcart-cart-header__option {
    color: var(--text-on-accent);
   
}



/* Ensure the count is always visible and sized correctly */
.snipcart-items-count {
  display: grid !important;
  opacity: 1 !important;
}

/* Remove the blue focus outline that can also cause a perceived jump */
.cart-button:focus,
.cart-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}








/* --- Fix for Snipcart Header Overlap (Corrected) --- */
/* This uses a more specific selector and !important to force the override */
#snipcart-wrapper .snipcart-layout__content {
    padding-top: var(--header-height) !important;
}

/* --- SNIPCART CUSTOM STYLES (Hiding Custom Header) --- */

/* Set the main background color of the modal */
.snipcart-modal {
    background-color: var(--bg);
}



/* Hide the custom header from snipcart-templates.html as requested */
/*.snipcart-cart-header {
    display: none;
}
 */

/* --- Header Cart Button Fixes (Load Immediately) --- */

/* Prevent the "jump" by setting the icon's margin from the start */
.cart-button svg {
    margin-right: 5px;
}

/* Ensure the item count is always visible */
.snipcart-items-count {
  display: grid !important;
  opacity: 1 !important;
}

/* Remove the blue focus outline on the cart button */
.cart-button:focus,
.cart-button:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- Header --- */

/* NEW: Desktop Header Layout */
@media (min-width: 768px) {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .site-header__nav {
    margin-left: auto; /* Pushes the nav to the right */
    margin-right: 2rem; /* Adds some space between nav and cart */
  }
}

/* --- NEW: Form Styles --- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Space between form groups */
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Space between label and input */
}

.form label {
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  color: var(--text-color);
}

.form input[type="text"],
.form select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Important for padding and width */
  -webkit-appearance: none; /* Removes default browser styling on iOS */
  -moz-appearance: none;
  appearance: none;
  /* NEW: Set the text color to match other inputs */
  color: var(--text-color);
}

/* NEW: Rule to make the paragraph selectors shorter */
.form__grid--four-col .form__group select {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-size: 0.9rem;
}

/* NEW: Style for placeholder options in selects */
.form select.placeholder-shown {
  color: #6c757d; /* A muted grey for the placeholder text */
}

/* Custom arrow for select dropdowns */
.form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Grid layout for side-by-side elements like the age selectors */
.form__grid--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem; /* row-gap column-gap */
}

/* NEW: Grid for the paragraph selectors */
.form__grid--four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
}

/* NEW: Responsive adjustments for grids */
@media (max-width: 767px) {
  .form__grid--two,
  .form__grid--four-col {
    grid-template-columns: 1fr; /* Stack to a single column on mobile */
  }
}

/* NEW: Styles for the checkbox group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* NEW: Styles for the letter preview area */
.letter-preview {
  background-color: #fff;
  padding: 2rem;
  margin-top: 2rem;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Media query to make the letter preview full-width on mobile */
@media (max-width: 767px) {
  .letter-preview {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* UPDATED: This is the key fix. It forces padding to be inside the width. */
    box-sizing: border-box;
    
    /* Adjust padding for the smaller screen */
    padding-left: 1rem;
    padding-right: 1rem;

    /* Remove side borders and radius for a seamless edge-to-edge look */
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

/* Full-width button style */
.button--full {
  width: 100%;
  background-color: #6c757d; /* A neutral grey */
  color: #ffffff;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.button--full:hover {
  background-color: #5a6268;
}

/* NEW: Styles for notes/info sections within forms */
.notes {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.notes p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.notes p:last-child {
  margin-bottom: 0;
}


/* letter -preview */

/* highlight letter - use in preview: <span class=\"highlight\">*/
.highlight {

background-color: #E69F97;
}

/* highlight letter - use in preview: <span class=\"highlight\">*/


.oldornew {
font-family: 'Crimson Text', serif;
font-size: .5em;
border: 1px solid #D3CFC8;
color: #999;
text-transform: uppercase;
padding-left:.3em;
padding-right:.3em;

padding-top:.1em;
padding-bottom:.1em;
}


.loose-lines {
  line-height: 1.3;
}

/* Loader Styles */
#loader {
  display: none; /* Hidden by default */
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #b41818; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 10;
}

.letter-preview {
  position: relative; /* This is the positioning context for the loader */
  min-height: 100px; 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.content-loading {
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}

/* Add this new rule */
.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}







/* additional layouts */


/*************************************************************************/
/* STYLE A - Two-column that never stacks (mobile + desktop stay 2 cols) */
/* Base 2-col grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Never stack: keep 2 cols even on tiny screens */
.grid-2--no-stack {
  grid-template-columns: 1fr 1fr;
  /* prevent overflow when content is wide */
}
.grid-2--no-stack .col { min-width: 0; }


/*************************************************************************/
/* STYLE B - Two-column that stacks on mobile, 2 cols on desktop */
/* Stack on mobile, 2 cols on desktop */
.grid-2--stack {
  display: grid;
  grid-template-columns: 1fr;   /* default: stack */
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .grid-2--stack { grid-template-columns: 1fr 1fr; }
}
.grid-2--stack .col { min-width: 0; }

/* MOBILE FULL-BLEED (escapes section padding) */
.mobile-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (min-width: 900px) {
  .mobile-bleed {
    width: auto;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }
}
/* Inner bordered “card” so content doesn’t touch edges */
.panel {
  background: var(--bg);
  color: var(--text-color);
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
/* When sitting on accent sections, flip panel text color if you prefer */
.section--accent .panel {
  background: rgba(253,249,243,.95);
  color: var(--text-color);
  border-color: rgba(0,0,0,.06);
}


/*************************************************************************/
/* STYLE C - Timeline / Story layout */

/* Timeline */
.timeline {
  position: relative;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0 0 0 1.75rem; /* space for line + dots */
  border-left: 2px solid rgba(0,0,0,.1);
}
.section--accent .timeline { border-left-color: rgba(255,255,255,.35); }

.timeline__item { position: relative; padding: 0 0 1.5rem 0; }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
  position: absolute; left: -0.63rem; top: .25rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(153,0,0,.15);
}
.section--accent .timeline__dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

.timeline__title { margin: 0 0 .25rem 0; color: var(--accent); }
.section--accent .timeline__title { color: var(--text-on-accent); }

.timeline__body p { margin: 0; }




/*************************************************************************/
/* STYLE D -  */

/* Alternating band */
.band {
  display: grid;
  gap: 1rem;
  align-items: center;
  background: var(--bg);
  color: var(--text-color);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: clip;
}
.section--accent .band,
.section--lightaccent .band {
  background: rgba(253,249,243,.95);
  border-color: rgba(0,0,0,.06);
}

.band__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; aspect-ratio: 16/9;
}
.band__copy { padding: 1.25rem; }

@media (min-width: 900px) {
  .band { grid-template-columns: 1.1fr .9fr; }
  .band--reverse { grid-template-columns: .9fr 1.1fr; }
  .band--reverse .band__media { order: 2; }
  .band--reverse .band__copy  { order: 1; }
  .band__copy { padding: 2rem; }
}

/*************************************************************************/
/* STYLE E - Testimonials / Quote block -  */

/* Quotes grid */
.quotes {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.quote-card {
  background: var(--bg);
  color: var(--text-color);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.section--lightaccent .quote-card,
.section--accent .quote-card {
  background: rgba(253,249,243,.95);
  border-color: rgba(0,0,0,.06);
}

.quote-card blockquote {
  margin: 0 0 .75rem 0;
  font-size: 1.05rem;
  line-height: 1.6;
  position: relative;
}
.quote-card blockquote::before {
  content: "“";
  position: absolute; left: -0.5rem; top: -0.6rem;
  font-size: 2.5rem; line-height: 1; color: var(--accent);
  opacity: .25;
}
.quote-card figcaption {
  font-size: .95rem;
  color: #666;
}


/*************************************************************************/
/* CENTER BUTTONS ON PAGE -  */

/* Utility: center buttons or inline elements */
.button-group--center {
  text-align: center;
}

/* Optional: if you want consistent spacing */
.button-group--center .button {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}



/*************************************************************************/
/* TWEEKS -  */


/* padding */
.padtop20 {
  padding-top: 20px;
}
.padbottom20 {
  padding-bottom: 20px;
}


.padtop15 {
  padding-top: 15px;
}
.padbottom15 {
  padding-bottom: 15px;
}

.padtop10 {
  padding-top: 10px;
}
.padbottom10 {
  padding-bottom: 10px;
}




/* MOBILE ONLY UTILITY */
.mobile-only { display: none !important; /* force hidden by default */ }
@media (max-width: 899px) {
  .mobile-only { display: flex !important; /* force visible only on mobile */ }
}




.section-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.section-divider__line {
  width: 120px;
  height: 1px;
  background-color: #727272;
  opacity: 0.3;
  border-radius: 2px;
}

/* === Variant A: Thin Gold Line === */
.section-divider--gold .section-divider__line {
  background: linear-gradient(to right, transparent, #d4af37, transparent);
  height: 1px;
  opacity: 0.8;
  width: 160px;
}


/* === Sticky footer layout === */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Use dynamic viewport height for mobile browsers */
}

main {
  flex: 1; /* Allows the main content to expand and push footer down */
}

.site-footer {
  flex-shrink: 0; /* Keeps footer from squashing if viewport is short */
}