:root {
  --color-bg: #fff6fa;
  --color-primary: #e88abf;
  --color-secondary: #b36ebf;
  --color-accent: #f9d7e2;
  --color-dark: #442c3e;
  --color-light: #ffffff;
  --color-border: #f1cde0;
  --fs-base: 16px;
  --fs-scale: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: clamp(15px, 1.6vw, 17px);
}

body {
 font-family: "Poppins", "Segoe UI", sans-serif;
 background-color: var(--color-bg);
 color: var(--color-dark);
 line-height: 1.6;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 font-size: clamp(15px, 1.2vw, 17px);
}

.container {
 width: min(1100px, 94%);
 margin: 0 auto;
 padding-left: clamp(0.75rem, 2.2vw, 1rem);
 padding-right: clamp(0.75rem, 2.2vw, 1rem);
}

.site-header {
 background: var(--color-primary);
 color: var(--color-light);
 padding: 0.8rem 0;
 box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.site-header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.5rem 1rem;
}

.brand {
 font-weight: 700;
 font-size: 1.3rem;
 text-decoration: none;
 color: var(--color-light);
 letter-spacing: 0.5px;
 flex-shrink: 0;
}

.main-nav {
 display: flex;
 flex-grow: 1;
 flex-wrap: wrap;
 gap: 0.5rem;
}

.main-nav a {
 color: var(--color-light);
 text-decoration: none;
 font-weight: 500;
 transition: opacity 0.2s ease;
 padding: 0.5rem 0.6rem;
 display: inline-block;
 width: auto;
 border-radius: 8px;
 min-height: 44px;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
 opacity: 0.8;
 border-bottom: 2px solid var(--color-light);
}

.main-nav a[aria-current="page"] {
 font-weight: 700;
 text-decoration: underline;
}

.video-btn {
 background-color: var(--color-secondary);
 border: none;
 color: var(--color-light);
 font-weight: 600;
 padding: 0.5rem 1rem;
 border-radius: 8px;
 cursor: pointer;
 transition: background 0.2s ease;
 margin-left: auto;
 min-height: 44px;
 flex-shrink: 0;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.video-btn:hover, {
 background-color: var(--color-dark);
}

main {
 flex: 1;
 padding: 2rem 0;
}

h1, h2, h3 {
 font-family: "Poppins", sans-serif;
 font-weight: 700;
 color: var(--color-secondary);
 margin-bottom: 0.6rem;
}

p {
 margin-bottom: 1rem;
}

.lead {
 font-size: 1.1rem;
 color: #5a4760;
 margin-bottom: 1.4rem;
}

.site-footer {
 background: var(--color-primary);
 color: var(--color-light);
 padding: 1rem 0;
 text-align: center;
 font-size: 0.9rem;
 margin-top: 2rem;
}

.site-footer a {
 color: var(--color-light);
 text-decoration: underline;
}

.cv-page {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2rem;
 padding: 0;
}

@media (min-width: 601px) {
 .cv-page {
  grid-template-columns: 280px 1fr;
 align-items: start;
 }
}

.cv-page aside {
 background: var(--color-light);
 padding: 1.5rem;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.08);
 position: sticky;
 top: 1rem;
}

.aside-info {
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--color-border);
}

.cv-content {
 background: var(--color-light);
 padding: 2rem;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.cv-photo {
 margin: 0 auto 1.5rem auto;
}

.cv-content section {
 border-top: 1px solid var(--color-border);
 padding-top: 1.2rem;
 margin-top: 1.2rem;
}

.cv-content h1 {
 font-size: 2.2rem;
 color: var(--color-dark);
}

.cv-content h2 {
 font-size: 1.1rem;
 color: var(--color-secondary);
 margin-bottom: 1.5rem;
}

.card-section, .card-article, .contact-form {
 background: var(--color-light);
 padding: 2rem;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.08);
 margin-bottom: 2rem;
}

.careers-page article.card-article {
 margin-top: 1.5rem;
}

.career-fit {
 font-style: italic;
 font-size: 0.95rem;
 color: #777;
 padding-top: 0.5rem;
 border-top: 1px dashed var(--color-border);
}

.work-map {
 max-width: 100%;
 height: auto;
 display: block;
}

.thumb-grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 align-items: stretch;
 margin-top: 1rem;
}

.thumb {
 display: block;
 text-decoration: none;
 color: inherit;
 border: 1px solid var(--color-border);
 border-radius: 8px;
 overflow: hidden;
 background: #fff;
 transition: transform .18s ease, box-shadow .18s ease;
 height: 100%;
 min-height: 44px;
}

