/* Litt Language — one stylesheet, no webfonts, no third-party anything.
   Mobile first: every rule below is the small-screen rule until a
   min-width query says otherwise. */

:root {
  --ink: #17211c;
  --ink-soft: #4a5a52;
  --ink-faint: #6b7a72;
  --green: #14532d;
  --green-dark: #0e3b20;
  --green-tint: #eef4f0;
  --sand: #f7f5f1;
  --line: #dde5e0;
  --white: #ffffff;
  --focus: #b45309;
  --radius: 10px;
  --wrap: 68rem;
  --measure: 38rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Naskh Arabic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.9;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 650; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 620; }
h3 { font-size: 1.05rem; font-weight: 620; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-inline-start: 1.15rem; }
li { margin-bottom: .5rem; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
.section { padding-block: 2.5rem; }
.readable, .lead { max-width: var(--measure); }
.lead { font-size: 1.08rem; color: var(--ink-soft); }
.fine { font-size: .85rem; color: var(--ink-faint); max-width: var(--measure); }
.eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); font-weight: 600; margin-bottom: .4rem;
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--green);
  color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------- header --- */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.bar {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--green); color: #fff; border-radius: 7px;
  font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.brand-mark.big { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; margin-inline: auto; }
.brand-name { font-weight: 640; letter-spacing: -0.01em; }

.nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; order: 3; width: 100%; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .9rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); font-weight: 560; }

.langs { margin-inline-start: auto; display: flex; gap: .3rem; }
.langs a {
  font-size: .78rem; padding: .22rem .45rem; border: 1px solid var(--line);
  border-radius: 5px; text-decoration: none; color: var(--ink-soft); line-height: 1.3;
}
.langs a[aria-current="true"] { background: var(--green); color: #fff; border-color: var(--green); }

/* ------------------------------------------------------------ hero --- */
.hero { background: linear-gradient(180deg, var(--green-tint), var(--white)); }
.hero-in { padding-block: 2.6rem 2.2rem; }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-bottom: 1.4rem; }
.hero-mail { font-size: .9rem; color: var(--ink-faint); margin-top: 1rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.btn {
  display: inline-block; padding: .68rem 1.15rem; border-radius: var(--radius);
  font-weight: 560; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--green); background: var(--white); }
.btn-ghost:hover { border-color: var(--green); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.mail { font-weight: 560; word-break: break-word; }

/* ------------------------------------------------------------ band --- */
.band { background: var(--sand); border-block: 1px solid var(--line); }
.band > .wrap { padding-block: 2.4rem; }
.page-head { background: var(--green-tint); border-bottom: 1px solid var(--line); }
.page-head > .wrap { padding-block: 1.8rem 1.6rem; }

/* -------------------------------------------------------- services --- */
.svc-grid, .price-grid, .sector-list, .contact-two {
  display: grid; gap: 1rem; margin-block: 1.4rem;
}
.svc, .price-card, .sector, .contact-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
}
.svc h3 { color: var(--green-dark); }
.svc p, .sector p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.price-card { display: flex; flex-direction: column; }
.price {
  font-size: 1.45rem; font-weight: 660; color: var(--green-dark);
  margin: .1rem 0 .7rem; letter-spacing: -0.02em;
}
.price-what { font-size: .95rem; margin-bottom: .7rem; }
.price-fine { font-size: .85rem; color: var(--ink-faint); margin: auto 0 0; }

/* The boundary block is the most important thing on the page: it says
   what is NOT offered. It is styled to be read, not skimmed past. */
.boundary {
  border: 1px solid var(--line); border-inline-start: 4px solid var(--green);
  background: var(--green-tint); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-block: 1.6rem; max-width: var(--measure);
}
.boundary h3 { margin-bottom: .5rem; color: var(--green-dark); }
.boundary ul { margin: 0; padding-inline-start: 1.1rem; }
.boundary li { font-size: .93rem; color: var(--ink-soft); }

.steps { counter-reset: s; list-style: none; padding: 0; max-width: var(--measure); }
.steps li {
  counter-increment: s; position: relative; padding-inline-start: 2.4rem;
  margin-bottom: 1.1rem; color: var(--ink-soft);
}
.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-size: .82rem; font-weight: 640;
}
.steps-lg li { font-size: 1.02rem; }

.about p { max-width: var(--measure); }

.faq { border-bottom: 1px solid var(--line); padding: .3rem 0; max-width: var(--measure); }
.faq summary {
  cursor: pointer; padding: .75rem 0; font-weight: 560; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 700; }
.faq[open] summary::after { content: "–"; }
.faq div { padding-bottom: .6rem; }
.faq p { color: var(--ink-soft); margin: 0; font-size: .95rem; }

.prose p { max-width: var(--measure); white-space: pre-line; }

