:root{
  --ink:#12172B;
  --ink-soft:#2B3350;
  --paper:#EDEBE3;
  --paper-raised:#F5F3EC;
  --amber:#E8A33D;
  --emerald:#2F6F5E;
  --line:#C9C6BA;
  --line-dark:#3A4262;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Libre Franklin", -apple-system, sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:3px;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header ---------- */

header{
  background:var(--ink);
  color:var(--paper);
  position: sticky;
  z-index: 100;
  top: 0;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  max-width:1180px;
  margin:0 auto;
}

.logo{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:0.01em;
}

.logo span{ color:var(--amber); }

.nav-links{
  display:flex;
  gap:36px;
  font-size:15px;
  font-weight:500;
}

.nav-links a{
  opacity:0.82;
  transition:opacity 0.15s ease;
}

.nav-links a.active{ opacity:1; }

.nav-links a:hover{ opacity:1; }

.nav-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.nav-signin{
  font-size:15px;
  font-weight:500;
  opacity:0.82;
}

.nav-signin:hover{ opacity:1; }

.nav-contact{
  font-size:15px;
  font-weight:500;
  opacity:0.82;
  transition:opacity 0.15s ease;
}

.nav-contact:hover,
.nav-contact.active{ opacity:1; }

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  font-weight:600;
  background:var(--amber);
  color:var(--ink);
  padding:10px 18px;
  transition:background 0.15s ease;
}

.nav-cta:hover{ background:#f0b458; }

.nav-cta::after{ content:"→"; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--paper);
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu{
  display:none;
  flex-direction:column;
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  padding:4px 32px 12px;
}

.mobile-menu.open{ display:flex; }

.mobile-menu a{
  color:var(--paper);
  font-size:16px;
  font-weight:500;
  padding:14px 0;
  border-bottom:1px solid var(--line-dark);
}

.mobile-menu a:last-child{ border-bottom:none; }

.mobile-menu a.active{ color:var(--amber); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:var(--paper);
  font-weight:600;
  font-size:15px;
  padding:15px 26px;
  transition:background 0.15s ease;
}

.btn-primary::after{ content:"→"; }

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

/* ---------- Contact hero ---------- */

.contact-hero{
  padding-top:96px;
  padding-bottom:56px;
}

.contact-hero-inner{
  max-width:640px;
}

.contact-hero h1{
  font-family:var(--serif);
  font-size:48px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.01em;
}

.contact-hero p.lede{
  margin-top:18px;
  font-size:17px;
  max-width:480px;
  color:var(--ink-soft);
}

/* ---------- Contact grid ---------- */

.contact-grid{
  padding-top:56px;
  padding-bottom:96px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
}

.contact-details h2{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
  margin-bottom:28px;
}

.contact-item{
  padding:18px 0;
  border-top:1px solid var(--line);
}

.contact-item:last-child{
  border-bottom:1px solid var(--line);
}

.contact-label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:6px;
}

.contact-item a,
.contact-item span:not(.contact-label){
  font-size:16px;
  color:var(--ink);
}

.contact-item a:hover{
  color:var(--emerald);
}

.contact-socials{
  display:flex;
  gap:18px;
}

.contact-socials a{
  font-size:15px;
  font-weight:500;
}

/* ---------- Contact form ---------- */

.contact-form{
  background:var(--paper-raised);
  border:1px solid var(--line);
  padding:40px;
}

.contact-form .modal-label{
  display:block;
  margin-top:20px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
}

.contact-form .modal-label:first-child{
  margin-top:0;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:13px 14px;
  font-size:15px;
  font-family:var(--sans);
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
}

.contact-form textarea{
  min-height:120px;
  resize:vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:2px;
}

.contact-submit{
  margin-top:24px;
  width:100%;
  justify-content:center;
}

/* ---------- CTA banner ---------- */

.cta-banner{
  background:var(--ink);
  color:var(--paper);
  padding:80px 0;
}

.cta-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.cta-banner h2{
  font-family:var(--serif);
  font-size:36px;
  font-weight:600;
  max-width:520px;
  line-height:1.18;
}

.cta-banner .btn-primary{
  background:var(--amber);
  color:var(--ink);
  flex-shrink:0;
}

.cta-banner .btn-primary:hover{ background:#f0b458; }


/* ---------- Footer ---------- */

footer{
  background:var(--ink);
  color:var(--paper);
  padding:64px 0 40px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}

.footer-grid h3{
  font-family:var(--serif);
  font-size:19px;
  margin-bottom:8px;
}

.footer-grid p{
  font-size:14px;
  opacity:0.7;
  max-width:280px;
}

.footer-col h4{
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
  opacity:0.85;
}

.footer-col a, p{
  display:block;
  font-size:14px;
  opacity:0.72;
  margin-bottom:10px;
}

.footer-col a:hover{ opacity:1; }

.footer-bottom{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  font-size:13px;
  opacity:0.6;
  display:flex;
  justify-content:space-between;
}

/* ---------- Newsletter modal ---------- */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,23,43,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1000;
}

.modal-overlay.open{ display:flex; }

.modal{
  background:var(--paper-raised);
  border:1px solid var(--line);
  max-width:440px;
  width:100%;
  padding:40px;
  position:relative;
  box-shadow:0 24px 60px rgba(18,23,43,0.3);
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:none;
  border:none;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:var(--ink-soft);
  width:32px;
  height:32px;
}

.modal-close:hover{ color:var(--ink); }

.modal h2{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
}

.modal-sub{
  margin-top:10px;
  font-size:14.5px;
  color:var(--ink-soft);
}

.modal-label{
  display:block;
  margin-top:24px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
}

#newsletter-email{
  width:100%;
  padding:13px 14px;
  font-size:15px;
  font-family:var(--sans);
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
}

#newsletter-email:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:2px;
}

.modal-error{
  display:none;
  color:#B3432B;
  font-size:13px;
  margin-top:8px;
}

.modal-error.visible{ display:block; }

.modal-submit{
  margin-top:20px;
  width:100%;
  justify-content:center;
}

.modal-success{
  display:none;
  margin-top:20px;
  font-size:15px;
  font-weight:500;
  color:var(--emerald);
}

.modal-success.visible{ display:block; }

.modal.submitted #newsletter-form{ display:none; }

/* ---------- Responsive ---------- */

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-signin{ display:none; }
  .nav-contact{ display: none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{ padding-left:20px; padding-right:20px; }
  .nav-cta {display: none;}
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-banner-inner{ flex-direction:column; align-items:center; gap:24px; }

  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .footer-grid{ grid-template-columns:1fr; text-align: center; }
  .footer-grid > div > p{ margin:0 auto; }
  .footer-bottom{ flex-direction:column; align-items: center; gap:8px; }
  .cta-banner h2{ font-size:28px; }

  .contact-hero-inner{ text-align: center; }
  .contact-hero{ padding-top:56px; padding-bottom:36px; }
  .contact-hero h1{ font-size:32px; }
  .contact-grid{ padding-top:36px; padding-bottom:56px; }
  .contact-form{ padding:28px; }
}