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

:root {
  --cream:  #FAFAFA;
  --black:  #1A1614;
  --green:  #1B4D45;
  --green2: #3E8E7E;
  --border: rgba(26,22,20,0.12);
  --font:   'IBM Plex Sans Arabic', sans-serif;
  /* film grain: barely-there fractal noise over the whole surface */
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { font-size: 16px; background: var(--cream); }

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

[dir="ltr"] body,
[dir="ltr"] * {
  font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
}

::selection { background: var(--green); color: #fff; }

/* ── The stage: one viewport, one composition ───────── */
.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 3.5vh, 40px) clamp(24px, 5.5vw, 76px);
  overflow: hidden;
}

/* a faint pool of light above the composition */
.stage-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 90vw);
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(62,142,126,0.10), transparent 68%);
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: var(--grain-img);
}

/* ── Row 1: identity ────────────────────────────────── */
.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: block; text-decoration: none; }
.logo-img { height: 26px; width: auto; display: block; max-width: 160px; }

.lang-toggle {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(26,22,20,0.45);
  background: transparent;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  transition: color 0.2s;
}
.lang-toggle:hover { color: var(--green); }

/* ── Row 2: statement facing the index, divided by the seam ── */
.center {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 1px minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: clamp(16px, 3vh, 40px) 0;
}

/* the seam: the edge between the message and the craft */
.seam-mid {
  width: 1px;
  height: min(380px, 56vh);
  align-self: center;
  background: linear-gradient(180deg, transparent, rgba(62,142,126,0.55) 30%, rgba(62,142,126,0.55) 70%, transparent);
  box-shadow: 0 0 24px 2px rgba(62,142,126,0.25);
}

.statement { text-align: start; }

.headline {
  font-family: var(--font);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: clamp(18px, 3vh, 30px);
  text-shadow: 0.05em 0.08em 0.6em rgba(26,22,20,0.18);
}
.headline em { font-style: normal; color: var(--green); }
[dir="ltr"] .headline {
  font-size: clamp(1.9rem, 4.2vw, 3.7rem);
  line-height: 1.12;
  text-wrap: balance;
}

.sub {
  font-family: var(--font);
  font-size: 0.94rem;
  line-height: 1.85;
  color: rgba(26,22,20,0.52);
  max-width: 440px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

/* the quiet invitation: an underline, not a box */
.notify {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  width: min(460px, 100%);
}
.notify input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,22,20,0.30);
  color: var(--black);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 9px 2px;
  outline: none;
  transition: border-color 0.25s;
  min-width: 0;
}
.notify input::placeholder { color: rgba(26,22,20,0.30); }
.notify input:focus { border-bottom-color: var(--green); }

.notify button {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--black);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.notify button:hover { color: var(--green); border-bottom-color: var(--green); }
.notify button:disabled { opacity: 0.45; cursor: default; }

.notify-success {
  display: none;
  font-size: 0.86rem;
  color: var(--green);
  font-weight: 600;
  padding: 9px 0;
}
.notify-success.show { display: block; }

/* ── The services index, facing the statement ───────── */
.svc-side { text-align: start; }

.base-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(26,22,20,0.35);
  margin-bottom: 6px;
}

.svc-grid { display: flex; flex-direction: column; }
.svc {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.86rem;
  color: rgba(26,22,20,0.55);
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,22,20,0.07);
  transition: color 0.2s, padding-inline-start 0.2s ease;
}
.svc:last-child { border-bottom: none; }
.svc:hover { color: var(--black); padding-inline-start: 8px; }
.svc i {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--green2);
  width: 18px;
  flex-shrink: 0;
  direction: ltr;
}

/* ── Row 3: the base line ───────────────────────────── */
.base {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: clamp(16px, 2.6vh, 24px);
  border-top: 1px solid var(--border);
}
.tagline { font-size: 0.75rem; color: rgba(26,22,20,0.40); }
.meta-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.meta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(26,22,20,0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.meta-link svg { flex-shrink: 0; }
.meta-link:hover { color: var(--green); }
.copy { font-size: 0.68rem; color: rgba(26,22,20,0.22); direction: ltr; }

/* ── Page fade-in ───────────────────────────────────── */
body { opacity: 0; }
body.ready { opacity: 1; transition: opacity 0.5s ease; }

/* ── Language switch transition ─────────────────────── */
body.lang-switching {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(4px);
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
body.lang-in {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease;
}

/* ── Entrance ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes shadowGrow {
    from { opacity: 0; transform: translateY(22px); text-shadow: 0 0 0 rgba(26,22,20,0); }
    to   { opacity: 1; transform: translateY(0); text-shadow: 0.05em 0.08em 0.6em rgba(26,22,20,0.18); }
  }
  @keyframes seamRise {
    from { opacity: 0; transform: scaleY(0.3); }
    to   { opacity: 1; transform: scaleY(1); }
  }
  .bar      { animation: fadeUp 0.6s ease both; animation-delay: 0.12s; }
  .headline { animation: shadowGrow 0.85s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.22s; }
  .sub      { animation: fadeUp 0.65s ease both; animation-delay: 0.45s; }
  .notify,
  .notify-success { animation: fadeUp 0.65s ease both; animation-delay: 0.58s; }
  .seam-mid { animation: seamRise 1.1s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.3s; transform-origin: center; }
  .base-label { animation: fadeUp 0.6s ease both; animation-delay: 0.5s; }
  .svc      { animation: fadeUp 0.55s ease both; }
  .svc:nth-child(1) { animation-delay: 0.58s; }
  .svc:nth-child(2) { animation-delay: 0.64s; }
  .svc:nth-child(3) { animation-delay: 0.70s; }
  .svc:nth-child(4) { animation-delay: 0.76s; }
  .svc:nth-child(5) { animation-delay: 0.82s; }
  .svc:nth-child(6) { animation-delay: 0.88s; }
  .svc:nth-child(7) { animation-delay: 0.94s; }
  .svc:nth-child(8) { animation-delay: 1.00s; }
  .base     { animation: fadeUp 0.7s ease both; animation-delay: 0.85s; }
}

/* ── Responsive ─────────────────────────────────────── */
/* Tablets and down: the columns stack, the seam hides */
@media (max-width: 900px) {
  .stage { height: auto; }
  .center {
    grid-template-columns: 1fr;
    gap: clamp(40px, 7vh, 64px);
    padding-block: clamp(32px, 6vh, 56px);
  }
  /* seam turns horizontal between the stacked sections */
  .seam-mid {
    width: min(300px, 62%);
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent, rgba(62,142,126,0.55), transparent);
    box-shadow: 0 0 24px 2px rgba(62,142,126,0.30);
  }
  .base { align-items: flex-start; }
  .meta-links { justify-content: flex-start; }
}

/* Phones */
@media (max-width: 560px) {
  .headline { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  [dir="ltr"] .headline { font-size: clamp(1.65rem, 8.2vw, 2.2rem); }
  .notify { flex-direction: column; align-items: stretch; gap: 12px; }
  .notify button { width: max-content; }
  .svc { font-size: 0.8rem; padding: 8px 0; }
  .base { flex-direction: column; gap: 10px; }
}