/* Praktijk Ademruimte — misty green-grey, slate ink and a quiet teal. Literata for the voice,
   Atkinson Hyperlegible for everything you have to read and fill in.
   Signature: a circle that breathes in and out (stills with reduced motion), and the waiting time. */
@font-face { font-family: "Literata"; src: url("../../fonts/literata/literata-latin-standard-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../../fonts/literata/literata-latin-standard-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg: #EEF2F1; --paper: #F8FAF9; --ink: #23313A; --muted: #4D5D64; --line: #CFD9D7; --teal: #3F6E73; --teal-soft: #D5E3E1;
  --btn: var(--teal); --on-btn: #FFFFFF; --btn-hover: #2F575B; --focus: var(--teal);
  --display: "Literata", Georgia, serif; --text: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400; --display-track: -0.02em; --radius: 1.75rem; --field-radius: 1rem;
  --menu-font: 400 1.4rem var(--display);
  --k-bg: var(--paper); --k-soft: #E6EDEB; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--teal); --k-on-accent: #FFFFFF; --k-radius: 1.5rem; --k-font: var(--text);
}
h1 em, h2 em { font-style: italic; color: var(--teal); }
.dx-logo { display: inline-flex; flex-direction: column; font: 500 1.5rem/1 var(--display); letter-spacing: -0.02em; }
.dx-logo small { margin-top: 0.25rem; font: 400 0.7rem var(--text); color: var(--muted); }

.ar-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); }
.ar-hero h1 { margin-top: 1rem; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1.02; }
.ar-hero h1 em { display: block; }
.ar-breath { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.ar-breath__ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--teal-soft) 58%, rgba(213, 227, 225, 0) 71%); animation: ar-breathe 10s ease-in-out infinite; }
.ar-breath__img { position: relative; width: 74%; }
.ar-breath__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
@keyframes ar-breathe { 0%, 100% { transform: scale(0.86); } 45%, 55% { transform: scale(1); } }
@media (max-width: 960px) { .ar-hero { grid-template-columns: 1fr; } .ar-breath { max-width: 24rem; } }
.ar-crisis { display: flex; gap: 0.6rem; align-items: baseline; padding-block: 1rem; font-size: 0.95rem; color: var(--ink); border-top: 1px solid var(--line); }
.ar-crisis span { color: var(--teal); font-size: 0.7rem; }
.ar-crisis--end { border-top: 0; padding-bottom: 2.5rem; }

.ar-begin { background: var(--paper); }
.ar-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
.ar-steps li { position: relative; padding: 2rem 1.75rem; border-radius: var(--radius); background: var(--bg); }
.ar-steps span { display: inline-flex; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--teal-soft); color: var(--ink); font-size: 0.85rem; font-weight: 700; }
.ar-steps h3 { margin-top: 1.25rem; font-size: 1.7rem; }
.ar-steps p { margin-top: 0.4rem; color: var(--muted); }
@media (max-width: 860px) { .ar-steps { grid-template-columns: 1fr; } }

.ar-wait__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ar-wait__num { padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius); background: var(--ink); color: #EEF2F1; }
.ar-wait__num .dx-eyebrow, .ar-wait__num .dx-small { color: #B9C7CB; }
.ar-big { margin: 0.5rem 0 1rem; font: 400 clamp(4.5rem, 10vw, 7.5rem)/1 var(--display); letter-spacing: -0.04em; }
.ar-big span { font-size: 0.32em; letter-spacing: 0; }
.ar-fees { margin-top: 1.5rem; border-top: 1px solid var(--ink); }
.ar-fees div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ar-fees dd { font-weight: 700; text-align: right; }
@media (max-width: 860px) { .ar-wait__in { grid-template-columns: 1fr; } }

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