/* ------------------------------------------------------------ form --- */
.form-wrap { margin-top: 1.6rem; max-width: 46rem; }
.form-grid { display: grid; gap: .85rem; }
.form-group label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 540; }
.form-group input, .form-group select {
  font: inherit; font-size: 1rem; padding: .58rem .65rem;
  border: 1px solid var(--line); border-radius: 7px; background: var(--white);
  color: var(--ink); width: 100%; min-height: 2.75rem;
}
fieldset { border: 0; padding: 0; margin: 0; }
.check-label { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; font-size: .9rem; }
.check-label input { min-width: 1.1rem; min-height: 1.1rem; }
.notice {
  background: var(--green-tint); border-inline-start: 3px solid var(--green);
  padding: .8rem .95rem; border-radius: 7px; font-size: .9rem;
  color: var(--ink-soft); max-width: var(--measure);
}
.quote-output {
  background: var(--sand); border: 1px solid var(--line); border-radius: 7px;
  padding: .9rem; overflow-x: auto; font-size: .85rem; white-space: pre-wrap;
  word-break: break-word;
}
.quote-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }

/* ---------------------------------------------------------- footer --- */
.site-footer { background: var(--green); color: #dbe7df; margin-top: 3rem; padding-block: 2rem 1.4rem; }
.foot {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem;
  display: grid; gap: 1.5rem;
}
.site-footer .brand-name { color: #fff; font-size: 1.05rem; }
.site-footer .fine { color: #b9cdc1; }
.site-footer a { color: #fff; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.foot-nav a { font-size: .9rem; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-mail a { color: #fff; }
.copyright {
  width: 100%; max-width: var(--wrap); margin: 1.4rem auto 0; padding-inline: 1rem;
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 1rem; color: #b9cdc1;
}

/* ------------------------------------------------ language picker --- */
body.picker { display: grid; place-items: center; min-height: 100vh; background: var(--green-tint); text-align: center; }
body.picker .wrap { padding-block: 2.5rem; }
body.picker h1 { margin-top: .8rem; }
body.picker .lead, body.picker .fine { margin-inline: auto; }
.lang-grid { display: grid; gap: .7rem; margin: 1.6rem auto 1rem; max-width: 26rem; }
.lang-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1rem; text-decoration: none; color: var(--ink); font-weight: 560;
}
.lang-card:hover { border-color: var(--green); color: var(--green); }

/* --------------------------------------------------------- larger --- */
@media (min-width: 40rem) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .sector-list { grid-template-columns: repeat(2, 1fr); }
  .contact-two { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 56rem) {
  .section { padding-block: 3.4rem; }
  .band > .wrap { padding-block: 3.2rem; }
  .hero-in { padding-block: 4rem 3.4rem; }
  .nav { order: 0; width: auto; gap: 1.3rem; margin-inline-start: 1.5rem; }
  .langs { margin-inline-start: auto; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

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

@media print {
  .site-header, .site-footer, .cta-row, .form-wrap { display: none; }
  body { color: #000; }
}

/* ------------------------------------------------- hero at-a-glance ---
   On a wide screen the hero was half empty, which reads as unfinished.
   The panel restates facts already on the page — the language directions,
   where the practice works, the usual turnaround, and the one thing that
   is not offered. Nothing new is claimed here. */
.glance {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-top: 1.8rem;
}
.glance h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
             color: var(--green); margin-bottom: .9rem; }
html[dir="rtl"] .glance h2 { letter-spacing: 0; }
.glance dl { margin: 0; display: grid; gap: .75rem; }
.glance dt { font-size: .82rem; color: var(--ink-faint); }
.glance dd { margin: .1rem 0 0; font-size: .95rem; font-weight: 540; color: var(--ink); }
.glance div { border-top: 1px solid var(--line); padding-top: .7rem; }
.glance div:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 56rem) {
  .hero-in { display: grid; grid-template-columns: 1.25fr .85fr; gap: 3rem; align-items: start; }
  .glance { margin-top: .4rem; position: sticky; top: 1rem; }
}

/* --------------------------------------------------- legal identity ---
   The legal notice states four facts and deliberately omits several
   others. Giving the four their own panel makes what IS stated easy to
   find, and what is not stated obvious rather than buried in prose. */
.identity {
  background: var(--sand); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--green); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin-bottom: 1.6rem; max-width: var(--measure);
}
.identity p { margin: 0; white-space: pre-line; font-size: .97rem; }
.owner-line { max-width: var(--measure); }

/* ------------------------------------------------- simplified form ---- */
.form-wide { grid-column: 1 / -1; }
.form-group textarea {
  font: inherit; font-size: 1rem; padding: .58rem .65rem;
  border: 1px solid var(--line); border-radius: 7px; background: var(--white);
  color: var(--ink); width: 100%; resize: vertical; min-height: 5rem;
}

/* ------------------------------------------------------------- logo ---
   The mark is now an SVG file rather than CSS-styled letters, so the
   header, the footer and the favicon are all the same artwork. */
img.brand-mark { display: block; border-radius: 7px; background: none; width: 2rem; height: 2rem; }
img.brand-mark.big { width: 3.5rem; height: 3.5rem; margin-inline: auto; }
.foot-lockup { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; }
.foot-lockup .brand-mark { width: 1.75rem; height: 1.75rem; }