.hero { padding-block: var(--space-6) var(--space-5); }
.hero-heading { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); align-items: end; margin-block: var(--space-3) var(--space-5); }
.hero h1 { font-size: clamp(2.7rem, 5.7vw, 5.5rem); letter-spacing: -.035em; }
html:lang(en) .hero h1, html:lang(en) .positioning h2 { font-family: var(--font-editorial); }
html:lang(ar) .hero h1 { font-size: clamp(2.6rem, 5vw, 4.8rem); letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero-intro p { max-inline-size: 29rem; color: var(--color-muted); margin-block-end: var(--space-3); }
.hero-art img { inline-size: 100%; aspect-ratio: 2.45; object-fit: cover; }
.hero-art figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-block-start: .8rem; color: var(--color-muted); font-size: .75rem; }
.positioning { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-5); border-block-end: 1px solid var(--color-line); }
.positioning h2 { max-inline-size: 50rem; font-size: clamp(1.8rem, 3.2vw, 3rem); }
.positioning p { color: var(--color-muted); max-inline-size: 39rem; margin-block-start: var(--space-3); }
.service-list { border-block-start: 1px solid var(--color-line); }
.service-list li { display: grid; grid-template-columns: 3rem 1fr 1.15fr; gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-block-end: 1px solid var(--color-line); }
.service-list p { color: var(--color-muted); max-inline-size: 33rem; }
.projects { background: var(--color-surface); }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.project-card:nth-child(2) { margin-block-start: var(--space-6); }
.project-card img { inline-size: 100%; aspect-ratio: 1.2; object-fit: cover; }
.project-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block: var(--space-3) .4rem; }
.project-meta span { color: var(--color-muted); font-size: .8rem; }
.project-card p { color: var(--color-muted); max-inline-size: 32rem; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.process-grid li { border-block-start: 1px solid var(--color-line); padding-block-start: var(--space-3); }
.process-grid h3 { margin-block: var(--space-3) var(--space-2); }
.process-grid p { color: var(--color-muted); }
.proof { border-block-start: 1px solid var(--color-line); display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-6); }
.proof h2 { margin-block: var(--space-2) var(--space-3); }
.proof p { color: var(--color-muted); }
.proof-list li { padding-block: var(--space-3); border-block-end: 1px solid var(--color-line); }
.proof-list li:first-child { padding-block-start: 0; }
.proof-list h3 { margin-block-end: .5rem; }
.contact { background: var(--color-primary); color: var(--color-on-primary); }
.contact-inner { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--space-6); }
.contact .eyebrow { color: var(--color-on-primary); }
.contact h2 { margin-block: var(--space-3); font-size: clamp(2.3rem, 4.5vw, 4.5rem); }
.contact p { max-inline-size: 35rem; }
.contact-options { display: flex; align-items: start; flex-direction: column; gap: var(--space-3); }
.contact-options > a { overflow-wrap: anywhere; }
.contact-note { font-size: .8rem; opacity: .85; }
.contact [id] { scroll-margin-block-start: 2rem; }
.contact a:focus-visible { outline-color: var(--color-on-primary); }
@media (max-width: 60rem) {
  .hero-heading { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .hero-intro p { margin: 0; }
  .hero-intro .button { flex-shrink: 0; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 40rem) {
  .hero { padding-block-start: var(--space-4); }
  .hero-intro { align-items: start; flex-direction: column; }
  .hero-art img { aspect-ratio: 1.15; }
  .hero-art figcaption { flex-direction: column; gap: .1rem; }
  .positioning, .proof, .project-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .project-card:nth-child(2) { margin-block-start: var(--space-3); }
  .service-list li { grid-template-columns: 2rem 1fr; gap: .75rem; }
  .service-list p { grid-column: 2; }
  .process-grid { gap: var(--space-4) var(--space-3); }
  .process-grid h3 { font-size: 1.2rem; }
  .project-meta { flex-wrap: wrap; gap: .25rem 1rem; }
}