/* ==========================================================================
   HOW WE WORK, the desk, then the promises. Ported from the approved
   audition (design-proposals/work-v7.html).
   Two movements in one section.
   First the desk: four loose papers, each labelled with the mess a matter
   really arrives as, straighten and close into one file while the frame holds
   still. Then the promises: four cards that turn themselves, so nothing waits
   for a thumb and nothing has to be discovered. The camera keeps moving inside
   each photograph while its card is on screen.
   Nothing here listens to scroll. The desk runs on a CSS view timeline, the
   cards on a timer that sleeps when the section is off screen or the tab is
   hidden. With the script blocked the four promises simply stack and read. */
.work { position: relative; overflow: clip; padding: clamp(48px, 8vh, 90px) 0 clamp(44px, 7vh, 84px); }
.work-bed { position: absolute; inset: 0; }
/* The desk was generated for this section, so let it be seen: only enough
   ground colour to keep the headline and the labels legible over it. */
.work-bed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: brightness(.66) saturate(.9); }
.work-bed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #061019 1%, rgba(6,16,25,.7) 18%, rgba(6,16,25,.3) 46%, rgba(6,16,25,.55) 78%, #061019 96%); }
/* The opening and the close are both centred, so the section is read down its
   own middle: eyebrow, headline, one line of lead, then the desk. Each block
   is measured rather than left to run the width of the page - the headline
   breaks at about sixteen characters and the lead at forty-four, so the three
   of them stack as a centred column instead of a ragged triangle. */
