@charset "UTF-8";
/* CSS Document */
/* Base text style */

body {
  margin: 0;
  padding: 0;
  background-color: #1C1F26; /* solid dark background */
  color: #F6F4EC;
  font-family: "Inter", sans-serif; /* replaced duplicate */
  min-height: 100vh;
}

/* Headings */

h1 {
  font-size: 45px;
  color: #222;
  font-weight: bold;
  margin-bottom: 15px;
}

h2 {
  font-size: 28px;
  color: #F6F4EC;
  margin-bottom: 0px;
}

h3 {
  font-size: 22px;
  color: #444;
  margin-bottom: 10px;
}

/* Paragraphs */

p {
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
}

/* Links */

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  color: #004080;
  text-decoration: underline;
}

/* Lists */

ul, ol {
  margin: 10px 0 20px 40px;
  font-size: 16px;
  color: #555;
}

li {
  margin-bottom: 8px;
}

.text-ivory-75 {
  color: rgba(248, 245, 228, 0.75);
}

.palette-mosaic-regular {
  font-family: "Palette Mosaic", system-ui;
  font-weight: 400;
  font-style: normal;
}

.notable-regular {
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.inter-regular {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* TOPBAR */

.brand-name a {
  color: inherit;          /* keep the original text color */
  text-decoration: none;   /* keep it underlined or not, as needed */
}

.brand-name a:hover {
  color: inherit;          /* disables hover color change */
  text-decoration: none;   /* optional: remove underline on hover */
}

/* SHOWREEL */

.video-section {
  background-color: #1C1F26;
}

/* ABOUT */

#about {
  background: #242833;
}
.text-ivory {
  color: #F6F4EC;
}

/* Topbar base */

.topbar {
  width: 100%;
  background-color: #1C1F26; /* bar color */
  color: #F6F4EC;           /* text color */
  text-align: center;       /* center text */
  padding: 20px 0;          /* space inside bar */
  font-size: 20px;          /* text size */
  font-weight: bold;
  position: fixed;          /* stays at top */
  top: 0;
  left: 0;
  z-index: 1000;
}

/* Contact link (matches topbar style) */

.contact-link {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.contact-link a {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: #F6F4EC;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.contact-link a:hover {
  opacity: 1;
}

/* Language selector (kept the improved look) */

.lang-btn {
  background: transparent;
  border: none;
  color: #F6F4EC;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.lang-btn.active {
  border-bottom: 2px solid #D4BFAA;  /* Underline for active language */
  padding-bottom: 0.5px;               /* Slight spacing for balance */
}

img {
  object-fit: cover;
}

/* BEFORE/AFTER */

#before-after {
  background-color: #1C1F26;
  color: #F6F4EC;
}

/* Outer container */

.ba-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}

/* Image wrapper */

.ba-image-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Base image */

.ba-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* The "after" image (top layer) */

.ba-img--after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  clip-path: inset(0 50% 0 0); /* shows left half initially */
  transition: clip-path 0.1s linear;
}

/* Slider (invisible except handle) */

.ba-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
  outline: none;
}

/* Vertical divider handle */

.ba-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 100%;
  background-color: #D4BFAA; /* warm ivory tone */
  border: none;
  cursor: ew-resize;
}
.ba-slider::-moz-range-thumb {
  width: 4px;
  height: 100%;
  background-color: #D4BFAA;
  border: none;
  cursor: ew-resize;
}

 /* CONTACT */

#contact {
  background-color: #1C1F26;
  color: #F6F4EC;
  padding: 4rem 1rem;
}

.contact-email {
  color: #D4BFAA;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.contact-email:hover {
  border-bottom: 1px solid #D4BFAA;
}

.form-control {
  background-color: #2A2F38;
  border: 1px solid #3A3A3A;
  color: #F6F4EC;
  border-radius: 0.5rem;
}

.form-control:focus {
  border-color: #D4BFAA;
  box-shadow: 0 0 0 0.2rem rgba(212, 191, 170, 0.25);
  background-color: #2A2F38;
  color: #F6F4EC;
}

.btn-outline-light {
  border-color: #F6F4EC;
  color: #F6F4EC;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background-color: #F6F4EC;
  color: #1C1F26;
}

@media (max-width: 768px) {
  #contact {
    padding: 3rem 1rem;
  }
  .lead {
    font-size: 1rem;
  }
}

/* Footer styling */

.footer {
  background-color: #1C1F26;
  color: #F6F4EC;
  padding: 2rem 1rem;
  border-top: 2px solid #3A3A3A;
}

.footer-content a {
  color: #F6F4EC;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
}

.footer-content a:hover {
  color: #D4BFAA; /* subtle warm ivory hover */
}