/* ---------- Hero ---------- */
.hero { position: relative; padding-block: 40px 56px; overflow: clip; }
.hero__grid { display: grid; gap: 56px; }

.avail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  margin-block-end: 22px;
}
.avail__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #1F9D55; }
.avail__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1F9D55; opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }

.hero__title { font-size: var(--step-display); font-weight: 800; font-variation-settings: "opsz" 96; line-height: 1.02; letter-spacing: var(--track); }
.hero__line { display: block; overflow: clip; padding-block: 0.06em 0.12em; margin-block: -0.06em -0.12em; }
.hero__line-in { display: block; }

.hero__sub { margin-block-start: 22px; max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
.hero__proof { margin-block-start: 14px; max-width: 52ch; color: var(--muted); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-start: 30px; }
.hero__links { display: flex; flex-wrap: wrap; gap: 22px; margin-block-start: 22px; font-size: var(--step--1); font-weight: 600; }

/* Portrait "photographed" on a flat colour sweep, with a stock code and a price-flash burst. */
.stage { position: relative; width: min(100%, 380px); margin-inline: auto; padding: 0 0 56px; }
.stage__sweep { position: absolute; inset-block: 28px 28px; inset-inline: 40px -16px; background: var(--blue); }
.viewfinder { position: relative; width: 74%; }
.viewfinder__photo { width: 100%; height: auto; border: 4px solid var(--ground); box-shadow: var(--shadow); }
.viewfinder__corner { position: absolute; width: 18px; height: 18px; border: 3px solid var(--yellow); }
.viewfinder__corner--tl { inset-block-start: -10px; inset-inline-start: -10px; border-inline-end: 0; border-block-end: 0; }
.viewfinder__corner--tr { inset-block-start: -10px; inset-inline-end: -10px; border-inline-start: 0; border-block-end: 0; }
.viewfinder__corner--bl { inset-block-end: -10px; inset-inline-start: -10px; border-inline-end: 0; border-block-start: 0; }
.viewfinder__corner--br { inset-block-end: -10px; inset-inline-end: -10px; border-inline-start: 0; border-block-start: 0; }
.viewfinder__scan { position: absolute; inset-inline: 0; top: 0; height: 36px; margin-top: -36px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--yellow) 45%, transparent) 88%, var(--yellow)); opacity: 0; }
.viewfinder__box { position: absolute; top: var(--box-top); left: var(--box-left); width: var(--box-width); height: var(--box-height); overflow: visible; }
.viewfinder__box rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--yellow); stroke-width: 3; }
.viewfinder__label {
  position: absolute;
  left: var(--box-left);
  top: calc(var(--box-top) - 26px);
  display: inline-flex;
  gap: 8px;
  padding: 2px 8px;
  background: var(--yellow);
  color: #101114;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  direction: ltr;
}
.flash { position: absolute; inset-block-start: -22px; inset-inline-end: -14px; width: 138px; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-9deg); color: #101114; }
.flash svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flash polygon { fill: var(--yellow); stroke: #101114; stroke-width: 1.4; stroke-linejoin: round; }
.flash__text { position: relative; display: grid; gap: 1px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.3; max-width: 84px; }
.flash__text strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.code { position: absolute; inset-block-end: 0; inset-inline-start: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); direction: ltr; }

@media (min-width: 768px) { .hero { padding-block: 56px 72px; } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; column-gap: 48px; }
  .stage { width: 340px; }
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 72px; }
  .stage { width: 400px; }
}

/* ---------- Services catalogue ---------- */
.catalogue { display: grid; gap: var(--seam); grid-template-columns: 1fr; }
@media (min-width: 640px) { .catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catalogue { grid-template-columns: repeat(3, 1fr); } }

