/* ============================================================================
   JAVAID — Portrait hero (Dennis-clone), front page only.
   Full-bleed portrait on a soft studio backdrop, oversized auto-scrolling name,
   role line, rounded location pill, scroll cue. Then the thesis intro band.
   ============================================================================ */

/* ── Hero stage ─────────────────────────────────────────────────────────── */
.dhero {
    position: relative;
    /* Fill the viewport minus the sticky masthead, so the oversized name at the
       bottom is always fully in view. */
    min-height: calc(100svh - 76px);
    background: #999D9E;   /* Dennis studio grey */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}
/* The stage carries the grey so the luminosity-blended portrait inside it has a
   grey backdrop to blend against (it forms its own stacking context). */
.dhero__stage { position: absolute; inset: 0; z-index: 1;  }

/* Portrait — dead centre of the hero. The photo carries a coloured studio
   backdrop, so feather its edges into the grey page and desaturate slightly to
   blend seamlessly the way Dennis's grey-on-grey portrait does. */
.dhero__portrait {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 96%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
    /* Luminosity blend takes the grey backdrop's hue, rendering the portrait as a
       clean grey-on-grey figure like Dennis's — the coloured studio gradient
       melts into #999D9E. The feather mask softens the rectangular photo edges. */
    mix-blend-mode: luminosity;
    filter: contrast(1.06);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(74% 80% at 50% 44%, #000 52%, transparent 86%);
            mask-image: radial-gradient(74% 80% at 50% 44%, #000 52%, transparent 86%);
}

/* Role line — upper right, calm and confident. */
.dhero__role {
    position: absolute;
    right: clamp(24px, 5vw, 96px);
    top: 45%;
    width: max-content;
    max-width: 40vw;
    text-align: left;
    font-family: var(--heading);
    font-weight: 450;
    font-size: clamp(19px, 1.9vw, 31px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0;
}
.dhero__role span { display: block; }

/* Scroll cue — a quiet travelling arrow, upper centre-right. */
.dhero__cue {
    position: absolute;
    right: clamp(80px, 28vw, 540px);
    top: clamp(180px, 30vh, 340px);
    font-size: clamp(20px, 2vw, 30px);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .dhero__cue { animation: dheroCue 2.4s ease-in-out infinite; }
}
@keyframes dheroCue {
    0%, 100% { transform: translate(0, 0); opacity: 0.85; }
    50%      { transform: translate(4px, 6px); opacity: 0.4; }
}

/* Location pill — rounded dark chip, globe + text. */
.dhero__loc {
    position: absolute;
    left: 0;                       /* flush to the viewport edge, Dennis-style */
    top: 44%;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #1C1D20;
    color: #F1F1F1;
    border-radius: 0 999px 999px 0;    /* square left, rounded right */
    padding: 14px 14px 14px clamp(26px, 3.5vw, 48px);
}
.dhero__loc-globe {
    width: 54px; height: 54px;
    flex: none;
    border-radius: 50%;
    background: rgba(241, 241, 241, 0.10);
    display: grid; place-items: center;
    color: #F1F1F1;
}
.dhero__loc-globe svg { width: 24px; height: 24px; }
/* Realistic globe: the outline, equator and latitudes hold still while the
   meridian ellipse sweeps side to side (scaleX 1 → -1), reading as rotation. */
.dhero__globe-m { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .dhero__globe-m { animation: dheroGlobe 5.5s linear infinite; }
}
@keyframes dheroGlobe { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
.dhero__loc-text {
    font-family: var(--heading);
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Oversized auto-scrolling name ─────────────────────────────────────── */
.dhero__marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    padding-bottom: clamp(6px, 1.4vw, 22px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dhero__track {
    display: flex;
    align-items: baseline;
    gap: 0.28em;
    width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
    .dhero__track { animation: dheroMarquee 26s linear infinite; will-change: transform; }
}
@keyframes dheroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dhero__word,
.dhero__sep {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(64px, 15.5vw, 280px);
    line-height: 0.86;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    white-space: nowrap;
}
.dhero__sep { font-weight: 300; }

/* ── Thesis intro band (holds the moved hero copy) ─────────────────────── */
.dhero-intro {
    padding-block: clamp(64px, 9vw, 150px);
    border-bottom: 1px solid var(--rule);
}
.dhero-intro__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 clamp(28px, 4vw, 52px);
}
.dhero-intro__eyebrow .tick { width: 28px; height: 1px; background: var(--accent); flex: none; }

.dhero-intro__thesis {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(44px, 8vw, 130px);
    line-height: 0.97;
    letter-spacing: -0.035em;
    color: var(--ink);
    max-width: 15ch;
    margin: 0 0 clamp(40px, 6vw, 84px);
    text-wrap: balance;
}
.dhero-intro__thesis em { font-style: italic; font-weight: 450; }

.dhero-intro__foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}
@media (min-width: 900px) {
    .dhero-intro__foot { grid-template-columns: 1.1fr 1fr; }
}
.dhero-intro__lede {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink-mute);
    max-width: 54ch;
    margin: 0;
}
.dhero-intro__side { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
.dhero-intro__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.dhero-intro__stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
}
.dhero-intro__stat-num {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
}
.dhero-intro__stat-lbl {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    max-width: 20ch;
}
.dhero-intro__status {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0;
}
.dhero-intro__status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .dhero-intro__status .dot { animation: dheroBreathe 2.6s ease-in-out infinite; }
}
@keyframes dheroBreathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(69, 92, 233, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(69, 92, 233, 0.18); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Portrait-dominant hero, name large at the bottom — Dennis's mobile home. */
    .dhero { min-height: calc(100svh - 60px); }
    /* Portrait fills most of the stage and sits a touch high so the name clears it. */
    .dhero__portrait { height: 78%; top: 43%; }
    .dhero__cue { display: none; }

    /* Location pill — bottom-left, flush to the edge, sitting just above the
       oversized name. */
    .dhero__loc {
        top: auto; bottom: clamp(96px, 28vw, 150px); left: 0;
        gap: 12px; padding: 9px 15px 9px 11px;
    }
    .dhero__loc-globe { width: 30px; height: 30px; }
    .dhero__loc-globe svg { width: 18px; height: 18px; }
    .dhero__loc-text { font-size: 12px; }

    /* Role — top-right, compact and right-aligned, framing the portrait. */
    .dhero__role {
        top: clamp(74px, 11vh, 108px); right: 16px; left: auto;
        max-width: 48vw; text-align: right;
        font-size: clamp(14px, 4.4vw, 20px);
    }

    /* Name — the dominant element at the bottom, lifted clear of the edge. */
    .dhero__word, .dhero__sep { font-size: clamp(54px, 20vw, 100px); }
    .dhero__marquee { padding-bottom: clamp(24px, 6.5vw, 44px); }
}

/* Very small phones — keep the name bold but avoid the role crowding the face. */
@media (max-width: 420px) {
    .dhero__role { max-width: 44vw; font-size: clamp(13px, 4vw, 17px); }
    .dhero__word, .dhero__sep { font-size: clamp(48px, 21vw, 84px); }
}