@charset "utf-8";
/* Voice in Movement - "Warm Studio" light look (2026) */

/* COLOR VARIABLES: each color is named once here and used below as var(--name).
   Dreamweaver may mark these lines as errors ("expecting braces"): they are valid CSS
   and work in all current browsers. Change a color here and it changes everywhere. */
:root{
	--vim-cream: #F7F2EA;
	--vim-white: #FFFFFF;
	--vim-line: #E4DACB;
	--vim-ink: #2A2420;
	--vim-text: #4E453F;
	--vim-muted: #6B6058;
	--vim-gold: #8A6636;
	--vim-gold-dark: #7A5A2E;
	--vim-gold-light: #D9BE8E;
}

body{
	background-color: var(--vim-cream);
	color: var(--vim-ink);
	font-family: 'EB Garamond', Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.65;
}
a{ color: var(--vim-gold-dark); font-weight: 400; }
a:hover{ color: var(--vim-ink); text-decoration: none; }

h1, h2, h3, .vim-serif{
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: var(--vim-ink);
}

/* ---------- Header ---------- */
.vim-header{
	background-color: var(--vim-cream);
	border-bottom: 1px solid var(--vim-line);
}
.vim-brand{
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
}
.vim-brand:hover{ text-decoration: none; }
.vim-brand .vim-script{
	font-family: 'Great Vibes', cursive;
	font-size: 2.5rem;
	color: var(--vim-gold);
}
.vim-brand .vim-tagline{
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vim-muted);
	margin-top: 0.25rem;
}
.vim-header .navbar{ padding-left: 0; padding-right: 0; }
.vim-header .nav-link{
	color: var(--vim-ink) !important;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	padding: 0.4rem 0 !important;
	margin-left: 1.625rem;
	border-bottom: 1px solid transparent;
}
.vim-header .nav-link:hover{ border-bottom-color: var(--vim-gold-light); }
.vim-header .nav-link.active{ border-bottom-color: var(--vim-gold); }
.vim-header .nav-link.vim-lang{ color: var(--vim-muted) !important; }
@media (max-width: 991.98px){
	.vim-header .nav-link{ margin-left: 0; }
}

/* ---------- Small labels ---------- */
.vim-eyebrow{
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--vim-gold-dark);
	font-weight: 500;
	margin-bottom: 0.75rem;
}

