:root{
    --cream: #F3EEE2;
    --paper: #FBF8F1;
    --navy: #101E33;
    --navy-soft: #182B47;
    --red: #7E1A1A;
    --red-deep: #5E1212;
    --brass: #A9822E;
    --brass-light: #C9A75A;
    --stone: #D8CFB8;
    --ink: #201A12;
	--black: #000000;
  }
  
  /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #787878;  /* The default color of the main navmenu links */
  --nav-hover-color: #e59d02; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #1b1a1a; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #1b1a1a; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #787878; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e59d02; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

:root {
	  scroll-behavior: smooth;
}

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; 
	padding: 0;
    background:var(--cream);
    color:var(--ink);
    font-family:'EB Garamond', serif;
    font-size:18px;
    line-height:1.6em;
	width: 100%;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}

@media (min-width: 1200px) { 
  .eyebrow{
    font-family:'Inter', sans-serif;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:13px;
	font-color:var(--gold);
  }
  
  .hero-copy .sub{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(19px, 2.6vw, 26px);
    color:var(--gold);
    margin:0 0 8px;
  }  
}

@media (max-width: 1199px) { 
  .eyebrow{
    font-family:'Inter', sans-serif;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:13px;
	font-color:var(--black);
  }
  
  .hero-copy .sub{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(19px, 2.6vw, 26px);
    color:var(--ink);
    margin:0 0 8px;
  }  
}

  h1,h2,h3,h4,h5,h6{
    font-family:'Playfair Display', serif;
    margin:0;
    color:var(--navy);
  }

  /* ---------- utility bar ---------- */
@media (min-width: 2000px) {  
  .utility-bar{max-width:3330px;background-color:var(--navy); color:var(--stone); font-family:'Inter', sans-serif; font-size:13px; letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;flex-wrap:norap;width:100%;box-sizing:border-box;left:0;right:0;}
  .utility-bar .inner{max-width:100%; padding:9px 9px; display:flex; align-ites:center;gap:20px; flex-wrap:nowrap;white-space:nowrap;width:100%;padding: 0 20px;box-sizing: border-box;}
  .utility-bar a{text-decoration:none;color:var(--stone);}
  .utility-bar a:hover, .utility-bar a:focus-visible{color:var(--brass-light);}
  .utility-bar .badges span{margin-left:18px;}
  .utility-bar .badges span:first-child{margin-left:0;}
  .utility-bar .inner .email{padding-top:18px;padding-bottom:0px;}

  /* ---------- nav ---------- */
  .nav{background:var(--ink); border-bottom:1px solid var(--stone);}
  .nav .inner{max-width:100%; padding:4px 2px; display:flex; align-items:center;gap:20px; flex-wrap:nowrap;white-space:nowrap;width:100%}
  .nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .nav .seal{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--brass);color:var(--brass);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display', serif;font-weight:700;font-size:14px;}
  .nav .brand-name{font-family:'Playfair Display', serif;font-weight:700;font-size:18px;color:var(--navy);white-space:nowrap;}
  .nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-family:'Inter', sans-serif;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;}
  .nav ul a{text-decoration:none;color:var(--ink);padding-bottom:4px;border-bottom:2px solid transparent;}
  .nav ul a:hover, .nav ul a:focus-visible, .nav ul a.active{color:var(--red);border-bottom-color:var(--brass);}
  .nav .ticket{background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:14px;padding:16px 26px;border-radius:8px;box-shadow:0 14px 26px rgba(20,8,8,.22);flex:none;}
  .nav .ticket-icon{flex:none;width:30px;height:30px;display:flex;align-items:right;justify-content:center;}
  .nav .ticket-text .t1{font-family:'Inter', sans-serif;color:var(--ink);font-weight:700;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;}
  .nav .ticket-text .t2{font-family:'Inter', sans-serif;font-size:12px;color:var(--ink);margin-top:2px;}
  .nav .ticket:hover, .ticket:focus-visible{box-shadow:0 18px 32px rgba(20,8,8,.3);outline:2px solid var(--brass);outline-offset:3px;}
}

  /* ---------- utility bar ---------- */
