/* Praktijk Rugwind — sand, warm charcoal and sage. Cormorant for the voice, Work Sans for the rest.
   Signature: a spine of rounded segments, and the first consultation as a bar of minutes. */
@font-face { font-family: "Cormorant"; src: url("../../fonts/cormorant/cormorant-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../../fonts/cormorant/cormorant-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../../fonts/work-sans/work-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #F3EEE6; --paper: #FBF8F3; --ink: #2B2A26; --muted: #5C5A52; --line: #DAD2C4; --sage: #4C6650; --sage-soft: #DCE3D8;
  --btn: var(--ink); --on-btn: #F3EEE6; --btn-hover: #46443D; --focus: var(--ink);
  --display: "Cormorant", Georgia, serif; --text: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 500; --display-track: -0.01em; --radius: 0.5rem; --field-radius: 0.4rem; --btn-radius: 0.4rem;
  --menu-font: italic 500 1.6rem var(--display);
  --k-bg: var(--paper); --k-soft: #EEE8DD; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--ink); --k-on-accent: #F3EEE6; --k-radius: 0.6rem; --k-font: var(--text);
}
h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
h1 em, h2 em { font-style: italic; color: var(--sage); }
.dx-logo { display: inline-flex; flex-direction: column; font: 600 1.7rem/1 var(--display); }
.dx-logo small { margin-top: 0.2rem; font: 500 0.62rem var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* the spine */
.rw-spine { display: grid; gap: 0.45rem; justify-items: center; }
.rw-spine i { display: block; width: 2.6rem; height: 1.15rem; border-radius: 0.6rem; background: var(--sage-soft); border: 1px solid #B8C6B4; }
.rw-spine i:nth-child(3n + 2) { width: 2.9rem; }
.rw-spine i:nth-child(odd) { background: #E8E0D2; }

.rw-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 8vw, 6.5rem); }
.rw-hero h1 { margin-top: 1rem; font-size: clamp(2.9rem, 6.2vw, 5.4rem); line-height: 0.98; }
.rw-hero h1 em { display: block; }
.rw-hero__art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.5rem; }
@media (max-width: 960px) { .rw-hero { grid-template-columns: 1fr; } .rw-hero > .rw-spine { display: none; } .rw-hero__art { max-width: 28rem; } }

.rw-consult { background: var(--paper); }
.rw-bar { display: flex; height: 0.9rem; border-radius: 999px; overflow: hidden; gap: 3px; margin-bottom: 2rem; }
.rw-bar span { background: var(--sage); }
.rw-bar span:nth-child(2) { background: #6F8A72; } .rw-bar span:nth-child(3) { background: #9DB09D; } .rw-bar span:nth-child(4) { background: #C7D2C4; }
.rw-bar__15 { flex: 15; } .rw-bar__20 { flex: 20; } .rw-bar__5 { flex: 5; }
.rw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.rw-steps li { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.rw-min { display: block; font: 500 3.2rem/1 var(--display); }
.rw-min small { margin-left: 0.25rem; font: 600 0.75rem var(--text); letter-spacing: 0.1em; color: var(--muted); }
.rw-steps h3 { margin-top: 0.9rem; font: 600 1rem var(--text); letter-spacing: 0; }
.rw-steps p { margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 860px) { .rw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rw-fees__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.rw-prices { margin-top: 2rem; border-top: 1px solid var(--ink); }
.rw-prices div { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.rw-prices dd { font: 500 1.6rem var(--display); white-space: nowrap; }
.rw-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.75rem; border-radius: 0.5rem; background: var(--paper); }
.rw-note p { color: var(--muted); }
@media (max-width: 860px) { .rw-fees__in { grid-template-columns: 1fr; } }

.rw-visit { background: var(--paper); }
.rw-visit__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.rw-visit__art { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: end; }
.rw-visit__art img { width: 100%; object-fit: cover; border-radius: 0.5rem; }
.rw-visit__art picture:first-child img { aspect-ratio: 3 / 4; }
.rw-visit__art picture:last-child img { aspect-ratio: 1; }
.rw-visit h2 { margin: 0.8rem 0 1.4rem; }
.rw-visit address { font-size: 1.15rem; line-height: 1.5; }
@media (max-width: 860px) { .rw-visit__in { grid-template-columns: 1fr; } }