/* =========================================================================
   مكتب الأستاذة هدير سليم — أحوال شخصية
   -------------------------------------------------------------------------
   Whoever opens this page is having a bad month. Most of them are women, most
   are reading on a phone late at night, and most have already been told
   something frightening by somebody who does not know the law.

   So: nothing dark, nothing urgent, no red. Warm ivory, one calm teal, wide
   line spacing, round corners, and photographs chosen for the room they show
   rather than for the drama. The opposite of the criminal page in every
   choice, deliberately — the two are the same trade on different days and
   must not look like one template recoloured.
   ========================================================================= */

:root {
  --sand: #fdf9f4;
  --sand-2: #f6efe6;
  --card: #ffffff;
  --ink: #26221e;
  --ink-2: #57504a;
  --ink-3: #8b827a;
  --teal: #1f6f6b;
  --teal-2: #2a908a;
  --teal-soft: rgba(31, 111, 107, 0.08);
  --clay: #c4795a;
  --line: rgba(38, 34, 30, 0.1);
  --shadow: 0 16px 44px rgba(38, 34, 30, 0.1);

  --font: "Tajawal", system-ui, sans-serif;
  --wrap: min(780px, calc(100% - 36px));
  --wide: min(1100px, calc(100% - 36px));
  --r: 20px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  max-width: 100%;
  display: block;
  /* width/height attributes reserve each box while loading, and also count as
     a definite height — which makes aspect-ratio below be ignored. */
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--teal-soft);
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.wide {
  width: var(--wide);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.45;
}

.demo-note {
  background: var(--sand-2);
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: center;
  padding: 7px 16px;
}

/* ------------------------------------------------------------------ head */
.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 249, 244, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo svg {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.logo b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.3;
}

.logo span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}

.head .pill {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ hero */
/* The photograph is a room, not a courtroom: the first thing this reader needs
   is to believe it is safe to sit down and talk. */
.hero {
  position: relative;
  isolation: isolate;
  padding: 74px 0 0;
  text-align: center;
}

.hero h1 {
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.5;
}

.hero h1 span {
  color: var(--teal);
}

.hero > .wrap > p {
  margin: 18px auto 28px;
  max-width: 50ch;
  font-size: 17.5px;
  color: var(--ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  justify-content: center;
}

.reassure {
  margin-top: 24px;
  color: var(--ink-3);
  font-size: 14.5px;
}

.hero__shot {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--r) var(--r) 0 0;
  margin-top: 40px;
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.btn--solid {
  background: var(--teal);
  color: #fff;
}

.btn--solid:hover {
  background: var(--teal-2);
}

.btn--soft {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

.btn--soft:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* -------------------------------------------------------------- sections */
.band {
  padding: 58px 0;
}

.band--soft {
  background: var(--sand-2);
}

.band h2 {
  font-size: clamp(23px, 3.2vw, 30px);
  text-align: center;
}

.band__lead {
  margin: 12px auto 32px;
  max-width: 54ch;
  text-align: center;
  color: var(--ink-2);
}

/* The worries, each with a photograph — the sentence she would actually say,
   next to a room that does not look frightening. */
.worries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.worry {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.worry > img {
  width: 100%;
  aspect-ratio: 10 / 6;
  object-fit: cover;
}

.worry__body {
  padding: 20px 22px 22px;
}

.worry b {
  display: block;
  font-size: 17px;
  color: var(--teal);
  margin-bottom: 4px;
}

.worry p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* --------------------------------------------------------- who she is */
.who {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}

.who > img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.who h2 {
  text-align: start;
  margin-bottom: 10px;
}

.who p {
  color: var(--ink-2);
  margin: 0 0 14px;
}

.who ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.who li {
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: 15px;
  color: var(--ink-2);
}

.who li b {
  color: var(--ink);
}

/* The four steps, each with a photograph. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: rung;
}

.step {
  counter-increment: rung;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.step > img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.step__body {
  padding: 18px 20px 20px;
}

.step__body::before {
  content: counter(rung);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 700;
  font-size: 14px;
}

.step h3 {
  font-size: 17px;
  margin-bottom: 3px;
}

.step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.8;
}

/* Cases, as plain chips — no cards, nothing that looks like a menu. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 15px;
}

/* The single most important promise on the page, over a quiet photograph. */
.private {
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
  overflow: hidden;
  padding: 44px 32px;
  text-align: center;
  color: #fff;
}

.private > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.private::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(21, 74, 71, 0.88);
}

.private h2 {
  color: #fff;
}

.private p {
  margin: 12px auto 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
}

/* ------------------------------------------------------------------- faq */
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq summary {
  padding: 17px 22px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "▾";
  color: var(--teal);
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: rotate(180deg);
}

.faq p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* ------------------------------------------------------------------ form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  display: grid;
  gap: 14px;
}

.form label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 5px;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sand);
  font-size: 15.5px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.form small {
  color: var(--ink-3);
  font-size: 12.5px;
}

.sent {
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: var(--r);
  padding: 20px 24px;
  font-weight: 700;
  text-align: center;
}

.office-shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------- footer */
.foot {
  padding: 42px 0 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14.5px;
  text-align: center;
}

.foot b {
  display: block;
  color: var(--ink);
  font-size: 17px;
  margin-bottom: 6px;
}

.foot__end {
  margin-top: 18px;
  font-size: 12.5px;
}

.wa {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(31, 111, 107, 0.28);
}

@media (max-width: 920px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .who {
    grid-template-columns: 240px 1fr;
    gap: 26px;
  }

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

@media (max-width: 640px) {
  .head .pill {
    display: none;
  }

  .worries,
  .steps {
    grid-template-columns: 1fr;
  }

  .who {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .who > img {
    max-width: 260px;
    margin-inline: auto;
  }

  .who h2 {
    text-align: center;
  }

  .band {
    padding: 44px 0;
  }

  .private {
    padding: 30px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------ the lawyer's face */
/* Whoever opens this page is deciding whether to tell a stranger something
   she has not told her family. A face makes that decision possible; a logo
   does not. So the portrait opens the page. */
.hero__top {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 36px;
  align-items: center;
  text-align: start;
}

.hero__face {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 4px solid var(--card);
  box-shadow: var(--shadow);
}

.hero__top .actions {
  justify-content: flex-start;
}

.hero__top h1 {
  text-align: start;
}

.btn--wa {
  background: #1f7a4d;
  color: #fff;
}

.btn--wa:hover {
  background: #228c58;
}

@media (max-width: 820px) {
  .hero__top {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
  }

  .hero__face {
    width: 150px;
    height: 150px;
  }

  .hero__top h1 {
    text-align: center;
  }

  .hero__top .actions {
    justify-content: center;
  }
}