@media (max-width: 1999px) {  
  .utility-bar{max-width:1800px;background:var(--navy); color:var(--stone); font-family:'Inter', sans-serif; font-size:13px; letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;flex-wrap:norap;}
  .utility-bar .inner{max-width:1200px; margin:0 auto; padding:9px 28px; display:flex; align-ites:center;gap:20px; flex-wrap:nowrap;white-space:nowrap;}
  .utility-bar a{text-decoration:none;color:var(--stone);}
  .utility-bar a:hover, .utility-bar a:focus-visible{color:var(--brass-light);}
  .utility-bar .badges span{margin-left:18px;}
  .utility-bar .badges span:first-child{margin-left:0;}
  .utility-bar .email{white-space: norap;}

  /* ---------- nav ---------- */
  .nav{background:var(--paper); border-bottom:1px solid var(--stone);}
  .nav .inner{max-width:1200px; margin:0 auto; padding:46px 28px; display:flex; align-items:center;gap:20px; flex-wrap:nowrap;white-space:nowrap;}
  .nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .nav .seal{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--brass);color:var(--brass);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display', serif;font-weight:700;font-size:14px;}
  .nav .brand-name{font-family:'Playfair Display', serif;font-weight:700;font-size:18px;color:var(--navy);white-space:nowrap;}
  .nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-family:'Inter', sans-serif;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;}
  .nav ul a{text-decoration:none;color:var(--ink);padding-bottom:4px;border-bottom:2px solid transparent;}
  .nav ul a:hover, .nav ul a:focus-visible, .nav ul a.active{color:var(--red);border-bottom-color:var(--brass);}
  
   .nav .ticket{
    background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
    color:var(--paper);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 26px;
    border-radius:8px;
    box-shadow:0 14px 26px rgba(20,8,8,.22);
    flex:none;
  }
  .nav .ticket-icon{flex:none;width:30px;height:30px;display:flex;align-items:right;justify-content:center;}
  .nav .ticket-text .t1{
    font-family:'Inter', sans-serif;color:var(--ink);font-weight:700;font-size:15.5px;
    letter-spacing:.03em;text-transform:uppercase;
  }
  .nav .ticket-text .t2{
    font-family:'Inter', sans-serif;font-size:12px;color:var(--ink);margin-top:2px;
  }
  .nav .ticket:hover, .ticket:focus-visible{
    box-shadow:0 18px 32px rgba(20,8,8,.3);
    outline:2px solid var(--brass);
    outline-offset:3px;
  }
}


