/* Elyoxe — layout and components.
   Extracted from the approved design. Page-type styles live here, never
   inlined into the document shell. */

.wrap { inline-size: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ambient background planes ------------------------------------------------ */
.field { position: absolute; pointer-events: none; z-index: 0; }
.field-a { inset-block-start: -380px; inset-inline-end: -260px; inline-size: 1100px; block-size: 1100px; transform: rotate(-20deg); background: #F8F0F2; border-radius: 80px; }
.field-b { inset-block-start: -200px; inset-inline-end: 60px; inline-size: 420px; block-size: 1000px; transform: rotate(-20deg); background: #F3E4E8; opacity: .6; border-radius: 56px; }
[dir="rtl"] .field-a, [dir="rtl"] .field-b { transform: rotate(20deg); }
.page { position: relative; overflow: hidden; }
.page > *:not(.field) { position: relative; z-index: 1; }

/* header ------------------------------------------------------------------- */
.head { display: flex; align-items: center; padding-block: 1.875rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand-name { font-family: var(--display); font-weight: 300; font-size: 1.6875rem; letter-spacing: .02em; color: var(--wine-deep); direction: ltr; }
.nav { margin-inline-start: auto; display: flex; gap: 2.125rem; align-items: center; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.nav a { color: inherit; padding-block: .25rem; border-block-end: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--wine); }
.nav .lang { font-family: var(--display); font-size: var(--fs-small); color: #9B8790; }
.nav-toggle { display: none; }

/* hero --------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; padding-block-start: 5.375rem; align-items: center; }
.hero h1 { font-size: var(--fs-hero); max-inline-size: 13ch; }
.hero h1 .accent { color: var(--wine); font-weight: 300; }
.hero .lead { font-size: 1rem; color: var(--ink-2); max-inline-size: var(--measure); margin-block-start: 2.25rem; }
.hero-actions { display: flex; gap: 1.75rem; margin-block-start: 2.625rem; align-items: center; flex-wrap: wrap; }

.hero-visual { position: relative; }
.hero-frame { background: var(--surface); border: 1px solid var(--rule-faint); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--lift-2); }
.hero-card {
  position: absolute; inset-block-end: -2.125rem; inset-inline-start: -2.625rem;
  inline-size: 18.125rem; background: var(--surface); border: 1px solid var(--rule-faint);
  border-radius: var(--radius); padding: 1.375rem 1.5625rem; box-shadow: var(--lift-2);
}
[dir="rtl"] .hero-card { inset-inline-start: auto; inset-inline-end: -2.625rem; }
.stat-row { display: flex; align-items: flex-end; gap: 1.375rem; }
.stat b { display: block; font-family: var(--display); font-weight: 200; font-size: 2.5rem; line-height: 1; color: var(--ink); }
.stat b.accent { color: var(--wine); }
.stat span { display: block; font-size: .78rem; color: var(--muted-2); margin-block-start: .3rem; }
.stat-div { inline-size: 1px; block-size: 2.375rem; background: var(--rule-faint); }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-block; font-family: var(--display); font-weight: 400; font-size: .9375rem;
  letter-spacing: .03em; padding: 1rem 2.125rem; border-radius: var(--radius-pill);
  background: var(--wine); color: var(--ground); border: 1px solid var(--wine);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-align: center;
}
.btn:hover { background: var(--wine-deep); border-color: var(--wine-deep); color: var(--ground); }
.btn-ghost { background: transparent; color: var(--wine-deep); border-color: var(--wine-line); }
.btn-ghost:hover { background: var(--ground-2); color: var(--wine-deep); border-color: var(--wine-line); }
.btn-text { font-family: var(--display); font-weight: 400; font-size: .9375rem; letter-spacing: .03em; color: var(--wine-deep); border-block-end: 1px solid #D9BCC5; padding-block-end: .25rem; }
[dir="rtl"] .btn, [dir="rtl"] .btn-text { font-family: var(--arabic); letter-spacing: 0; }

/* sections ----------------------------------------------------------------- */
.section { padding-block-start: 8.75rem; }
.section-head { display: flex; align-items: flex-end; gap: 1.625rem; margin-block-end: 2.875rem; }
.section-head h2 { margin: 0; }
.section-head .rule { flex-grow: 1; block-size: 1px; background: #EADCE0; margin-block-end: .875rem; }
.section-head .count { font-family: var(--display); font-size: .8125rem; color: var(--faint); margin-block-end: .625rem; }

/* cards -------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--lift-1); }
.card-lg { border-radius: 1.5rem; box-shadow: var(--lift-2); overflow: hidden; }

.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
.service { padding: 1.75rem 1.625rem; }
.service .n { font-family: var(--display); font-size: .75rem; color: var(--faintest); letter-spacing: .14em; margin-block-end: 1.25rem; }
.service svg { margin-block-end: 1.125rem; }
.service h3 { margin-block-end: .5625rem; }
.service p { font-size: .84rem; color: var(--muted); margin: 0; max-inline-size: none; }

/* work --------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; }
.work-side { display: grid; gap: 1.25rem; }
.work-media { background: var(--ground-2); border-block-end: 1px solid var(--rule-soft); }
.work-body { padding: 1.875rem 2.125rem 2.125rem; }
.work-meta { display: flex; align-items: center; gap: .8125rem; margin-block-end: .9375rem; }
.work-meta .n { font-family: var(--display); font-size: .75rem; color: var(--wine); letter-spacing: .1em; }
.work-meta .dash { inline-size: 1.125rem; block-size: 1px; background: var(--wine-line); }
.work-body h3 { font-family: var(--display); font-weight: 300; font-size: 2.25rem; margin-block-end: .8125rem; letter-spacing: -.01em; }
.work-body p { font-size: .9rem; color: var(--ink-2); margin: 0; max-inline-size: 52ch; }
.work-sm .work-body { padding: 1.375rem 1.625rem 1.625rem; }
.work-sm .work-body h3 { font-size: 1.6875rem; }
.work-sm .work-body p { font-size: .84rem; }

/* approach ----------------------------------------------------------------- */
.approach { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.approach-list { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.approach-item { background: var(--ground); padding-block: 1.75rem; padding-inline-end: .25rem; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; align-items: start; }
.approach-item .n { font-family: var(--display); font-size: .8125rem; color: var(--faintest); letter-spacing: .1em; padding-block-start: .1875rem; }
.approach-item h3 { margin-block-end: .5rem; }
.approach-item p { font-size: .875rem; color: var(--muted); margin: 0; max-inline-size: 56ch; }
.note-box { margin-block-start: 2.125rem; background: var(--ground-2); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 1.5rem 1.625rem; box-shadow: var(--lift-1); }
.note-box p { font-size: .84rem; color: var(--ink-2); margin: 0; }

/* contact ------------------------------------------------------------------ */
.contact { background: var(--surface); border: 1px solid var(--rule-faint); border-radius: var(--radius-lg); padding: 3.5rem 3.625rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; box-shadow: var(--lift-2); }
.contact h2 { margin-block-end: 1rem; }
.contact p { font-size: .9375rem; color: var(--ink-2); margin: 0; max-inline-size: 44ch; }
.contact-actions { display: flex; flex-direction: column; gap: .75rem; }

/* case study --------------------------------------------------------------- */
.case-head { padding-block-start: 4.75rem; max-inline-size: 1000px; }
.case-meta { display: grid; grid-template-columns: repeat(4, auto); gap: 3.25rem; margin-block-start: 2.75rem; justify-content: start; }
.case-meta dt { margin-block-end: .4375rem; }
.case-meta dd { margin: 0; font-size: .9rem; color: var(--ink); }
.browser { background: var(--surface); border: 1px solid var(--rule-faint); border-radius: 1.5rem; overflow: hidden; box-shadow: var(--lift-2); }
.browser-bar { display: flex; align-items: center; gap: .5rem; padding: .875rem 1.125rem; border-block-end: 1px solid var(--rule-soft); background: #FBF7F8; }
.browser-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--wine-line); display: block; }
.browser-bar span { flex-grow: 1; text-align: center; font-family: var(--display); font-size: .75rem; color: var(--faint); letter-spacing: .06em; }
.case-row { display: grid; grid-template-columns: 220px 1fr; gap: 3.5rem; padding-block: 2.75rem; border-block-end: 1px solid var(--rule); }
.case-row:first-of-type { padding-block-start: 0; }
.case-row h2 { font-size: 1.625rem; font-weight: 300; }
.case-row p { font-size: 1rem; color: var(--ink-2); margin: 0; max-inline-size: 66ch; }
.bullets li { display: flex; gap: 1.125rem; margin-block-end: 1.375rem; }
.bullets li:last-child { margin-block-end: 0; }
.bullets .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--wine); margin-block-start: .69rem; flex-shrink: 0; }
.figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.figure { background: var(--surface); padding: 1.875rem 1.625rem; }
.figure b { display: block; font-family: var(--display); font-weight: 200; font-size: 2.75rem; line-height: 1; color: var(--ink); }
.figure b.accent { color: var(--wine); }
.figure span { display: block; font-size: .8125rem; color: var(--muted-2); margin-block-start: .5625rem; line-height: 1.5; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { font-size: .8125rem; padding: .5rem .9375rem; background: var(--ground-2); border: 1px solid var(--rule-soft); color: var(--wine-deep); border-radius: var(--radius-pill); }
.caveat { background: var(--ground-2); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 1.625rem 1.75rem; box-shadow: var(--lift-1); }
.caveat .label { color: var(--wine); display: block; margin-block-end: .75rem; }
.caveat p { font-size: .875rem; color: var(--ink-2); margin: 0; max-inline-size: none; }

/* footer ------------------------------------------------------------------- */
.foot { margin-block-start: 8.75rem; background: var(--ground-3); border-block-start: 1px solid #EFE0E4; padding-block: 4rem 2.875rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
.foot-links { display: flex; flex-direction: column; gap: .5625rem; font-size: .84rem; color: var(--muted); }
.foot-links a { color: inherit; }
.foot-links a:hover { color: var(--wine); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-block-start: 2.75rem; padding-block-start: 1.375rem; border-block-start: 1px solid #EFE0E4; font-size: .78rem; color: #9B8790; }

/* responsive --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 3rem; }
  .hero-card { position: static; inline-size: auto; margin-block-start: -1.625rem; margin-inline: .875rem; }
  .work, .approach, .contact, .case-row, .case-meta { grid-template-columns: 1fr; }
  .approach, .contact { gap: 2rem; }
  .case-row { gap: .75rem; }
  .case-meta { gap: 1.5rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .section { padding-block-start: 4.5rem; }
  .nav { display: none; }
  .nav-toggle { display: flex; margin-inline-start: auto; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; border: 1px solid #EFE0E4; border-radius: 12px; background: transparent; cursor: pointer; }
  .work-body { padding: 1.5rem 1.5rem 1.75rem; }
  .work-body h3 { font-size: 1.75rem; }
  .contact { padding: 2rem 1.5rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero-actions .btn, .hero-actions .btn-text { text-align: center; }
}
@media (max-width: 560px) {
  .services, .figures { grid-template-columns: 1fr; }
}

/* ── contact form ─────────────────────────────────────────────────────── */
.form { display: grid; gap: .875rem; }
.form label { display: grid; gap: .375rem; font-family: var(--display); font-size: .8125rem; letter-spacing: .04em; color: var(--muted); }
[dir="rtl"] .form label { font-family: var(--arabic); letter-spacing: 0; }
.form input, .form textarea {
  font: inherit; font-weight: 300; color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: 14px; padding: .8rem 1rem;
  inline-size: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form textarea { min-block-size: 8.5rem; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--wine-line); box-shadow: 0 0 0 4px var(--wine-tint); }
.form .hp { position: absolute; inset-inline-start: -9999px; block-size: 0; overflow: hidden; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.form-note { font-size: .78rem; color: var(--faint); margin: 0; }
.form-status { font-size: .9rem; margin: .25rem 0 0; min-block-size: 1.4em; }
.form-status.ok { color: var(--wine); }
.form-status.err { color: #9A3B2E; }