/* The existing introduction, fitted to one viewport in both languages. */
html body #intro .intro-layout {
  width:100%; max-width:var(--page-max); height:100%; min-height:0;
  margin-inline:auto; box-sizing:border-box;
}
html body #intro .hero-copy,
html[lang=ar] body #intro .hero-copy {
  width:100%; min-width:0; max-width:none; min-height:0;
  padding:0; margin:0; container-type:inline-size;
}
html body #intro .hero-copy > * { min-width:0; max-width:100%; }
html body #intro .composition-area {
  min-width:0; min-height:0; justify-content:center;
}
html body #intro .visual-composition {
  width:min(100cqw,calc(100cqh / 1.02)); height:auto;
  min-height:0; max-width:100%; max-height:100%;
  aspect-ratio:1 / 1.02; margin:0;
}
html body #intro .visual-composition .collage,
html body #intro .visual-composition .portrait-cutout { top:1.873%; }

@media (min-width:801px) {
  html body #intro .intro-layout {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-rows:minmax(0,1fr); align-items:center;
    gap:clamp(24px,3.2vw,88px);
    padding:clamp(14px,2.4dvh,44px) var(--page-gutter);
  }
  html body #intro .composition-area { height:100%; order:0; }
  html body #intro .hero-copy,
  html[lang=ar] body #intro .hero-copy {
    display:flex; flex-direction:column; align-self:center;
    /* A continuous, modest upward offset replaces the 1101px position jump. */
    translate:0 calc(-1 * clamp(16px,6dvh,96px));
    --intro-gap:clamp(12px,2dvh,30px);
  }
  html body #intro .hero-copy > .eyebrow {
    font-size:clamp(10px,.72vw,14px); line-height:1.5;
    margin:0 0 calc(var(--intro-gap) * .65);
  }
  html body #intro .hero-copy h1#intro-title,
  html[lang=ar] body #intro .hero-copy h1#intro-title {
    font-size:clamp(34px,min(4.25vw,7.5dvh,12cqw),96px);
    line-height:1.06; margin:0 0 calc(var(--intro-gap) * .5);
    white-space:nowrap;
  }
  html[lang=ar] body #intro .hero-copy h1#intro-title {
    font-size:clamp(36px,min(4.6vw,8dvh,14cqw),108px);
    line-height:1.3;
  }
  html body #intro .hero-copy .identity-roles,
  html[lang=ar] body #intro .hero-copy .identity-roles {
    display:flex; justify-content:flex-start; flex-wrap:wrap;
    gap:4px clamp(12px,1.1vw,26px); white-space:normal;
    font-size:clamp(12px,min(1vw,1.65dvh),20px);
    line-height:1.5; margin:0 0 var(--intro-gap);
  }
  html body #intro .identity-roles > .role-product:after,
  html body #intro .identity-roles > .role-prompt:after { content:none; }
  html body #intro .hero-copy .hero-line,
  html[lang=ar] body #intro .hero-copy .hero-line {
    font-size:clamp(20px,min(1.85vw,3.3dvh),40px);
    line-height:1.3; white-space:normal; text-wrap:balance;
    width:100%; max-width:30ch; margin:0 0 calc(var(--intro-gap) * .6);
  }
  html[lang=ar] body #intro .hero-copy .hero-line { line-height:1.5; }
  html body #intro .hero-copy .hero-caption,
  html[lang=ar] body #intro .hero-copy .hero-caption {
    width:100%; max-width:68ch; margin:0;
    font-size:clamp(13px,min(1.05vw,1.85dvh),20px);
    line-height:1.7; text-wrap:pretty;
  }
  html[lang=ar] body #intro .hero-copy .hero-caption { line-height:1.8; }
  html body #intro .hero-links {
    display:flex; flex-wrap:wrap; gap:8px clamp(16px,1.6vw,32px);
    margin-top:var(--intro-gap);
  }
  html body #intro .profile-link { font-size:clamp(12px,.9vw,17px); min-height:28px; }
  html body #intro .profile-link svg { width:1.15em; height:1.15em; }
  html body #intro .enter-work,
  html[lang=ar] body #intro .enter-work {
    margin:calc(var(--intro-gap) * 1.25) 0 0; padding:0;
    gap:clamp(12px,1.25vw,26px); align-self:flex-start;
  }
  html body #intro .enter-work .circle-arrow {
    width:clamp(44px,5.5dvh,82px); height:clamp(44px,5.5dvh,82px);
    font-size:clamp(28px,2.4dvh,40px);
  }
  html body #intro .enter-work strong { font-size:clamp(14px,1.05vw,21px); }
  html body #intro .enter-work small { font-size:clamp(12px,.85vw,17px); max-width:36ch; }
}