/* ---------- Hero ---------- */
.vim-hero{ }
.vim-hero h1{
	font-weight: 500;
	font-size: 3.75rem;
	line-height: 1.05;
	margin-bottom: 1.25rem;
}
.vim-hero h1 em{ font-weight: 400; color: var(--vim-gold-dark); }
.vim-hero p{ color: var(--vim-text); max-width: 32.5rem; }
@media (max-width: 767.98px){
	.vim-hero h1{ font-size: 2.75rem; }
}
.vim-photo{
	position: relative;
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: var(--vim-line);
	max-width: 22.5rem;
	margin: 0 auto;
}
.vim-photo img{
	width: 100%;
	height: auto;
	display: block;
}
.vim-play{
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	text-decoration: none;
	background-color: rgba(247,242,234,0.94);
	color: var(--vim-ink);
	padding: 0.5rem 1.125rem 0.5rem 0.5rem;
	border-radius: 62.4375rem;
	font-size: 0.9375rem;
}
.vim-play:hover{ color: var(--vim-ink); background-color: #FFFFFF; }
.vim-play span{
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--vim-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.75rem;
}

/* ---------- Buttons ---------- */
.vim-btn{
	display: inline-block;
	padding: 0.875rem 1.75rem;
	border-radius: 62.4375rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-decoration: none;
	margin: 0 0.625rem 0.75rem 0;
	transition: all .3s;
}
.vim-btn-gold{ background-color: var(--vim-gold); color: #FFFFFF; border: 1px solid var(--vim-gold); }
.vim-btn-gold:hover{ background-color: var(--vim-ink); border-color: var(--vim-ink); color: #FFFFFF; }
.vim-btn-line{ border: 1px solid var(--vim-ink); color: var(--vim-ink); }
.vim-btn-line:hover{ background-color: var(--vim-ink); color: #FFFFFF; }

/* ---------- Sections ---------- */
.vim-band{
	background-color: var(--vim-white);
	border-top: 1px solid var(--vim-line);
	border-bottom: 1px solid var(--vim-line);
}
.vim-band h2, .vim-teacher h2{
	font-weight: 500;
	font-size: 2.625rem;
	line-height: 1.1;
}

/* Cards (the four sections) */
.vim-card{
	display: block;
	color: var(--vim-ink);
	text-decoration: none;
	margin-bottom: 2rem;
}
.vim-card:hover{ color: var(--vim-ink); text-decoration: none; }
.vim-card .vim-media{
	position: relative;
	border-radius: 0.875rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--vim-line);
	margin-bottom: 0.875rem;
}
.vim-card video, .vim-card .vim-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vim-card h3{
	font-weight: 600;
	font-size: 1.625rem;
	margin-bottom: 0.4rem;
}
.vim-card p{
	font-size: 0.9375rem;
	color: #5A514A;
	margin-bottom: 0.6rem;
}
.vim-more{
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--vim-gold-dark);
	letter-spacing: 0.04em;
}
.vim-card:hover .vim-more{ color: var(--vim-ink); }

/* Teacher */
.vim-teacher{ }
.vim-teacher img{
	width: 13.75rem;
	height: 13.75rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 28%;
	display: block;
}
.vim-teacher p{ color: var(--vim-text); max-width: 38.75rem; }

/* ---------- Footer ---------- */
.vim-footer{
	background-color: var(--vim-ink);
	color: #E9E1D5;
	padding: 2.5rem 0;
	font-size: 0.875rem;
}
.vim-footer .vim-script{
	font-family: 'Great Vibes', cursive;
	font-size: 2rem;
	color: var(--vim-gold-light);
}
.vim-footer a{ color: #E9E1D5; margin-right: 1.75rem; }
.vim-footer a:hover{ color: #FFFFFF; }
.vim-footer .vim-copy{ color: #BFB4A5; }

@media (max-width: 575.98px){
	.vim-brand .vim-script{ font-size: 2rem; }
	.vim-band h2, .vim-teacher h2{ font-size: 2.125rem; }
}

/* =========================================================
   Inner pages: light styles for the existing content boxes
   ========================================================= */
.vim-inner .vim-header{ margin-bottom: 1.75rem; }
.vim-inner .vim-footer{ margin-top: 3rem; }

.vim-inner h1{
	font-weight: 500;
	font-size: 2.6em;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: var(--vim-ink);
}
.vim-inner h2, .vim-inner h2.sec{
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	font-size: 1.9em;
	line-height: 1.15;
	color: var(--vim-ink);
}
.vim-inner h3{
	font-weight: 600;
	font-size: 1.5em;
	color: var(--vim-ink);
}
.vim-inner h4, .vim-inner h5{
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	color: var(--vim-ink);
}

.leftBox, .rightBox, .textContent{
	background-color: var(--vim-white);
	box-shadow: none;
}
.audioBack{ background-color: #FBF8F3; }
.audioSide{
	background-color: var(--vim-white);
	border: 1px solid var(--vim-line);
	border-radius: 0.625rem;
}
.quote:hover{ background-color: #F3EDE4; font-weight: 400; }
.mechanism{
	background-color: var(--vim-white);
	height: 22.5rem;
	overflow: auto;
}
.player{ border-radius: 0.625rem; overflow: hidden; }
.img-rounded{ border-radius: 0.625rem; }

/* Sub-menu inside a section (Fundamentals / Irem / Dorothe ...) */
#btnTheor{ margin-bottom: 0.75rem; }
#btnTheor a{
	color: var(--vim-ink);
	background-color: var(--vim-white);
	border: 1px solid var(--vim-line);
	border-radius: 62.4375rem;
	padding: 0.375rem 1rem;
	margin: 0 0 0.5rem 0.5rem;
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
}
#btnTheor a:hover{ border-color: var(--vim-gold); color: var(--vim-gold-dark); }
#btnTheor .active, #btnTheor .active:hover{
	background-color: var(--vim-gold);
	border-color: var(--vim-gold);
	color: #FFFFFF;
}
#interpret{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../voice-lesson-oneOnOne/images/btn/Standard_Building_Blocks_4.png);
}

/* Dark top banner (matches the footer) */
.vim-header{
	background-color: var(--vim-ink);
	border-bottom: 3px solid var(--vim-gold);
}
.vim-brand .vim-script{ color: var(--vim-gold-light); }
.vim-brand .vim-tagline{ color: #BFB4A5; }
.vim-header .nav-link{ color: #E9E1D5 !important; }
.vim-header .nav-link:hover{ color: #FFFFFF !important; border-bottom-color: var(--vim-gold-light); }
.vim-header .nav-link.active{ color: #FFFFFF !important; border-bottom-color: var(--vim-gold-light); }
.vim-header .nav-link.vim-lang{ color: #BFB4A5 !important; }
.vim-header .navbar-toggler{ border-color: rgba(233,225,213,0.45); }

@media (max-width: 575.98px){
	.vim-inner h1{ font-size: 2.1em; }
}

/* More breathing room around the brand in the banner */
.vim-header .navbar{ padding-top: 1rem; padding-bottom: 1rem; }
.vim-brand .vim-script{ line-height: 1.25; padding-top: 0.25rem; }
.vim-brand .vim-tagline{ margin-top: 0.375rem; }
@media (max-width: 575.98px){
	.vim-header .navbar{ padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Welcome video pop-up */
.vim-video-modal{
	background-color: #000000;
	border: none;
	border-radius: 0.75rem;
	overflow: hidden;
}
.vim-video-modal .close{
	position: absolute;
	top: -2.75rem;
	right: 0;
	color: #FFFFFF;
	opacity: 0.9;
	font-size: 2.5rem;
	font-weight: 300;
	text-shadow: none;
	z-index: 2;
}
.vim-video-modal .close:hover{ color: #FFFFFF; opacity: 1; }
.modal-content.vim-video-modal{ overflow: visible; }
.vim-video-modal .embed-responsive{ border-radius: 0.75rem; }

/* Fonts matching johannedesforges.com (Bodoni Moda, Cormorant Garamond, EB Garamond) */
.vim-brand .vim-script, .vim-footer .vim-script{
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.2;
	padding-top: 0;
}
.vim-brand .vim-script{ font-size: 1.7rem; }
.vim-footer .vim-script{ font-size: 1.2rem; }
.vim-brand .vim-tagline{
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #E9E1D5;
	margin-top: 0.3rem;
}
.vim-header .nav-link{ letter-spacing: 0.04em; font-size: 1.05rem; }
.vim-btn{ letter-spacing: 0.02em; font-size: 1.05rem; }
.vim-eyebrow{ letter-spacing: 0.16em; }
.vim-card p{ font-size: 1rem; }
@media (max-width: 575.98px){
	.vim-brand .vim-script{ font-size: 1.3rem; }
}

/* Footer brand with tagline (same as the banner) */
.vim-footer-brand{ display: flex; flex-direction: column; line-height: 1; margin-bottom: 0.5rem; }
.vim-footer-brand .vim-tagline{
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 1.05rem;
	color: #E9E1D5;
	margin-top: 0.4rem;
}

/* Inner page titles: title + italic gold subtitle, like the Home page */
.vim-inner h1 em{
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--vim-gold-dark);
	font-size: 0.62em;
	letter-spacing: 0;
	margin-top: 0.35rem;
}

/* Portrait photo (French home page) */
.vim-portrait{ width: 100%; border-radius: 1.25rem; }