.thumb:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.thumb img {
 width: 100%;
 height: 180px;
 object-fit: cover;
 border-bottom: 1px solid var(--color-border);
}

.thumb-portfolio {
 display: block;
 padding: 0.6rem;
 font-weight: 700;
 font-size: 0.95rem;
 color: #222;
}

.card-section p {
 text-align: center;
 margin-top: 1rem;
}

.contact-form {
 max-width: 700px;
 margin: 1.5rem auto;
 padding: 2rem;
}

.form-group {
 margin-bottom: 1rem;
}

label {
 display: block;
 font-weight: 600;
 margin-bottom: 0.4rem;
 color: var(--color-secondary);
}

input, textarea {
 width: 100%;
 padding: 0.8rem;
 border: 1px solid var(--color-border);
 border-radius: 8px;
 margin-bottom: 1rem;
 font-size: 1rem;
}

input:focus, textarea:focus {
 outline: none;
 border-color: var(--color-secondary);
 box-shadow: 0 0 0 3px rgba(96,165,250,0.3);
}

.form-actions {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 margin-top: 1.5rem;
}

.btn-primary {
 background-color: var(--color-secondary);
 color: var(--color-light);
 border: none;
 padding: 0.8rem 1.8rem;
 font-size: 1rem;
 font-weight: 600;
 border-radius: 8px;
 cursor: pointer;
 transition: background 0.2s ease;
 flex-grow: 1;
 max-width: 300px;
}

.btn-primary:hover {
 background-color: var(--color-dark);
}

.btn-secondary {
 background-color: var(--color-accent);
 color: var(--color-dark);
 border: none;
 padding: 0.8rem 1.8rem;
 font-size: 1rem;
 font-weight: 600;
 border-radius: 8px;
 cursor: pointer;
 transition: background 0.2s ease;
 flex-shrink: 0;
 margin-left: auto;
}

.btn-secondary:hover {
 background-color: var(--color-border);
}

.form-status {
 margin-top: 1rem;
 font-weight: 500;
 color: #007700;
}

.modal {
 position: fixed;
 inset: 0;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 2000;
}

.modal[aria-hidden="false"] {
 display: flex;
}

.modal-backdrop {
 position: absolute;
inset: 0;
 background: rgba(0,0,0,0.6);
}

.modal-content {
 position: relative;
 background: #fff;
 max-width: 1000px;
 width: calc(100% - 2rem);
 max-height: 90vh;
 overflow: auto;
 border-radius: 10px;
 padding: 1rem 1.25rem;
 box-shadow: 0 6px 30px rgba(0,0,0,0.3);
 z-index: 2010;
}

.modal-close {
 position: absolute;
 right: 0.6rem;
 top: 0.35rem;
 background: none;
 border: none;
 font-size: 1.6rem;
 cursor: pointer;
}

.modal-section {
 margin: 0.75rem 0;
}

#localVideo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

img {
 width: 100%;
 height: auto;
 display: block;
 object-fit: cover;
}

.cv-photo {
 width: 160px;
 height: 160px;
 object-fit: cover;
 border-radius: 50%;
 display: block;
 margin: 0 auto 1.5rem auto;
 border: 4px solid var(--color-secondary);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
 .cv-photo {
 width: 120px;
 height: 120px;
 }
}

/* Media Queries */
@media (max-width: 800px) {
 .site-header .container {
 flex-direction: column;
 align-items: flex-start;
 }
}

@media (max-width: 600px) {
 body {
 font-size: 15px;
 }
 .video-btn {
 width: 100%;
 margin-left: 0;
 margin-top: 0.5rem;
 }
 h1 {
 font-size: 1.5rem;
 }
 .cv-page aside {
 position: static;
 }
 .form-actions {
 flex-direction: column-reverse;
 }
 .form-actions .btn-primary, .form-actions .btn-secondary {
 max-width: 100%;
 }
 .form-actions .btn-secondary {
 margin-left: 0;
 }
}

@media (min-width: 1400px) {
 .container { width: 1200px; }
 .cv-page { grid-template-columns: 300px 1fr; }
}

:focus {
 outline: 3px solid var(--color-secondary);
 outline-offset: 3px;
}

.pdf-viewer-container {
 margin: 1.5rem 0;
 border: 1px solid var(--color-border);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.portfolio-pdf-iframe {

 min-height: 600px;
 border: none;
 display: block;
}

@media (max-width: 600px) {
 .portfolio-pdf-iframe {
 min-height: 400px;
 }
}