/* ============================================
   PONTARO — style.css
   ============================================ */

/* ---- Self-hosted fonts ---- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../includes/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../includes/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../includes/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../includes/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../includes/fonts/jost-v20-latin-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../includes/fonts/jost-v20-latin-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../includes/fonts/jost-v20-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../includes/fonts/jost-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../includes/fonts/jost-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --cream: #f5f1ec;
  --creamy:#f5ebe0;
  --dark: #2a2420;
  --text: #3d3530;
  --textlight:#524740;
  --muted: #8a7d74;
  --accent: #b87c5a;
  --price: #724227;
  --divider: #c8b8a8;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- GLOBAL MAX WIDTH ---- */
.inner {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* ---- NAV ---- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.1rem 2.5rem;
  background: rgba(245, 241, 236, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--dark);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}

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

/* ---- BUTTONS ---- */
.btn-dark {
  display: inline-block;
  background: var(--dark);
  color: #fff !important;
  padding: 0.65rem 1.4rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-dark:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-block;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  background: transparent;
  padding: 0.65rem 1.8rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.25s, color 0.25s;
}

.btn-outline:hover {
  background: var(--dark);
  color: #fff;
}

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.85;
  display: block;
  min-height: 100%;
  background: #d9cec4;
}

/* Fallback gradient if image missing */
.hero-image:not(:has(img[src])) {
  background: linear-gradient(135deg, #e8ddd4 0%, #d0bfb0 100%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(245, 241, 236, 0.75) 0%,
    rgba(245, 241, 236, 0.45) 50%,
    transparent 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 5rem 2.5rem 0;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  animation: fadeUp 0.9s ease both;
}

.hero-content > * {
  max-width: 480px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1.1;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.hero-divider {
  width: 3rem;
  height: 1.5px;
  background: var(--accent);
  margin: 1.5rem 0;
}

.hero-content p {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 2rem;
  font-weight: 300;
  line-height: 1.8;
}

/* ---- CONTENT BLOCK ---- */
.content-block {
  display: flex;
  gap: 3rem;
  padding: 6rem 2.5rem;
  max-width: 860px;
  margin: 0 auto;
  align-items: flex-start;
}

.content-left {
  flex: 1;
}

.content-right {
  flex: 1;
}

.label {
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  color: var(--dark);
  font-weight: 400;
  line-height: 1.6;
}

p.list {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--dark);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom:0.5rem;
}

.highlight {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--textlight);
  font-weight: 400;
  line-height: 1.6;
}

.price { 
  font-family: 'Cormorant Garamond', serif; 
  font-size: 1.5rem; 
  color: var(--price); 
  margin: 0.5rem 0 0.3rem 0;
}

.content-divider {
  width: 1.5px;
  background: var(--divider);
  align-self: stretch;
  min-height: 180px;
  flex-shrink: 0;
}

p {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--dark);
  margin-bottom: 1rem;
  margin-left: 0.5rem;
  font-weight: 400;
}

.subtle {
  font-size: 1rem;
  color: var(--muted);
}

/* ---- LANDSCAPE ---- */
.landscape {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
  background: linear-gradient(180deg,#e8c9a0 0%,#c47a52 60%,#8b3a28 100%);
}

.landscape blockquote {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  font-size: 2.9rem;
  color: var(--cream);
  text-shadow: 0.05rem 0.05rem 0.2rem var(--dark);
}

.landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- CTA ---- */
.cta {
  text-align: center;
  padding: 6rem 2rem;
  background: var(--creamy);
}

.cta p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 2rem;
  letter-spacing: 0.01em;
}

/* ---- FOOTER ---- */
footer {
  border-top: 1px solid var(--divider);
  padding: 1.8rem 2.5rem;
  background: var(--cream);
}

footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  font-weight: 400;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--dark);
}

@media (max-width: 680px) {
  nav {
    padding: 0.9rem 1.2rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.01em;
  }

  .nav-links .btn-dark {
    padding: 0.5rem 0.9rem;
    font-size: 0.76rem;
  }

  .hero-content {
    padding: 6rem 1.5rem 0;
  }

  .content-block {
    flex-direction: column;
    padding: 4rem 1.5rem;
    gap: 2rem;
  }

  .content-divider {
    width: 3rem;
    height: 1.5px;
    min-height: unset;
    align-self: auto;
  }

  .landscape blockquote {
    font-size: 1.8rem;
    padding: 0 1.5rem;
  }

  .cta {
    padding: 4rem 1.5rem;
  }

  footer {
    padding: 1.5rem 1.2rem;
  }

  .footer-links {
    gap: 1.2rem;
  }
}

/* ============================================
   HOE HET WERKT — page-specific additions
   ============================================ */