/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-left: 10px;
    cursor: pointer;
    transition: color 0.3s;
	position:fixed;
	top: 0;
	left: 0;
	height: 100%;
    width: 600px;	
	z-index: 9996;
  }

  /* Container relative context */
  .utility-bar {
    position: relative;
    width: 100%;
  }

  /* Hide regular links by default on mobile when menu is closed */
  #myTopnav a:not(:first-child):not(.icon) {
    display: none;
  }
  
  /* FORCE HAMBURGER ICON TO THE RIGHT SIDE */
  #myTopnav a.icon {
    position: fixed !important; /* Forces coordinates relative to the screen, not parents */
    left: 20px !important;    /* Hard anchors it to the absolute right viewport edge */
    top: 20px !important;     /* Adjust this to match your logo vertical alignment */
    display: block !important;
    z-index: 10002 !important; /* Stays above the sidebar mesh */
    font-size: 28px !important;
    float: none !important;    /* Destroys standard topnav desktop float mechanics */
    text-decoration: none;  }

  /* Hide the hamburger icon completely only when the menu is open */
  #myTopnav.responsive a.icon {
    display: none !important;
  }

  /* Sidebar styling locked to the left edge */
  #myTopnav.responsive {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 480px; 
    height: 100vh; 
    background-color: var(--ink); 
    box-shadow: 4px 0 15px rgba(0,0,0,0.3); 
    z-index: 9999 !important; 
    
    display: flex !important;
    flex-direction: column;
    padding-top: 40px; 
    box-sizing: border-box;
  }

  /* Make links stack vertically inside the menu */
  #myTopnav.responsive a:not(.icon) {
    display: block !important;
    width: 100%;
    text-align: left;
    padding: 15px 25px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0; 
  }

  /* Format ticket module inside vertical stack */
  #myTopnav.responsive a.ticket {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    margin: 15px; 
    width: calc(100% - 30px);
  }
  
  .nav {
    padding: 0;
    z-index: 9997;
  }

  .nav ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .nav a,
  .nav a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .nav a i,
  .nav a:focus i {
	float: left;
	font-size: 17px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    /*display: flex;*/
	display:block;
	text-align: center;
	padding: 14px, 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .nav a i:hover,
  .nav a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .nav a:hover,
  .nav .active,
  .nav .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .nav .active i,
  .nav .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .nav .dropdown ul {
    position: static;
    display: flex;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .nav .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .nav .dropdown>.dropdown-active {
	float: left;
    overflow: hidden;
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu ul {
    display: block;
  }
  
  .topnav a:not(:first-child) {
    display: none;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
  }
 
 /* When JS adds the .responsive class, turn it into a left sidebar */
  .topnav.responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Width of your left sidebar */
    height: 100vh; /* Full viewport height */
    background-color: #ffffff; /* Change to match your design */
    box-shadow: 2px 0 10px rgba(0,0,0,0.2); /* Shadow on the right edge */
    z-index: 9999; /* Keeps sidebar on top of all content */
    display: flex;
    flex-direction: column; /* Stack links vertically */
    padding-top: 60px; /* Room at the top so links don't crowd */
  }

  /* Show the links inside the open sidebar */
  .topnav.responsive a {
    display: block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 20px; /* Comfortable mobile tap targets */
  }

  /* Keep the hamburger icon absolute so user can close the menu */
  .topnav.responsive a.icon {
    position: absolute;
    top: 15px;
    right: 15px;
  }  
}
 
 
@media (min-width: 1200px) { 
  .image-container {
    position: relative;
    display: inline-block; /* Adjusts wrapper size to fit the image */
  } 
 
 
  .responsive-image {
    display: flex;
    width: 100%;
    height: auto;
  }  
  
  .text-overlay {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly offsets the element's own height/width */
  
    /* Styling to make the text legible over images */
    color:var(--ink);
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
  }  
}

  

  /* ---------- hero ---------- */
  .hero{
    width: 94vw;
    max-width: 1600px;
    margin: 0 auto;
   /*position:relative;
    background:var(--cream);
    overflow:hidden;*/
  }
  
  .hero .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  
  .hero img {
    width: 100%;
    height: auto;
    display: block;
  }  
  
  .hero-photo{
    position:relative;
	/*height: 100vw;
	background-size; cover;
    /*width:1320px;
	height:1192px;
    aspect-ratio:1024/720;
	background-size: cover;*/
    /*background-image:url('../img/hero_band.png');
    /*background-position:50% 100%;*/
  }
  .hero-photo::after{
    content:"";
    position:absolute;
    inset:0;
    /*background:linear-gradient(180deg, rgba(16,30,51,.86) 0%, rgba(16,30,51,.34) 32%, rgba(16,30,51,.02) 52%, rgba(16,30,51,.55) 100%);*/
  }
  .hero-copy{
    /*position:absolute;*/
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:56px 24px 0;
    z-index:2;
  }
  .hero-copy .eyebrow{color:var(--ink);}
  .hero-copy h1{
    color:var(--ink);
    font-size:clamp(38px, 7vw, 74px);
    font-weight:800;
    letter-spacing:.01em;
    margin:10px 0 18px;
    text-shadow:0 2px 24px rgba(0,0,0,.35);
  }
  .divider-star{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--ink);
    margin:6px 0 20px;
  }
  .divider-star .line{
    width:120px;
    height:1px;
    background:var(--ink);
    opacity:.7;
  }
  .hero-copy .sub{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(19px, 2.6vw, 26px);
    color:var(--ink);
    margin:0 0 8px;
  }
  .hero-copy .fine{
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:var(--ink);
    letter-spacing:.03em;
  }
  .fine .sep{margin:0 10px; color:var(--ink);}

  /* ---------- ticket CTA ---------- */
  .ticket-wrap{
	background-color:var(--ink);  
    display:flex;
    justify-content:center;
    margin-top:-46px;
    position:relative;
    z-index:5;
    padding:0 20px;
  }
  .ticket{
    background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
    color:var(--paper);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 34px;
    border-radius:8px;
    box-shadow:0 18px 34px rgba(20,8,8,.35);
    position:relative;
    max-width:520px;
    width:100%;
    border:1px solid rgba(255,255,255,.15);
  }
  .ticket::before,
  .ticket::after{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    background:var(--ink);
    border-radius:50%;
  }
  .ticket::before{left:-11px;}
  .ticket::after{right:-11px;}
  .ticket .perf{
    position:absolute;
    top:8px;
    bottom:8px;
    right:178px;
    border-left:2px dashed rgba(255,255,255,.45);
  }
  .ticket-icon{
    flex:none;
    width:34px;height:34px;
    display:flex;
	align-items:center;
	justify-content:center;
  }
  .ticket-text{flex:1;}
  .ticket-text .t1{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:16px;
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .ticket-text .t2{
    font-family:'Inter', sans-serif;
    font-size:10px;
    color:var(--ink);
    margin-top:2px;
  }
  .ticket-stub{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:.08em;
    color:var(--brass-light);
    padding-left:26px;
    white-space:nowrap;
  }
  .ticket:hover, .ticket:focus-visible{
    box-shadow:0 22px 40px rgba(20,8,8,.45);
    outline:2px solid var(--brass-light);
    outline-offset:3px;
  }

  /* ---------- trust strip ---------- */
  .trust{
    background-color:var(--ink);
    padding:70px 24px 40px;
  }
  .trust .inner{
    max-width:1080px;
    margin:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
  }
  .trust-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:0 28px;
    border-left:1px solid var(--stone);
  }
  .trust-item:first-child{border-left:none;padding-left:0;}
  .trust-item:last-child{border-right:none;padding-right:0;}
  .trust-item:nth-child{border-right:none;border-left:none;padding-right:0padding-left:none;}
  .trust-icon{
    flex:none;
    width:50px;
	height:50px;
    border-radius:50%;
    border:1.5px;
    display:flex;align-items:center;justify-content:center;
    color:var(--brass);
  }
  .trust-item h3{
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--navy);
    margin-bottom:150px;
  }
  .trust-item p{
    margin:0;
    font-size:16px;
    color:#4b4638;
  }
  
  .ticket{
    background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
    color:var(--paper);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 26px;
    border-radius:8px;
    box-shadow:0 14px 26px rgba(20,8,8,.22);
    flex:none;
  }
  .ticket-icon{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
  .ticket-text .t1{
    font-family:'Inter', sans-serif;color:var(--cream);font-weight:700;font-size:15.5px;
    letter-spacing:.03em;text-transform:uppercase;
  }
  .ticket-text .t2{
    font-family:'Inter', sans-serif;font-size:12px;color:var(--cream);margin-top:2px;
  }
  .ticket:hover, .ticket:focus-visible{
    box-shadow:0 18px 32px rgba(20,8,8,.3);
    outline:2px solid var(--brass);
    outline-offset:3px;
  }


 /* ---------- who we serve ---------- */
  .serve{
    background:var(--paper);
    text-align:center;
    padding:10px 24px 64px;
  }
  .serve p{
    max-width:640px;
    margin:0 auto 30px;
    font-size:19px;
    color:#3c372b;
  }
  .explore{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--brass);
    text-decoration:none;
    border:1.5px solid var(--brass);
    padding:14px 26px;
    border-radius:2px;
    transition:background .18s ease, color .18s ease;
  }
  .explore:hover, .explore:focus-visible{
    background:var(--brass);
    color:var(--paper);
    outline:none;
  }

  /* ---------- process ribbon (signature) ---------- */
  .ribbon{
    background:var(--navy);
    padding:64px 24px;
    position:relative;
  }
  .ribbon .inner{
    max-width:1080px;
    margin:0 auto;
  }
  .ribbon-head{
    text-align:center;
    margin-bottom:44px;
  }
  .ribbon-head .eyebrow{color:var(--brass-light);}
  .ribbon-head h2{
    color:var(--paper);
    font-size:clamp(28px,4vw,40px);
    margin-top:8px;
  }
  .steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .steps::before{
    content:"";
    position:absolute;
    top:26px;
    left:6%;
    right:6%;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--brass) 0 10px, transparent 10px 20px);
  }
  .step{
    text-align:center;
    padding:0 16px;
    position:relative;
  }
  .step .seal{
    width:52px;height:52px;
    margin:0 auto 18px;
    border-radius:50%;
    background:var(--navy);
    border:1.5px solid var(--brass);
    color:var(--brass-light);
    display:flex;align-items:center;justify-content:center;
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:18px;
    position:relative;
    z-index:2;
  }
  .step h3{
    color:var(--paper);
    font-family:'Inter', sans-serif;
    font-size:15px;
    letter-spacing:.03em;
    margin-bottom:8px;
  }
  .step p{
    color:var(--stone);
    font-size:15.5px;
    margin:0;
  }

 /* ---------- generations ---------- */
  .generations{padding:80px 24px 20px; background:var(--paper);}
  .gen-grid{
    max-width:1120px;margin:0 auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  }
  .gen-col{padding:0 34px; border-left:1px solid var(--stone);}
  .gen-col:first-child{border-left:none;padding-left:0;}
  .gen-col:last-child{padding-right:0;}
  .gen-label{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-style:italic;
    color:var(--brass);
    font-size:16px;
    margin-bottom:16px;
    display:flex;align-items:center;gap:12px;
  }
  .gen-label .line{flex:1;height:1px;background:var(--brass);opacity:.6;}
  .gen-photo{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border:1px solid var(--stone);
    border-radius:2px;
  }
  .gen-col h3{
    text-align:center;
    font-size:21px;
    margin:20px 0 6px;
  }
  .gen-tag{
    text-align:center;
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brass);
    margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .gen-tag .line{width:34px;height:1px;background:var(--brass);opacity:.6;}
  .gen-col p{
    text-align:center;
    font-size:16px;
    color:#4b4638;
  }

  @media (max-width: 880px){
    .gen-grid{grid-template-columns:1fr; gap:46px;}
    .gen-col{border-left:none; padding:0;}
  }

  /* ---------- legacy timeline ---------- */
  .legacy{padding:70px 24px 90px; background:var(--paper); text-align:center;}
  .legacy-head{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin-bottom:52px;
  }
  .legacy-head .line{width:70px;height:1px;background:var(--brass);opacity:.7;}
  .legacy-head h2{font-size:clamp(24px,3vw,32px);}
  .legacy-track{
    max-width:960px;margin:0 auto;
    position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .legacy-track::before{
    content:"";position:absolute;top:9px;left:6%;right:6%;height:1px;
    background:var(--brass);opacity:.5;
  }
  .legacy-stop{position:relative;padding:0 12px;}
  .legacy-dot{
    width:18px;height:18px;border-radius:50%;
    background:var(--brass);border:3px solid var(--paper);
    box-shadow:0 0 0 1px var(--brass);
    margin:0 auto 18px;
    position:relative;z-index:2;
  }
  .legacy-year{
    font-family:'Playfair Display', serif;font-weight:700;font-size:18px;
    color:var(--navy);margin-bottom:6px;
  }
  .legacy-stop .stop-label{
    font-family:'Inter', sans-serif;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--brass);margin-bottom:8px;
  }
  .legacy-stop p{font-size:14.5px;color:#4b4638;margin:0;}

  @media (max-width:700px){
    .legacy-track{grid-template-columns:1fr; gap:38px;}
    .legacy-track::before{display:none;}
  }

  /* ---------- credentials bar ---------- */
  .credentials{background:var(--navy); padding:60px 24px;}
  .credentials .inner{
    max-width:1120px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .cred-item{
    display:flex;align-items:center;gap:14px;
    padding:0 22px;border-left:1px solid rgba(255,255,255,.14);
  }
  .cred-item:first-child{border-left:none;padding-left:0;}
  .cred-icon{flex:none;width:34px;height:34px;color:var(--brass-light);display:flex;align-items:center;justify-content:center;}
  .cred-item p{margin:0;color:var(--paper);font-family:'Inter', sans-serif;font-size:13.5px;letter-spacing:.02em;line-height:1.4;}

  @media (max-width:880px){
    .credentials .inner{grid-template-columns:repeat(2,1fr); gap:20px 0;}
    .cred-item:nth-child(3){border-left:none;}
  }
  @media (max-width:520px){
    .credentials .inner{grid-template-columns:1fr; gap:18px;}
    .cred-item{border-left:none;padding:0;}
  }

  /* ---------- services grid ---------- */
  .services{
    background:var(--paper);
    padding:70px 24px 30px;
  }
  .services .grid{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }
  .svc-card{
    background:var(--cream);
    border:1px solid var(--stone);
    border-radius:6px;
    padding:32px 24px 26px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .svc-icon{
    width:64px;height:64px;
    border-radius:50%;
    border:1.5px solid var(--brass);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
    background:var(--paper);
  }
  .svc-icon.tone-red{color:var(--red);}
  .svc-icon.tone-brass{color:var(--brass);}
  .svc-card h3{
    font-family:'Inter', sans-serif;
    font-size:15px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--navy);
    line-height:1.35;
    margin-bottom:6px;
  }
  .svc-card .mini-star{color:var(--brass); margin:6px 0 14px; font-size:11px;}
  .svc-card p{
    font-size:15.5px;
    color:#4b4638;
    margin:0 0 18px;
    flex:1;
  }
  .svc-more{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--red);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .svc-more .arrow{
    width:20px;height:20px;
    border-radius:50%;
    background:var(--red);
    color:var(--paper);
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .svc-more:hover, .svc-more:focus-visible{color:var(--red-deep);}
  .svc-more:hover .arrow, .svc-more:focus-visible .arrow{background:var(--red-deep);}

  @media (max-width: 980px){
    .services .grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 560px){
    .services .grid{grid-template-columns:1fr;}
  }

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-card {
  height: 100%;
  padding: 40px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
}

.faq .faq-card i {
  font-size: 48px;
  color: var(--accent-color);
  margin-bottom: 20px;
  display: block;
}

.faq .faq-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.faq .faq-card p {
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-card .btn-primary {
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-card .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.faq .faq-list {
  padding: 0;
}

.faq .faq-list .faq-item {
  position: relative;
  margin-bottom: 25px;
  padding: 30px;
  background-color: var(--surface-color);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  cursor: pointer;
}

.faq .faq-list .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-list .faq-item h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  padding-right: 40px;
  margin-bottom: 0;
  position: relative;
  cursor: pointer;
}

.faq .faq-list .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-list .faq-item .faq-content p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 24px;
  overflow: hidden;
}

.faq .faq-list .faq-item .faq-toggle {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 24px;
  color: var(--accent-color);
  transition: transform 0.2s ease;
}

.faq .faq-list .faq-item.faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-list .faq-item.faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 15px;
}

.faq .faq-list .faq-item.faq-active .faq-toggle {
  transform: rotate(45deg);
}

.faq .faq-list .p .h3 {
  margin-left: 140px; 
}

@media (max-width: 768px) {
  .faq .faq-list .faq-item {
    padding: 20px;
  }

  .faq .faq-list .faq-item h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .faq .faq-list .faq-item .faq-toggle {
    right: 20px;
    top: 20px;
    font-size: 20px;
  }
}

  /* ---------- footer ---------- */
  footer{
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-inner{
    max-width:1080px;
    margin:0 auto;
    padding:30px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand .seal{
    width:52px;height:52px;
    border-radius:50%;
    border:1.5px solid var(--brass);
    color:var(--brass-light);
    display:flex;align-items:center;justify-content:center;
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:19px;
  }
  .brand-text .name{
    color:var(--paper);
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:20px;
    letter-spacing:.01em;
  }
  .brand-text .est{
    color:var(--brass-light);
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    border-top:1px solid var(--brass);
    margin-top:3px;
    padding-top:3px;
    display:inline-block;
  }
  .contact{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:var(--stone);
  }
  .contact a{text-decoration:none;color:var(--stone); display:flex; align-items:center; gap:8px;}
  .contact a:hover, .contact a:focus-visible{color:var(--brass-light);}

  .closing{
    background:var(--cream);
    text-align:center;
    padding:44px 24px 56px;
  }
  .closing .line1{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:18px;
    color:#4b4638;
  }
  .closing .line2{
    font-family:'Inter', sans-serif;
    font-weight:700;
    letter-spacing:.12em;
    color:var(--brass);
    font-size:16px;
    margin-top:8px;
  }
  
 @media (min-width: 1200px) {  
  .utility-bar{background:var(--white); color:var(--ink); font-family:'Inter', sans-serif; font-size:13px; letter-spacing:.04em;display:flex  align-items: center;justify-content: space-between;flex-wrap: nowrap;gap: 20px;padding: 10px 20px;}
  .utility-bar .inner{max-width:1320px; margin:0 auto; padding:9px 28px; display:flex;gap:20px;flex-wrap:norap;white-space: norap;}
  .utility-bar a{text-decoration:none;color:var(--ink);}
  .utility-bar a:hover, .utility-bar a:focus-visible{color:var(--brass-light);}
  .utility-bar .badges span{margin-left:18px;}
  .utility-bar .badges span:first-child{margin-left:0;}
}    
  
/* Add a black background color to the top navigation */
.topnav {
  background-color: var(--ink);
  align-items: center;^
  overflow: hidden;
  display: flex;
  gap: 16px;
  margin-left: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: var(--ink);
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 1199px){
    .trust .inner{grid-template-columns:1fr; gap:26px;}
    .trust-item{border-left:none; padding:0;}
    .steps{grid-template-columns:1fr; gap:34px;}
    .steps::before{display:none;}
    .ticket{flex-direction:column; text-align:center; gap:10px; padding:24px 20px;}
    .ticket .perf{display:none;}
    .ticket-stub{padding-left:0;}
    .footer-inner{flex-direction:column; text-align:center;}
    .contact{justify-content:center;}
    .utility-bar .inner{justify-content:center; text-align:center;}
    .utility-bar .badges{display:none;}
	.topnav {justify-content: left;display:block}
	.topnav a {display: flex;}
  }
  
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1199px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

table {
   width: 100%;
   border-collapse: collapse; /* Prevents double borders between cells */
   margin: 20px 0;
   font-family: sans-serif;
}

th, td {
   border: 1px solid #999999; /* Defines the grid line thickness and color */
   padding: 12px;             /* Adds breathing room inside cells */
   text-align: left;
}

        /* Optional: Add a subtle background color to headers */
th {
  background-color: #f2f2f2;
}