:root {
    --bg: #eae4df;
    --surface-dark: #141414;
    --text: #181818;
    --text-soft: rgba(24, 24, 24, 0.72);
    --text-inverse: rgba(255, 255, 255, 0.72);
    --line: #b4a690;
    --accent: #987b57;
    --accent-dark: #876b48;
    --container: 1120px;
    --container-narrow: 860px;
    --radius: 999px;
    --section-space: clamp(3rem, 7vw, 4rem);
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
html,body {margin: 0;padding: 0;}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;line-height: 1.55;color: var(--text);background: var(--bg);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;
}
img {max-width: 100%;display: block;}
a {color: inherit;text-decoration: none;}
button,input {font: inherit;}
.container {width: min(var(--container), calc(100% - 2rem));margin: 0 auto;}
.container-narrow {width: min(var(--container-narrow), calc(100% - 2rem));margin: 0 auto;}
.site-header {padding: clamp(1.5rem, 4vw, 2.5rem) 0 1rem;}
.header-inner {display: flex;justify-content: center;}
.brand {width: clamp(150px, 20vw, 220px);}
.hero {padding: var(--section-space) 0;}
.intro {text-align: center;}
.intro h1 {margin: 0 0 0.75rem;font-family: "Times New Roman", Times, serif; font-weight: 400;font-size: clamp(2.5rem, 8vw, 7rem);line-height: 0.95;letter-spacing: 0.02em;}
.strap {margin: 0 0 1.1rem;font-size: clamp(0.72rem, 1.1vw, 0.95rem);letter-spacing: clamp(0.14em, 0.6vw, 0.28em);text-transform: uppercase;color: var(--text-soft);}
.intro-text {max-width: 38rem;margin: 0 auto 1.75rem;font-size: clamp(1rem, 1.5vw, 1.125rem);color: var(--text-soft);}
.button-primary {
    display: inline-flex;align-items: center;justify-content: center;
    min-height: 50px;padding: 0.95rem 1.75rem;border: 1px solid var(--line);background: transparent;color: var(--text);border-radius: var(--radius);
    font-size: 0.72rem;letter-spacing: 0.18em;text-transform: uppercase;cursor: pointer;transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.button-primary:hover,.button-primary:focus-visible {background: rgba(0, 0, 0, 0.035);border-color: var(--accent);transform: translateY(-1px);}
.button-primary:focus-visible,.email-box input:focus-visible,.email-box button:focus-visible {outline: 2px solid var(--accent);outline-offset: 2px;}

.careers-link {font-size: 0.7rem;letter-spacing: 0.18em;text-transform: uppercase;color: var(--text-soft);border-bottom: 1px solid transparent;transition: all 0.2s ease;}
.careers-link:hover {color: var(--text);border-color: var(--accent);}        


.features {padding:  var(--section-space) 0;}
.promo-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0;}
.promo-card {padding: 0 clamp(2rem, 4vw, 3rem);text-align: center;border-right: 1px solid var(--line);}
.promo-card:last-child {border-right: 0;}
.grid-icon {display: inline-flex;width: 60px;height: 60px;margin-bottom: 1.25rem;align-items: center;justify-content: center;border: 1px solid var(--line);border-radius: 50%;}
.grid-icon img {width: 34px;height: 34px;}
.promo-card h2 {margin: 0 0 0.75rem;font-size: clamp(0.72rem, 1vw, 0.9rem);letter-spacing: clamp(0.12em, 0.5vw, 0.22em);text-transform: uppercase;color: var(--text-soft);}
.promo-card p {margin: 0;color: var(--text-soft);}
.email-newsletter {background: var(--surface-dark);color: var(--text-inverse);padding: clamp(2rem, 5vw, 3rem) 0;}
.email {display: grid;grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);gap: 2rem;align-items: center;}
.email-text h3 {margin: 0 0 0.75rem;font-size: clamp(0.72rem, 1vw, 0.9rem);letter-spacing: clamp(0.12em, 0.5vw, 0.22em);text-transform: uppercase;color: rgba(255, 255, 255, 0.9);}
.email-text p {margin: 0;max-width: 28rem;}
.email-form {width: 100%;}
.email-box {display: flex;width: 100%;border: 1px solid var(--accent);border-radius: var(--radius);overflow: hidden;background: rgba(255, 255, 255, 0.02);}
.email-box input {flex: 1 1 auto;min-width: 0;border: 0;background: transparent;color: #fff;padding: 0.95rem 1.1rem;}
.email-box input::placeholder {color: rgba(255, 255, 255, 0.45);}
.email-box button {flex: 0 0 auto;border: 0;background: var(--accent);color: #fff;padding: 0.95rem 1.25rem;font-size: 0.72rem;letter-spacing: 0.18em;text-transform: uppercase;cursor: pointer;transition: background-color 0.25s ease;}
.email-box button:hover,.email-box button:focus-visible {background: var(--accent-dark);}
.site-footer {border-top: 1px solid rgba(152, 123, 87, 0.35);background: var(--surface-dark);color: rgba(255, 255, 255, 0.5);}
.footer-inner {padding: 1rem 0;text-align: center;font-size: 0.9rem;}





/* CAREERS */
.careers-hero {padding:  0 0 clamp(3rem, 7vw, 5rem);text-align: center;}
.careers-hero h1 {font-family: "Times New Roman", serif;font-weight: 400;font-size: clamp(2.5rem, 6vw, 4.5rem);margin-bottom: 1rem;}
.careers-hero p {max-width: 600px;margin: 0 auto;color: var(--text-soft);}

.section {padding: clamp(1.5rem, 6vw, 1.5rem) 0;}
.section h2 {font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.75rem; color: rgba(24, 24, 24, 0.5);}
.section p {max-width: 700px;}
.section ul {max-width: 700px;padding-left: 1.2rem;}
.section li {margin-bottom: 0.5rem;}
.highlight {font-size: 1.25rem;line-height: 1.5;max-width: 700px;}

.apply-box {background: var(--surface-dark);color: white;padding: 2.5rem;border-radius: 1.5rem;}
.apply-box h3 {margin-bottom: 1rem;}
.apply-box p {color: rgba(255,255,255,0.7);}
.apply-box a {display: inline-block;margin-top: 1rem;padding: 0.9rem 1.5rem;border: 1px solid var(--accent);border-radius: 999px;text-transform: uppercase;font-size: 0.7rem;letter-spacing: 0.18em;}




@media (max-width: 900px) {
    .promo-grid {grid-template-columns: 1fr;}
    .promo-card {border-right: 0;border-bottom: 1px solid var(--line);padding: clamp(2rem, 4vw, 3rem);max-width: 400px;margin: 0 auto;}
    .promo-card:last-child {border-bottom: 0;}
    .email {grid-template-columns: 1fr;gap: 1.5rem;}
}

@media (max-width: 640px) {
    .container,.container-narrow {width: min(100% - 1.25rem, var(--container));padding: 0 20px;}
    .hero {padding-bottom: 0;}
    .intro-text {margin-bottom: 1.5rem;}
    .button-primary {width: 100%;max-width: 320px;}
    .email-box {flex-direction: column;border-radius: 1.25rem;}
    .email-box input,.email-box button {width: 100%;border-radius: 0;}
    .email-box button {padding-block: 1rem;}
}