/* ==========================================================================
   HOMEPAGE — loaded only on the front page.

   Nothing here is a global selector: every rule is under .aa-hh, .aa-hnews or
   a .home-scoped hook, so this file cannot reach another page even if it is
   cached by a browser that then visits one.

   The composition is asymmetric on purpose. The text column is wide, the
   portrait column is narrow and offset, and the name/title hierarchy is the
   loudest thing on the page — the title is the <h1> and it never moves.
   ========================================================================== */

/* -------------------------------------------------------------- the hero -- */
.aa-hh { max-width: var(--aa-max); margin-inline: auto; }

.aa-hh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}

.aa-hh__name {
  font-family: var(--aa-ff-head);
  font-size: clamp(1.5rem, 1.4rem + .3vw, 1.8rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aa-accent);
  margin: 0 0 .5em;
}
[dir="rtl"] .aa-hh__name { letter-spacing: 0; }

/* The professional title. Permanent text, the page's only h1, and the largest
   thing in the composition — it is what a recruiter must read first. */
.aa-hh__title {
  font-size: clamp(3.2rem, 2.1rem + 3vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 .28em;
  color: var(--color-heading);
  text-wrap: balance;
}
[dir="rtl"] .aa-hh__title { letter-spacing: 0; line-height: 1.2; }

/* The rotating line sits under the title and never carries the title itself.
   Its box is reserved so a longer phrase cannot move the page. */
.aa-hh__type {
  min-height: 2.5em;
  margin: 0 0 .85em;
  font-size: clamp(1.7rem, 1.55rem + .45vw, 2.1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--aa-accent);
}
@media (min-width: 901px) { .aa-hh__type { min-height: 1.7em; } }
.aa-hh__type .aa-type__caret {
  display: inline-block;
  inline-size: 2px; block-size: 1.05em;
  margin-inline-start: 3px;
  vertical-align: -.15em;
  background: currentColor;
  animation: aa-hh-caret 1.05s steps(1) infinite;
}
@keyframes aa-hh-caret { 0%,45% { opacity: 1 } 46%,100% { opacity: 0 } }

.aa-hh__intro {
  font-size: clamp(1.6rem, 1.55rem + .2vw, 1.75rem);
  line-height: 1.66;
  color: var(--color-body);
  max-width: 54ch;
  margin: 0 0 1.2em;
}

.aa-hh__meta {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; margin: 0 0 1.5em; padding: 0;
}
.aa-hh__meta li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.35rem; line-height: 1;
  padding: 9px 14px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-pill);
  background: var(--aa-surface);
  color: var(--color-body);
}
.aa-hh__meta svg { flex: none; opacity: .75; }
.aa-hh__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: #3fae7a; flex: none;
  animation: aa-hh-pulse 2.6s ease-out infinite;
}
@keyframes aa-hh-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, #3fae7a 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* One primary action; the rest are visibly secondary. */
.aa-hh__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0;
}
.aa-hh__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--aa-tap); padding: 0 20px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-pill);
  background: var(--aa-surface);
  color: var(--color-heading) !important;
  font-family: var(--aa-ff-head);
  font-size: 1.45rem; font-weight: 600;
  text-decoration: none;
  transition: border-color .22s var(--aa-ease), background .22s var(--aa-ease), transform .22s var(--aa-ease);
}
.aa-hh__btn:hover { border-color: var(--aa-accent); transform: translateY(-2px); }
.aa-hh__btn:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }
.aa-hh__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
  padding-inline: 26px;
}
.aa-hh__btn--primary:hover { filter: brightness(1.08); border-color: var(--color-primary); }
.aa-hh__btn--quiet { background: transparent; }
.aa-hh__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--aa-tap); block-size: var(--aa-tap);
  border: 1px solid var(--aa-line);
  border-radius: 50%;
  color: var(--color-body);
  transition: border-color .22s var(--aa-ease), color .22s var(--aa-ease);
}
.aa-hh__icon:hover { border-color: var(--aa-accent); color: var(--aa-accent); }
.aa-hh__icon:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- portrait -- */
.aa-hh__media { margin: 0; justify-self: end; perspective: 900px; }
[dir="rtl"] .aa-hh__media { justify-self: start; }
.aa-hh__frame {
  display: block; position: relative;
  inline-size: 310px; max-inline-size: 100%;
  aspect-ratio: 310 / 372;
  border-radius: 18px 18px 18px 56px;
  overflow: hidden;
  background: var(--aa-surface-2);
  box-shadow: 0 28px 56px -32px rgba(0,0,0,.72);
  transform: rotateX(var(--aa-tx, 0deg)) rotateY(var(--aa-ty, 0deg));
  transition: transform .45s var(--aa-ease);
  will-change: transform;
}
[dir="rtl"] .aa-hh__frame { border-radius: 18px 18px 56px 18px; }
.aa-hh__frame img {
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 14%;
}
.aa-hh__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}