@media (max-width:800px) {
  html body #intro .intro-layout {
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:clamp(10px,1.8dvh,20px);
    padding:clamp(8px,1.4dvh,16px) var(--page-gutter) clamp(12px,2dvh,22px);
  }
  html body #intro .composition-area {
    order:-1; flex:1 1 0; min-height:0; height:auto; width:100%;
  }
  html body #intro .hero-copy,
  html[lang=ar] body #intro .hero-copy {
    display:flex; flex:0 0 auto; align-self:stretch; max-height:none;
    position:static; translate:none;
    --intro-gap:clamp(8px,1.3dvh,14px);
  }
  html body #intro .hero-copy > .eyebrow {
    font-size:clamp(10px,1.3vw,12px); line-height:1.4;
    margin:0 0 calc(var(--intro-gap) * .6);
  }
  html body #intro .hero-copy h1#intro-title,
  html[lang=ar] body #intro .hero-copy h1#intro-title {
    display:block; font-size:clamp(32px,12.5cqw,64px);
    line-height:1.07; white-space:nowrap;
    margin:0 0 calc(var(--intro-gap) * .7);
  }
  html[lang=ar] body #intro .hero-copy h1#intro-title { font-size:clamp(32px,14cqw,64px); line-height:1.25; }
  html body #intro .hero-copy .identity-roles,
  html[lang=ar] body #intro .hero-copy .identity-roles {
    display:flex; flex-wrap:wrap; justify-content:space-between;
    gap:2px 10px; width:100%; white-space:normal;
    font-size:clamp(11.5px,3.15cqw,16px); line-height:1.5;
    margin:0 0 var(--intro-gap);
  }
  html body #intro .hero-copy .hero-line,
  html[lang=ar] body #intro .hero-copy .hero-line {
    width:100%; max-width:none; white-space:normal;
    font-size:clamp(16px,4.55cqw,26px); line-height:1.3;
    margin:0 0 calc(var(--intro-gap) * .7); text-wrap:balance;
  }
  html[lang=ar] body #intro .hero-copy .hero-line { line-height:1.5; }
  html body #intro .hero-copy .hero-caption,
  html[lang=ar] body #intro .hero-copy .hero-caption {
    width:100%; max-width:72ch; margin:0;
    font-size:clamp(12.5px,1.6dvh,16px); line-height:1.5;
    text-wrap:pretty;
  }
  html[lang=ar] body #intro .hero-copy .hero-caption { line-height:1.65; }
  html body #intro .hero-links {
    display:flex; flex-wrap:wrap; gap:4px clamp(10px,3vw,20px);
    margin-top:var(--intro-gap);
  }
  html body #intro .profile-link { font-size:clamp(11.5px,1.5dvh,14px); min-height:28px; gap:5px; }
  html body #intro .profile-link svg { width:14px; height:14px; }
  html body #intro .enter-work,
  html[lang=ar] body #intro .enter-work {
    display:flex; position:static; inset:auto; translate:none; transform:none;
    align-self:flex-start; gap:12px; margin:var(--intro-gap) 0 0; padding:0;
  }
  html body #intro .enter-work .circle-arrow { width:38px; height:38px; font-size:26px; }
  html body #intro .enter-work strong { font-size:clamp(13px,1.6dvh,16px); }
}

