body {
  font-family:system-ui,-apple-system,sans-serif;
  margin:0;
  color:#18352f;
  background:#f8fbf9;
}

header,main,footer {
  max-width:1050px;
  margin:auto;
  padding:24px;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

nav a {
  margin-left:16px;
  color:#245c50;
  text-decoration:none;
}

.hero {
  padding:64px 24px;
  background:#e3f5ec;
  border-radius:24px;
}

h1 {
  font-size:clamp(32px,5vw,56px);
  max-width:700px;
  line-height:1.12;
}

p {
  line-height:1.65;
  color:#49655d;
}

.btn {
  display:inline-block;
  padding:13px 20px;
  background:#197b65;
  color:white;
  text-decoration:none;
  border-radius:12px;
  border:0;
  cursor:pointer;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
  margin:28px 0;
}

.card {
  background:white;
  padding:24px;
  border:1px solid #d8e9e1;
  border-radius:16px;
}

form {
  background:white;
  padding:24px;
  border-radius:16px;
  max-width:650px;
}

label {
  display:block;
  margin-top:14px;
  font-weight:600;
}

input,select {
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:12px;
  margin-top:6px;
  border:1px solid #abc7bd;
  border-radius:8px;
  font:inherit;
}

.check {
  display:flex;
  align-items:start;
  gap:10px;
  font-weight:400;
}

.check input {
  width:auto;
}

small {
  color:#617a71;
}

footer {
  border-top:1px solid #d8e9e1;
  font-size:13px;
}
* { box-sizing: border-box; }
header { gap: 16px; flex-wrap: wrap; }
nav { display: flex; flex-wrap: wrap; gap: 16px; }
nav { align-items: center; max-width: 100%; }
.language { display: flex; align-items: center; gap: 8px; margin: 0; }
.language select { width: auto; margin: 0; }
.language label { margin: 0; }
.categories { margin: 16px 0; padding: 0; border: 0; min-inline-size: 0; }
.categories legend { padding: 0; font-weight: 600; }
.categories label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; }
.categories input { width: 1.1rem; height: 1.1rem; flex: none; margin: 0; accent-color: #197b65; }
#english-link { text-decoration: underline; }
main, nav, footer { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  header { align-items: flex-start; }
  nav { width: 100%; }
  .language { flex-wrap: wrap; }
}
nav a { margin: 0; padding-block: 10px; }
.hero { padding: 48px; }
h1 { font-size: 3rem; margin-block: 12px; }
.hero p { max-width: 64ch; }
section[id] { margin-block-start: 48px; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border-radius: 8px; overflow-wrap: anywhere; }
.card h3 { margin-top: 0; }
#treatments .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.area-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 12px; background: #fffef9; color: #28332f; }
.area-image { display: block; width: 100%; height: auto; }
.area-copy { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.area-copy h3 { margin: 0; font-size: 1.3rem; }
.area-subtitle { margin: 6px 0; font-size: .9rem; color: #48695e; }
[dir="rtl"] .area-subtitle { text-align: right; }
.area-copy ul, .area-detail ul { padding-inline-start: 1.25rem; }
.area-copy li::marker { color: #447e68; }
.area-link { margin-block-start: auto; padding-block: 10px; align-self: flex-start; color: #17644e; font-weight: 650; text-underline-offset: 4px; }
.area-detail { max-width: 820px; overflow-wrap: anywhere; }
.area-detail .area-image { border-radius: 12px; }
@media (max-width: 620px) {
  #treatments .grid { grid-template-columns: minmax(0, 1fr); }
  #treatments .area-card { padding: 0; }
}
li { line-height: 1.6; margin-bottom: 8px; }
:focus-visible { outline: 3px solid #915520; outline-offset: 3px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  header, main, footer { padding: 16px; }
  .hero, .card, form { padding: 20px; }
  h1 { font-size: 2rem; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  select { min-width: 0; }
}