/* ----------------------------------------------------- latest articles --- */
.aa-hnews { max-width: var(--aa-max); margin-inline: auto; }
.aa-hnews__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.aa-hnews__kicker {
  flex: 1 0 100%;
  font-size: 1.3rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aa-accent); margin: 0;
}
[dir="rtl"] .aa-hnews__kicker { letter-spacing: 0; }
.aa-hnews__h2 {
  font-size: var(--aa-h2) !important;
  line-height: 1.22; letter-spacing: -.015em; margin: 0;
}
[dir="rtl"] .aa-hnews__h2 { letter-spacing: 0; }
.aa-hnews__all {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--aa-tap);
  font-size: 1.45rem; font-weight: 600;
  color: var(--aa-accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.aa-hnews__all:hover, .aa-hnews__all:focus-visible { border-bottom-color: currentColor; }
[dir="rtl"] .aa-hnews__all svg, [dir="rtl"] .aa-hnews__go svg { transform: scaleX(-1); }

.aa-hnews__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  gap: var(--aa-gap); list-style: none; margin: 0; padding: 0;
}
.aa-hnews__card { display: flex; min-width: 0; }
.aa-hnews__link {
  display: flex; flex-direction: column; gap: 9px;
  inline-size: 100%;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r);
  background: var(--aa-surface);
  color: inherit; text-decoration: none;
  transition: border-color .25s var(--aa-ease), transform .25s var(--aa-ease);
}
.aa-hnews__link:hover { border-color: var(--aa-accent); transform: translateY(-3px); }
.aa-hnews__link:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }
.aa-hnews__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.25rem; color: var(--aa-accent);
  font-variant-numeric: tabular-nums;
}
.aa-hnews__t {
  font-family: var(--aa-ff-head);
  font-size: var(--aa-h3); line-height: 1.32; font-weight: 600;
  color: var(--color-heading);
  text-wrap: balance;
}
.aa-hnews__d { font-size: 1.45rem; line-height: 1.6; color: var(--color-body); flex: 1; }
.aa-hnews__go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 1.4rem; font-weight: 600; color: var(--aa-accent);
}
.aa-hnews__link:hover .aa-hnews__go svg { transform: translateX(3px); }
[dir="rtl"] .aa-hnews__link:hover .aa-hnews__go svg { transform: scaleX(-1) translateX(3px); }
.aa-hnews__go svg { transition: transform .22s var(--aa-ease); }
.aa-hnews__body { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }

/* one article: the cover beside the text rather than a card stretched wide */
.aa-hnews__grid--one { grid-template-columns: minmax(0, 1fr); }
.aa-hnews__grid--one .aa-hnews__link { padding: 0; overflow: hidden; }
.aa-hnews__grid--one .aa-hnews__body { padding: clamp(20px, 2.6vw, 34px); justify-content: center; }
.aa-hnews__grid--one .aa-hnews__d { flex: 0 1 auto; }
.aa-hnews__cover { display: block; background: var(--aa-surface-2); }
.aa-hnews__cover img { display: block; width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
@media (min-width: 820px) {
  .aa-hnews__grid--one .aa-hnews__link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
}

/* ---------------------------------------------------------- entrance ----- */
/* Only under html.aa-anim, which exists once the script has run — with
   JavaScript blocked the hero renders fully visible. */
html.aa-anim .aa-hh__name,
html.aa-anim .aa-hh__title,
html.aa-anim .aa-hh__type,
html.aa-anim .aa-hh__intro,
html.aa-anim .aa-hh__meta,
html.aa-anim .aa-hh__actions { opacity: 0; transform: translate3d(0, 14px, 0); }
html.aa-anim .aa-hh__frame { opacity: 0; clip-path: inset(0 0 100% 0); }
html.aa-anim .aa-hh.is-in .aa-hh__name,
html.aa-anim .aa-hh.is-in .aa-hh__title,
html.aa-anim .aa-hh.is-in .aa-hh__type,
html.aa-anim .aa-hh.is-in .aa-hh__intro,
html.aa-anim .aa-hh.is-in .aa-hh__meta,
html.aa-anim .aa-hh.is-in .aa-hh__actions {
  opacity: 1; transform: none;
  transition: opacity .55s var(--aa-in-ease), transform .55s var(--aa-in-ease);
}
html.aa-anim .aa-hh.is-in .aa-hh__name    { transition-delay: .04s; }
html.aa-anim .aa-hh.is-in .aa-hh__title   { transition-delay: .10s; }
html.aa-anim .aa-hh.is-in .aa-hh__type    { transition-delay: .20s; }
html.aa-anim .aa-hh.is-in .aa-hh__intro   { transition-delay: .28s; }
html.aa-anim .aa-hh.is-in .aa-hh__meta    { transition-delay: .36s; }
html.aa-anim .aa-hh.is-in .aa-hh__actions { transition-delay: .44s; }
html.aa-anim .aa-hh.is-in .aa-hh__frame {
  opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.22,.68,.36,1) .1s, opacity .45s linear .1s,
              transform .45s var(--aa-ease);
}