/* Compact phones reserve a visible collage without cutting off the biography or action. */
@media (max-width:800px) and (max-height:650px) {
  html body #intro .intro-layout { gap:8px; padding-block:6px 10px; }
  html body #intro .hero-copy,
  html[lang=ar] body #intro .hero-copy { --intro-gap:6px; }
  html body #intro .hero-copy h1#intro-title,
  html[lang=ar] body #intro .hero-copy h1#intro-title { font-size:clamp(32px,11.75cqw,44px); }
  html body #intro .hero-copy .hero-caption,
  html[lang=ar] body #intro .hero-copy .hero-caption { font-size:12px; line-height:1.4; }
  html[lang=ar] body #intro .hero-copy .hero-caption { line-height:1.55; }
  html body #intro .hero-copy .hero-line,
  html[lang=ar] body #intro .hero-copy .hero-line { font-size:16px; }
  html body #intro .enter-work .circle-arrow { width:34px; height:34px; font-size:24px; }
}
@media (max-width:350px) and (max-height:650px) {
  html body #intro .hero-copy .hero-caption,
  html[lang=ar] body #intro .hero-copy .hero-caption { font-size:11.5px; }
  html body #intro .hero-copy .identity-roles,
  html[lang=ar] body #intro .hero-copy .identity-roles { column-gap:6px; letter-spacing:-.035em; }
}

/* A landscape phone has width for two columns but too little height to stack them. */
@media (max-height:500px) and (max-width:1000px) and (orientation:landscape) {
  html body #intro .intro-layout {
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr); align-items:center;
    gap:clamp(16px,2.5vw,24px); padding:8px var(--page-gutter);
  }
  html body #intro .composition-area {
    order:0; height:100%; min-height:0; align-self:stretch;
  }
  html body #intro .hero-copy,
  html[lang=ar] body #intro .hero-copy {
    align-self:center; translate:none; --intro-gap:7px;
  }
  html body #intro .hero-copy > .eyebrow {
    font-size:10px; line-height:1.3; margin-bottom:4px;
  }
  html body #intro .hero-copy h1#intro-title,
  html[lang=ar] body #intro .hero-copy h1#intro-title {
    font-size:clamp(30px,min(4.7vw,8.8dvh,10.8cqw),40px);
    line-height:1.08; margin-bottom:5px;
  }
  html[lang=ar] body #intro .hero-copy h1#intro-title { line-height:1.22; }
  html body #intro .hero-copy .identity-roles,
  html[lang=ar] body #intro .hero-copy .identity-roles {
    justify-content:flex-start; gap:2px 12px; font-size:11.5px;
    line-height:1.35; margin-bottom:7px;
  }
  html body #intro .hero-copy .hero-line,
  html[lang=ar] body #intro .hero-copy .hero-line {
    max-width:none; font-size:clamp(16px,2.4vw,19px);
    line-height:1.3; margin-bottom:6px;
  }
  html[lang=ar] body #intro .hero-copy .hero-line { line-height:1.4; }
  html body #intro .hero-copy .hero-caption,
  html[lang=ar] body #intro .hero-copy .hero-caption {
    font-size:12px; line-height:1.45; max-width:none;
  }
  html[lang=ar] body #intro .hero-copy .hero-caption { line-height:1.55; }
  html body #intro .hero-links { gap:3px 16px; margin-top:7px; }
  html body #intro .profile-link { font-size:11.5px; min-height:26px; }
  html body #intro .enter-work,
  html[lang=ar] body #intro .enter-work { gap:10px; margin-top:7px; }
  html body #intro .enter-work .circle-arrow { width:34px; height:34px; font-size:24px; }
  html body #intro .enter-work strong { font-size:13px; }
  html body #intro .enter-work small { font-size:11.5px; margin-top:3px; }
}