.work-in { position: relative; z-index: 1; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); text-align: center; }
.work-in small { display: block; margin-bottom: 16px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f49f2e; }
.work-in h2 { margin: 0 auto; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.work-in h2 em { font-style: normal; color: #f49f2e; }
.work-in > p { margin: clamp(14px, 2.4vh, 20px) auto 0; max-width: 44ch; line-height: 1.6; color: rgba(244,239,228,.75); text-wrap: pretty; }

/* ---- First movement: the desk clears itself ---------------------------- */
.work-track { position: relative; z-index: 1; height: 230svh; margin-top: clamp(20px, 3.5vh, 34px); view-timeline: --desk block; }
.work-desk { position: sticky; top: 9svh; height: min(72svh, 540px); }
/* The papers are built from what is actually on an Egyptian legal document:
   a revenue stamp (the stamp tax has been payable on documents here since Law
   111 of 1980), the round ink impression a notary or the Bar Association
   leaves, a signature, and the staple holes of a file that has been opened
   before. No lettering anywhere, so nothing can render as fake Arabic. */
.work-sheet { position: absolute; left: 50%; top: 50%; width: min(36%, 146px); aspect-ratio: 3 / 4; border-radius: 3px; background: linear-gradient(160deg, #f6f1e6, #ded6c6); box-shadow: 0 18px 44px rgba(2,6,10,.6); transform-origin: 50% 50%; }
.work-sheet::after { content: ""; position: absolute; inset: 26% 12% 30%; background: repeating-linear-gradient(rgba(12,20,28,.3) 0 1px, transparent 1px 13px); opacity: .7; }
/* Two staple holes: this file has been opened before. */
.work-sheet::before { content: ""; position: absolute; top: 6%; left: 9%; width: 4px; height: 4px; border-radius: 50%; background: rgba(20,34,48,.4); box-shadow: 0 8px 0 rgba(20,34,48,.4); }
.work-stamp { position: absolute; top: 5%; right: 8%; width: 21%; aspect-ratio: 3 / 4; background: #f49f2e; border: 1.5px dashed rgba(246,241,230,.8); border-radius: 1px; rotate: -4deg; }
.work-seal { position: absolute; bottom: 8%; left: 7%; width: 27%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(24,42,60,.34); rotate: -12deg; }
.work-seal::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(24,42,60,.28); }
.work-sign { position: absolute; bottom: 13%; right: 7%; width: 42%; fill: none; stroke: rgba(24,42,60,.5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Loose means loose: no two sheets touch until the scroll gathers them. */
.work-sheet--1 { translate: -128% -94%; rotate: -13deg; }
.work-sheet--2 { translate: 26% -102%; rotate: 9deg; }
.work-sheet--3 { translate: -112% 8%; rotate: 6deg; }
.work-sheet--4 { translate: 14% 16%; rotate: -7deg; }
@media (min-width: 820px) {
  .work-sheet { width: min(28%, 240px); }
  .work-sheet--1 { translate: -196% -62%; }
  .work-sheet--2 { translate: 70% -70%; }
  .work-sheet--3 { translate: -160% 4%; }
  .work-sheet--4 { translate: 52% 10%; }
}
.work-tag { position: absolute; z-index: 3; padding: 7px 13px; border-radius: 999px; background: rgba(6,16,25,.9); border: 1px solid rgba(244,159,46,.45); color: #f49f2e; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
[dir="rtl"] .work-tag { letter-spacing: 0; }
/* The labels take the four corners of the desk so they never lie across a
   paper: what the paper is stays readable next to it, not on top of it. */
.work-tag--1 { left: 1%; top: 1%; }
.work-tag--2 { right: 1%; top: 13%; }
.work-tag--3 { left: 1%; bottom: 13%; }
.work-tag--4 { right: 1%; bottom: 1%; }
/* One per cent of a desk is fourteen pixels; one per cent of a phone is four,
   so on a phone these labels sat four pixels off the glass while every line of
   copy above them started at twenty. They keep the page's gutter instead. */
@media (max-width: 860px) {
  .work-tag { max-width: calc(100% - var(--haq-gutter, 20px) * 2); }
  .work-tag--1, .work-tag--3 { left: var(--haq-gutter, 20px); }
  .work-tag--2, .work-tag--4 { right: var(--haq-gutter, 20px); }
}
.work-file { position: absolute; left: 50%; top: 50%; width: min(62%, 320px); aspect-ratio: 3 / 4; translate: -50% -50%; border-radius: 4px; background: linear-gradient(155deg, #16212c, #0b131b); border: 1px solid rgba(244,159,46,.45); box-shadow: 0 26px 60px rgba(2,6,10,.75); display: grid; place-content: center; gap: 8px; text-align: center; padding: 20px; opacity: 0; }
.work-file svg { width: 30px; height: 30px; margin-inline: auto; stroke: #f49f2e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.work-file b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.35rem; }
/* The papers end as the firm's own word: haq, the right that is owed to you. */
.work-ar { font-family: "Noto Naskh Arabic", "Segoe UI", serif; font-size: 2.6rem; line-height: 1; color: #f49f2e; }
.work-file span { font-size: .82rem; color: rgba(244,239,228,.72); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .work-sheet, .work-tag, .work-file { animation: linear both; animation-timeline: --desk; animation-range: entry 100% exit 0%; }
    .work-sheet--1 { animation-name: work-s1; }
    .work-sheet--2 { animation-name: work-s2; }
    .work-sheet--3 { animation-name: work-s3; }
    .work-sheet--4 { animation-name: work-s4; }
    .work-tag { animation-name: work-tag-out; }
    .work-file { animation-name: work-file-in; }
  }
}
@keyframes work-s1 { 0%, 22% { opacity: 1; } 70%, 100% { translate: -50% -50%; rotate: 0deg; scale: .9; opacity: .2; } }
@keyframes work-s2 { 0%, 26% { opacity: 1; } 74%, 100% { translate: -50% -50%; rotate: 0deg; scale: .93; opacity: .24; } }
@keyframes work-s3 { 0%, 30% { opacity: 1; } 78%, 100% { translate: -50% -50%; rotate: 0deg; scale: .96; opacity: .28; } }
@keyframes work-s4 { 0%, 34% { opacity: 1; } 82%, 100% { translate: -50% -50%; rotate: 0deg; scale: .99; opacity: .32; } }
@keyframes work-tag-out { 0%, 40% { opacity: 1; translate: 0 0; } 62%, 100% { opacity: 0; translate: 0 -14px; } }
@keyframes work-file-in { 0%, 76% { opacity: 0; scale: .94; } 92%, 100% { opacity: 1; scale: 1; } }
/* No scroll timeline, or motion turned down: the desk shows where it ends. */
@supports not (animation-timeline: view()) { .work-file { opacity: 1; } .work-sheet { opacity: .3; } .work-tag { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .work-file { opacity: 1; } .work-sheet { opacity: .3; } .work-tag { opacity: 0; } }

/* ---- Second movement: the promises turn themselves --------------------- */
.work-turn { position: relative; z-index: 1; max-width: 1100px; margin: clamp(30px, 5vh, 56px) auto 0; padding-inline: clamp(20px, 4vw, 48px); }
.work-turn > small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,239,228,.55); }
.work-stage { margin-top: 14px; }
html.work-js .work-stage { display: grid; }
.work-card { position: relative; overflow: hidden; border-radius: 4px; min-height: min(64svh, 500px); display: grid; align-content: end; gap: 14px; padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 36px) clamp(28px, 5vw, 44px); }
html.work-js .work-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
html.work-js .work-card[data-on] { opacity: 1; visibility: visible; }
html:not(.work-js) .work-card + .work-card { margin-top: 14px; }
.work-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.92); scale: 1.12; }
.work-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,9,14,.3), rgba(4,9,14,.34) 40%, rgba(4,9,14,.94)); }
/* The camera keeps moving while a card is on screen. */
@media (prefers-reduced-motion: no-preference) {
  html.work-js .work-card[data-on] img { animation: work-burn 4.4s linear both; }
  html.work-js .work-card[data-on] .work-vow { animation: work-rise .42s cubic-bezier(.25,.8,.25,1) both .1s; }
  html.work-js .work-card[data-on] > p { animation: work-rise .42s cubic-bezier(.25,.8,.25,1) both .18s; }
}
@keyframes work-burn { from { scale: 1.16; translate: 2.5% -1.5%; } to { scale: 1.06; translate: -2.5% 1.5%; } }
@keyframes work-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.work-hold { position: absolute; inset-block-start: clamp(16px, 3vw, 24px); inset-inline-start: clamp(20px, 4vw, 34px); display: flex; align-items: center; gap: 9px; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,228,.6); }
.work-hold i { display: block; width: 18px; height: 1px; background: #f49f2e; }
/* The promise reads as a column in the lower left, not as a banner stretched
   across the whole frame: the mark sits above the line, and the line is only
   allowed to run about fifteen characters before it wraps. */
.work-vow { display: block; max-width: 15ch; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 4.6vw, 2.7rem); line-height: 1.03; text-shadow: 0 2px 16px rgba(4,9,14,.95); }
.work-vow span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 50%; border: 1.5px solid rgba(244,159,46,.55); background: rgba(6,16,25,.5); }
.work-vow svg { display: block; width: 21px; height: 21px; stroke: #f49f2e; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.work-card > p { max-width: 34ch; line-height: 1.55; color: rgba(244,239,228,.86); text-shadow: 0 1px 12px rgba(4,9,14,.95); }

/* The counter: four marks, the live one filling as its card plays. */
.work-dots { display: flex; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.work-dots button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.work-dots button::before { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: rgba(244,239,228,.24); }
.work-dots button::after { content: ""; position: absolute; inset: 50% auto auto 0; height: 2px; width: 0; background: #f49f2e; }
.work-dots button[aria-selected="true"]::after { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html.work-js .work-dots button[aria-selected="true"]::after { width: 0; animation: work-fill 3.4s linear forwards; }
  html.work-js .work-dots.paused button[aria-selected="true"]::after { animation-play-state: paused; }
}
@keyframes work-fill { to { width: 100%; } }
.work-dots button:focus-visible { outline: 2px solid #f49f2e; outline-offset: 2px; }

/* The section closes on the middle of the page: the line, then the way in
   under it, both centred, so the last thing read is the only thing to do. */
.work-foot { position: relative; z-index: 1; max-width: 1100px; margin: clamp(26px, 4.5vh, 44px) auto 0; padding-inline: clamp(20px, 4vw, 48px); display: grid; justify-items: center; text-align: center; gap: clamp(16px, 2.6vh, 22px); }
.work-foot p { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.28; max-width: 24ch; text-wrap: balance; }
.work-foot em { font-style: italic; color: #f49f2e; }
.work-foot a { display: inline-block; padding: 13px 24px; min-height: 44px; border-radius: 999px; background: #f49f2e; color: #1a1006; font-weight: 700; text-decoration: none; touch-action: manipulation; }
.work-foot a:hover { background: #ffb85c; }
.work-foot a:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html.work-js .work-in > *, html.work-js .work-foot > * { opacity: 0; translate: 0 16px; }
  html.work-js .work.in .work-in > *, html.work-js .work.in .work-foot > * { opacity: 1; translate: 0 0; transition: opacity .55s ease, translate .6s cubic-bezier(.25,.8,.25,1); }
  html.work-js .work.in .work-in > :nth-child(2) { transition-delay: .1s; }
}