/* ---------------------------------------------------------------- small -- */
@media (max-width: 900px) {
  .aa-hh__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4vw, 26px); }
  .aa-hh__media { order: -1; justify-self: start; perspective: none; }
  [dir="rtl"] .aa-hh__media { justify-self: start; }
  .aa-hh__frame {
    inline-size: min(52vw, 220px);
    border-radius: 14px 14px 14px 40px;
  }
  [dir="rtl"] .aa-hh__frame { border-radius: 14px 14px 40px 14px; }
  .aa-hh__intro { max-width: none; }
  .aa-hnews__all { margin-inline-start: 0; }
}
@media (max-width: 520px) {
  .aa-hh__frame { inline-size: min(48vw, 180px); }
  .aa-hh__actions { gap: 10px; }
  .aa-hh__btn { flex: 1 1 auto; }
  .aa-hh__btn--primary { flex-basis: 100%; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html.aa-anim .aa-hh__name, html.aa-anim .aa-hh__title, html.aa-anim .aa-hh__type,
  html.aa-anim .aa-hh__intro, html.aa-anim .aa-hh__meta, html.aa-anim .aa-hh__actions,
  html.aa-anim .aa-hh.is-in .aa-hh__name, html.aa-anim .aa-hh.is-in .aa-hh__title,
  html.aa-anim .aa-hh.is-in .aa-hh__type, html.aa-anim .aa-hh.is-in .aa-hh__intro,
  html.aa-anim .aa-hh.is-in .aa-hh__meta, html.aa-anim .aa-hh.is-in .aa-hh__actions {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.aa-anim .aa-hh__frame, html.aa-anim .aa-hh.is-in .aa-hh__frame {
    opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important;
  }
  .aa-hh__dot, .aa-hh__type .aa-type__caret { animation: none; }
  .aa-hh__type .aa-type__caret { opacity: 1; }
  .aa-hh__btn, .aa-hh__btn:hover, .aa-hnews__link, .aa-hnews__link:hover { transform: none; transition: none; }
  .aa-hnews__go svg { transition: none; }
}

/* ---------------------------------------------- services: varied weight ---
   Six identical boxes read as a list of equal things, which these are not.
   A twelve-column grid lets the first two carry more width than the four
   below them, so the eye gets a rhythm instead of a wall. The markup is
   untouched — this file only loads on the front page. */
@media (min-width: 860px) {
  .aa-svc {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--aa-gap);
  }
  .aa-svc > .aa-svc__item:nth-child(1),
  .aa-svc > .aa-svc__item:nth-child(2) { grid-column: span 6; }
  .aa-svc > .aa-svc__item:nth-child(n+3) { grid-column: span 4; }
  /* the two wide cards get a little more air and a lifted surface */
  .aa-svc > .aa-svc__item:nth-child(-n+2) {
    padding: clamp(24px, 2.6vw, 34px);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--aa-accent) 6%, var(--aa-surface)), var(--aa-surface));
  }
}

/* ------------------------------------------- how I work: pick a step ------
   Every step name stays visible at all times; selecting one brings its
   description forward and fills the rail up to it. Enhancement only: with no
   JavaScript each step renders exactly as it does today. */
.aa-rail__s { transition: opacity .25s var(--aa-ease); }
html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s .aa-rail__d {
  opacity: .55;
  transition: opacity .25s var(--aa-ease);
}
html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s.is-active .aa-rail__d { opacity: 1; }
html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s.is-active .aa-rail__k { color: var(--aa-accent); }
html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s.is-active .aa-rail__dot {
  border-color: var(--aa-accent);
  background: var(--aa-accent);
  color: #fff;
  transform: scale(1.12);
}
html.aa-anim .aa-rail[data-aa-steps] .aa-rail__dot {
  transition: transform .25s var(--aa-ease), background .25s var(--aa-ease),
              border-color .25s var(--aa-ease), color .25s var(--aa-ease);
}
.aa-rail[data-aa-steps] .aa-rail__s { cursor: pointer; }
.aa-rail[data-aa-steps] .aa-rail__s:focus-visible {
  outline: 3px solid var(--aa-accent);
  outline-offset: 6px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .aa-rail__s, html.aa-anim .aa-rail[data-aa-steps] .aa-rail__dot,
  html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s .aa-rail__d { transition: none; }
  html.aa-anim .aa-rail[data-aa-steps] .aa-rail__s.is-active .aa-rail__dot { transform: none; }
}

/* ------------------------------------------ project card actions: 44px ----
   The carousel's two actions sat at 40px (42px in Arabic), under the 44px
   touch target the rest of the site meets. The showcase renders on the front
   page only, so raising it here reaches every instance of it. */
.aa-sc__actions .aa-sc__cta,
.aa-sc__actions .aa-sc__cta--demo,
/* the base layer styles the case-study link as
   `.aa-sc__actions .aa-sc__cta:not(.aa-sc__cta--demo)`, which out-specifies a
   two-class selector — so this matches that shape rather than fighting it */
.aa-sc__actions .aa-sc__cta:not(.aa-sc__cta--demo) { min-height: 44px; }