.nav-logo a { text-decoration: none; color: inherit; }

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hhw-hero { padding: 10rem 2.5rem 3rem; }
.hhw-hero-inner { display: flex; align-items: center; gap: 4rem; }
.hhw-hero-text { flex: 1; }
.hhw-hero-text h1 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.15; color: var(--dark); margin-bottom: 1.5rem; }
.hhw-hero-text h1 em { font-style: italic; color: var(--accent); }
.hhw-hero-image { flex: 1; max-width: 420px; aspect-ratio: unset; overflow: hidden; background: #d9cec4; }
.hhw-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 80%; }
.hhw-hero-image.img-fallback { background: linear-gradient(160deg, #e0d3c8 0%, #c8b5a6 100%); }

.hhw-bullets { padding: 0rem 2.5rem 5rem; }
.hhw-bullet-item { display: flex; gap: 2.5rem; align-items: flex-start; }
.hhw-bullet-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.4rem; display: flex; align-items: center; justify-content: center; }
.bullet-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.hhw-italic { font-family: 'Cormorant Garamond', serif; font-style: none; font-size: 1.3rem; color: var(--dark); padding:0.75rem 0 0.75rem 1rem; }
.hhw-accent { color: var(--accent); }

.hhw-two-col { display: flex; gap: 4rem; align-items: flex-start; }
.hhw-col-left { flex: 1; }
.hhw-col-right { flex: 1.2; }

.hhw-section { padding: 5rem 2.5rem; border-top: 1px solid var(--divider); }
.hhw-company { padding: 2rem 0.5rem; border-top: 1px solid var(--divider); text-align: center; }
.hhw-company a { color: var(--text); text-decoration: none;}

.hhw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0 2rem; }
.hhw-card { border: 1px solid var(--accent); padding: 1.8rem; }
.hhw-card-divider { width: 100%; height: 1px; background: var(--divider); margin: 1.2rem 0 0.8rem 0; }

.hhw-footnotes { display: block;}
.hhw-footnotes span { font-size: 1.15rem; color: var(--dark); font-weight: 300; }

.hhw-calendly { border: 1px solid var(--accent); padding: 1.8rem; margin-top: 2rem; }
.hhw-calendly-note { color: var(--accent); }
.hhw-contact-grid { gap: 5rem; }
.hhw-calendly .section-title {margin:0;}
.hhw-calendly .hhw-dark {margin-top:0.8rem;}
.hhw-calendly .hhw-accent{margin-bottom:0.8rem;}

.hhw-form { display: flex; flex-direction: column; gap: 1rem; }
.hhw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hhw-form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.hhw-form-field label { font-size: 0.82rem; color: var(--text); font-weight: 400; }
.hhw-form-field .req { color: var(--accent); }
.hhw-form-field .opt { color: var(--muted); font-weight: 300; }
.hhw-form-field input, .hhw-form-field textarea { background: #ede9e3; border: none; padding: 0.75rem 1rem; font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 300; color: var(--dark); outline: none; resize: vertical; transition: background 0.2s; }
.hhw-form-field input::placeholder, .hhw-form-field textarea::placeholder { color: var(--muted); }
.hhw-form-field input:focus, .hhw-form-field textarea:focus { background: #e5e0d9; }
.hhw-form .btn-dark { align-self: flex-start; cursor: pointer; border: none; }

@media (max-width: 760px) {
  .hhw-hero-inner, .hhw-two-col, .hhw-contact-grid { flex-direction: column; gap: 2.5rem; }
  .hhw-hero-image { max-width: 100%; width: 100%; }
  .hhw-cards { grid-template-columns: 1fr; }
  .hhw-form-row { grid-template-columns: 1fr; }
  .hhw-footnotes { flex-direction: column; gap: 0.6rem; }
  .hhw-hero { padding: 6rem 1.5rem 3rem; }
  .hhw-section { padding: 3rem 1.5rem; }
  .hhw-bullets { padding: 0 1.5rem 3rem; }
  .hhw-contact-grid { gap: 2.5rem; }
}

/* ============================================
   FAQ — page-specific additions
   ============================================ */

.faq-hero { padding: 10rem 2.5rem 3rem; }
.faq-group { padding: 3rem 2.5rem; }
.faq-item { border-bottom: 1px solid var(--divider); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--dark);
  gap: 2rem;
}

.faq-question:hover { color: var(--accent); }

.faq-icon {
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  font-style: normal;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  display: none;
  padding: 0 0 1.4rem;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.8;
  max-width: 640px;
}

.faq-item.open .faq-answer { display: block; }

@media (max-width: 680px) {
  .faq-hero { padding: 6rem 1.5rem 2rem; }
  .faq-group { padding: 2rem 1.5rem; }
}

/* ============================================
   OVER ONS — page-specific additions
   ============================================ */

.over-hero {
  min-height: unset;
  display: block;
  padding: 10rem 2.5rem 3rem;
}

.over-hero::after { display: none; }

.over-hero .label {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.over-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

.over-hero p {
  font-size: 1rem;
  color: var(--dark);
  line-height: 1.8;
  margin: 0;
}

.over-ons-section p { margin-bottom: 1.8rem; }
.over-ons-section p:last-child { margin-bottom: 0; }

.over-portrait {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto 0;
}

.over-ons-flow { padding: 5rem 2.5rem; }
.over-ons-flow p { margin-bottom: 1.8rem; }
.over-ons-flow p:last-child { margin-bottom: 0; }

@media (max-width: 680px) {
  .over-hero { padding: 6rem 1.5rem 2rem; }
  .over-ons-flow { padding: 3rem 1.5rem; }
}

/* ---- Contact status message ---- */
.contact-status {
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  border-radius: 2px;
}
.contact-status.status-ok {
  background: #eef5ee;
  color: #3a6b3a;
  border-left: 3px solid #6aab6a;
}
.contact-status.status-error {
  background: #fdf1ee;
  color: #7a3020;
  border-left: 3px solid #c47a5a;
}