.item {
  --panel: var(--yellow);
  --on: #101114;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 440px;
  padding: 22px 22px 24px;
  background: var(--panel);
  color: var(--on);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.item--red { --panel: var(--red); --on: #fff; }
.item--blue { --panel: var(--blue); --on: #fff; }
.item--sky { --panel: #CFE0FF; --on: #101114; }
[data-theme="dark"] .item--sky { --panel: #9DB9FF; }
.item:hover { transform: translateY(-5px); box-shadow: var(--shadow); z-index: 1; }

.item__code { align-self: flex-start; padding: 2px 8px; background: var(--on); color: var(--panel); font-family: var(--font-mono); font-size: 12px; direction: ltr; }
.art { width: 100%; max-width: 230px; height: auto; margin-block: 6px 10px; overflow: visible; }
.art__move { transition: transform 520ms var(--ease-out); }
.item:hover .art__move { transform: translate(-18px, -14px); }
.item--ink:hover .art__move { transform: translateX(58px); }
.item:nth-child(3):hover .art__move { transform: translateX(124px); }
.item:nth-child(5):hover .art__move { transform: translateY(100px); }
.item:nth-child(6):hover .art__move { transform: translate(34px, 0); }
.item:nth-child(2):hover .art__move { transform: translate(-8px, 4px) scale(1.04); transform-origin: 155px 80px; }
.item__name { font-size: var(--step-2); font-weight: 800; font-variation-settings: "opsz" 48; letter-spacing: var(--track); line-height: 1.08; text-wrap: balance; }
.item__text { font-size: var(--step-0); line-height: 1.45; }
.item__tools { font-family: var(--font-mono); font-size: 12.5px; opacity: 0.88; direction: ltr; text-align: start; }
.item__ask {
  align-self: flex-start;
  margin-block-start: auto;
  padding: 10px 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  transition: background-color 180ms, color 180ms, transform 200ms var(--ease-out);
}
.item__ask:hover { background: var(--on); color: var(--panel); text-decoration: none; transform: translateY(-2px); }
.item__ask:focus-visible { outline-color: var(--on); }

/* ---------- How a project runs ---------- */
.steps { display: grid; gap: 32px 28px; grid-template-columns: 1fr; counter-reset: none; }
.step { display: grid; gap: 8px; align-content: start; }
.step__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: #101114; font-size: var(--step-2); font-weight: 800; transition: transform 300ms var(--ease-out); }
.step:nth-child(3n+2) .step__n { background: var(--blue); color: #fff; }
.step:nth-child(3n) .step__n { background: var(--panel-ink); color: #fff; }
.step:hover .step__n { transform: rotate(-8deg) scale(1.08); }
.step h3 { font-size: var(--step-1); font-weight: 800; letter-spacing: var(--track); line-height: 1.3; }
.step p { color: var(--muted); max-width: 40ch; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.how__cta { margin-block-start: 36px; }

/* ---------- Experience timeline ---------- */
.timeline { position: relative; padding-inline-start: 36px; }
.timeline__spine { position: absolute; inset-inline-start: 6px; inset-block: 10px; width: 4px; background: var(--rule); }
.timeline__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(1); }
.js .timeline__fill { transform: scaleY(0); }
.timeline__item { position: relative; padding-block-end: 44px; display: grid; gap: 4px 40px; }
@media (min-width: 900px) { .timeline__item { grid-template-columns: 260px minmax(0, 1fr); } .timeline__when { grid-column: 1; padding-block-start: 4px; } .timeline__role, .timeline__points { grid-column: 2; } .timeline__points { max-width: 80ch; } }
.timeline__item:last-child { padding-block-end: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -36px;
  inset-block-start: 6px;
  width: 16px;
  height: 16px;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--ground);
  transition: background-color 200ms, transform 300ms var(--ease-out);
}
.timeline__item:hover::before { background: var(--yellow); outline: 2px solid var(--ink); transform: rotate(45deg) scale(1.1); }
.timeline__when { color: var(--muted); font-size: var(--step--1); font-family: var(--font-mono); direction: ltr; text-align: start; }
.timeline__role { margin-block-start: 4px; font-size: var(--step-1); font-weight: 800; letter-spacing: var(--track); line-height: 1.3; }
.timeline__org { display: block; font-size: var(--step-0); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.timeline__points { margin-block-start: 12px; padding-inline-start: 1.1em; list-style: disc; }
.timeline__points li + li { margin-block-start: 6px; }
.timeline__points li::marker { color: var(--ink); }

/* ---------- Projects ---------- */
.projects { border-block-start: 3px solid var(--rule-strong); }
.project { position: relative; border-block-end: 1px solid var(--rule); transition: background-color 200ms; }
.project:hover, .project:has(:focus-visible) { background: var(--tint); }
.project__head { position: relative; display: grid; gap: 6px 40px; padding: 24px 56px 24px 12px; }
@media (min-width: 900px) { .project__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: 'title summary' 'meta summary'; align-items: start; } .project__title { grid-area: title; } .project__summary { grid-area: summary; } .project__meta { grid-area: meta; } }
[dir="rtl"] .project__head { padding: 24px 12px 24px 56px; }
.project__title { font-size: var(--step-2); font-weight: 800; letter-spacing: var(--track); line-height: 1.3; }
.project__toggle { text-align: start; }
.project__toggle::before { content: ""; position: absolute; inset: 0; }
.project__summary { max-width: var(--measure); color: var(--muted); }
.project__meta { color: var(--muted); font-size: var(--step--1); font-family: var(--font-mono); direction: ltr; text-align: start; }
.project__panel { max-width: 88ch; padding: 0 12px 24px; }
.project__points { padding-inline-start: 1.1em; list-style: disc; }
.project__points li + li { margin-block-start: 6px; }
.project__points li::marker { color: var(--ink); }
.project__tools { margin-block-start: 14px; color: var(--muted); font-size: var(--step--1); font-family: var(--font-mono); direction: ltr; text-align: start; }

/* projects.js adds is-enhanced; only then do panels collapse and rows become disclosures. */
.projects.is-enhanced .project__toggle::after {
  content: "+";
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--rule-strong);
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1;
  transition: transform 320ms var(--ease-out), background-color 200ms, color 200ms;
}
.projects.is-enhanced .project:hover .project__toggle::after { background: var(--yellow); color: #101114; border-color: #101114; }
.projects.is-enhanced .project.is-open .project__toggle::after { transform: rotate(135deg); background: var(--ink); color: var(--ground); border-color: var(--ink); }
.projects.is-enhanced .project__panel { display: grid; grid-template-rows: 0fr; padding-block-end: 0; opacity: 0; transition: grid-template-rows 340ms var(--ease-out), padding-block-end 340ms var(--ease-out), opacity 260ms; }
.projects.is-enhanced .project__panel > div { overflow: hidden; min-height: 0; }
.projects.is-enhanced .project.is-open .project__panel { grid-template-rows: 1fr; padding-block-end: 24px; opacity: 1; }

/* ---------- Skills ---------- */
.skills { display: grid; gap: 0 40px; border-block-start: 3px solid var(--rule-strong); }
.skills__group { position: relative; padding: 18px 12px 18px 36px; border-block-end: 1px solid var(--rule); transition: background-color 200ms; }
[dir="rtl"] .skills__group { padding: 18px 36px 18px 12px; }
.skills__group::before { content: ""; position: absolute; inset-inline-start: 10px; inset-block-start: 26px; width: 12px; height: 12px; background: var(--yellow); outline: 2px solid var(--ink); transition: transform 300ms var(--ease-out), background-color 200ms; }
.skills__group:nth-child(3n+2)::before { background: var(--ink); }
.skills__group:nth-child(3n)::before { background: var(--blue); }
.skills__group:hover { background: var(--tint); }
.skills__group:hover::before { transform: rotate(45deg) scale(1.15); }
.skills__group h3 { font-size: var(--step-0); font-weight: 800; margin-block-end: 4px; }
.skills__tools { max-width: 46ch; color: var(--muted); direction: ltr; text-align: start; }
[dir="rtl"] .skills__tools { text-align: right; }
@media (min-width: 768px) { .skills { grid-template-columns: 1fr 1fr; } }

/* ---------- Beyond the code: the lab photo sits behind the outdoor photo ---------- */
.beyond { display: grid; gap: 40px; }
.beyond__photos { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 1.2; margin-inline: 0; }
.beyond__photos img { position: absolute; border: 6px solid var(--ground); box-shadow: var(--shadow); transition: transform 500ms var(--ease-out); }
.beyond__lab { inset-block-start: 0; inset-inline-start: 0; width: 62%; z-index: 1; }
.beyond__outdoor { inset-block-end: 0; inset-inline-end: 0; width: 60%; z-index: 2; }
.beyond__photos:hover .beyond__lab { transform: translate(-6px, -6px) rotate(-2deg); }
.beyond__photos:hover .beyond__outdoor { transform: translate(6px, 6px) rotate(1.5deg); }
@media (min-width: 1024px) { .beyond { grid-template-columns: 5fr 6fr; column-gap: 64px; align-items: start; } }

/* ---------- Contact: the order form ---------- */
.order { padding: clamp(28px, 5vw, 64px); background: var(--yellow); color: #101114; }
.contact__title { max-width: 16ch; font-size: var(--step-display); font-weight: 800; font-variation-settings: "opsz" 96; line-height: 1.02; letter-spacing: var(--track); text-wrap: balance; }
.contact__lead { margin-block: 18px 26px; font-size: var(--step-1); }
.intake { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 28px; }
.intake__legend { width: 100%; margin-block-end: 6px; font-weight: 800; }
.order .btn--hire:hover, .order .btn--hire:focus-visible { background: #101114; color: #fff; }
.contact__addr { margin-block-start: 22px; font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; }
.contact__links { display: flex; flex-wrap: wrap; gap: 24px; margin-block-start: 18px; font-weight: 600; }
.order a { text-decoration-color: #101114; }

/* ---------- About: three columns fill the width ---------- */
.trio { display: grid; gap: 28px 40px; }
.trio p { max-width: 48ch; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Other services, privacy note, order actions ---------- */
.more { display: grid; gap: 18px 32px; align-items: center; margin-block-start: 16px; padding: 26px; border: 3px solid var(--rule-strong); }
.more__name { font-size: var(--step-2); font-weight: 800; letter-spacing: var(--track); line-height: 1.15; margin-block-end: 6px; }
.more p { max-width: 70ch; color: var(--muted); }
@media (min-width: 800px) { .more { grid-template-columns: 1fr auto; } }
.govern__text { max-width: 52ch; color: var(--muted); }
.govern__note { margin-block-start: 22px; max-width: 70ch; color: var(--muted); font-size: var(--step--1); }
.order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- Skills: a tinted panel, one readable chip per skill ---------- */
.skillband { padding: clamp(20px, 3.5vw, 48px); background: var(--tint); border-block-start: 4px solid var(--rule-strong); }
.skills--band { border-block-start: 0; gap: 4px 56px; }
.skills--band .skills__group { padding: 22px 0 24px; border-block-end: 0; border-block-start: 1px solid var(--rule); }
.skills--band .skills__group::before { display: none; }
.skills--band .skills__group:hover { background: transparent; }
.skills--band h3 { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; font-size: var(--step-1); font-weight: 800; letter-spacing: var(--track); line-height: 1.3; }
.skills--band h3::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--yellow); outline: 2px solid var(--ink); }
.skills--band .skills__group:nth-child(even) h3::before { background: var(--blue); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 7px 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  direction: ltr;
  transition: background-color 160ms, transform 200ms var(--ease-out);
}
.tags li:hover { background: var(--yellow); color: #101114; transform: translateY(-2px); }
@media (min-width: 900px) { .skills--band { grid-template-columns: repeat(2, 1fr); } }

/* Arabic needs room above and below the line for its marks, so display type is spaced more openly. */
[lang="ar"] .hero__title, [lang="ar"] .contact__title { line-height: 1.22; }
[lang="ar"] .hero__line { padding-block: 0.1em 0.12em; margin-block: 0; }
[lang="ar"] .section-title, [lang="ar"] .item__name, [lang="ar"] .more__name, [lang="ar"] .step h3, [lang="ar"] .hire__title { line-height: 1.4; }
[lang="ar"] .project__title, [lang="ar"] .timeline__role, [lang="ar"] .skills--band h3 { line-height: 1.45; }

.timeline__more { margin-block-start: 20px; min-height: 44px; padding: 10px 20px; border: 2px solid var(--rule-strong); border-radius: 999px; font-weight: 700; }
.timeline__more:hover { background: var(--ink); color: var(--ground); }
.timeline__more[hidden], .timeline__item[hidden] { display: none; }

/* ---------- Phone: less vertical scrolling ---------- */
@media (max-width: 767px) {
  :root { --section-gap: 52px; }
  .section-title { margin-block-end: 18px; }
  .section-lead { font-size: var(--step-0); margin-block: -6px 18px; }
  .catalogue, #governance .skills, .steps, .skills--band { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block-end: 12px; scrollbar-width: none; }
  .catalogue::-webkit-scrollbar, #governance .skills::-webkit-scrollbar, .steps::-webkit-scrollbar, .skills--band::-webkit-scrollbar { display: none; }
  .catalogue .item { flex: 0 0 82%; scroll-snap-align: center; min-height: 0; }
  .art { display: none; }
  .item__name { font-size: var(--step-1); }
  #governance .skills { border-block-start: 0; }
  #governance .skills__group { flex: 0 0 80%; scroll-snap-align: center; padding: 18px; border: 2px solid var(--rule-strong); }
  #governance .skills__group::before { display: none; }
  .more { padding: 18px; }
  .steps { gap: 18px; }
  .step { flex: 0 0 74%; scroll-snap-align: center; grid-template-columns: 1fr; gap: 6px; padding: 16px; border: 2px solid var(--rule-strong); }
  .step__n { width: 40px; height: 40px; font-size: var(--step-1); }
  .trio { gap: 16px; }
  .timeline__item { padding-block-end: 28px; }
  .project__head { padding-block: 16px; }
  .skillband { padding: 16px 0 16px var(--gutter); }
  .skills--band { margin-inline: 0; padding-inline: 0 var(--gutter); gap: 10px; }
  .skills--band .skills__group { flex: 0 0 78%; scroll-snap-align: start; padding: 16px; border: 2px solid var(--rule-strong); background: var(--ground); }
  .beyond { gap: 24px; }
  .beyond__photos { width: min(100%, 300px); }
  .order { padding: 22px; }
}

/* Drawings on the light-blue panels need ink outlines to stay visible. */
.item--sky .art circle { stroke: #101114; stroke-width: 3; }
.item--sky .art path[stroke="#fff"] { stroke: #101114; }
.catalogue:focus-visible, .steps:focus-visible, .skills:focus-visible { outline-offset: -3px; }

/* Swipe rows scroll sideways only; they must never scroll up and down on their own. */
@media (max-width: 767px) {
  .catalogue, #governance .skills, .steps, .skills--band { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
}