/* ==========================================================================
   index-mobile.css — mobile-only restyling of index.html
   --------------------------------------------------------------------------
   Ports the pieces that were prototyped in mobile.html, mobile-plus.html and
   mobile-max.html onto the real homepage, WITHOUT touching the desktop view.

   How the desktop stays untouched
   -------------------------------
   Everything below sits inside `@media (max-width: 991.98px)` — the width at
   which index.html's own `col-lg-*` grid stacks. The only rule outside that
   query hides the new contact dial, which must not exist on desktop at all.

   This file is linked LAST in <head>, after index.html's inline <style>
   blocks, so at equal specificity these rules win. Selectors deliberately
   mirror the existing class names rather than adding new ones, so no markup
   had to change except for the dial.

   What came from where
   --------------------
     buttons, marquee, signals, section badge, experience badge  → mobile.html
     about, what I do, blogs, contact dial                       → mobile-plus.html
     contact section                                             → mobile-max.html
   ========================================================================== */

/* The dial is a mobile-only element; it is switched on inside the query. */
.im-dial, .im-dial-veil { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   EXPERIENCE "DETAILS" TOGGLE — every width, by request
   --------------------------------------------------------------------------
   The one thing in this file that is deliberately NOT mobile-only: the bare
   grey chevron becomes a labelled green control on desktop too. Literal
   colours here rather than the --im-* tokens, which only exist inside the
   media query below.
   ══════════════════════════════════════════════════════════════════════════ */
.exp-toggle-icon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #28e98c;
    font-size: 0;                      /* hides the ▾ glyph in the markup */
    font-weight: 500;
    transform: none;
}
.exp-toggle-icon::before {
    content: 'Details';
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}
.exp-toggle-icon::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
/* index rotates the whole control 180° when the card opens, which flips the
   label upside down. Only the chevron should turn. */
.exp-item.active .exp-toggle-icon { transform: none; color: #28e98c; }
.exp-item.active .exp-toggle-icon::before { content: 'Hide details'; }
.exp-item.active .exp-toggle-icon::after { transform: translateY(1px) rotate(-135deg); }


@media (max-width: 991.98px) {

/* ── Local tokens ───────────────────────────────────────────────────────── */
:root {
    --im-main: #28e98c;
    --im-rgb: 40, 233, 140;
    --im-ink: #06251a;
    --im-surface: rgba(255, 255, 255, .04);
    --im-line: rgba(255, 255, 255, .09);
    --im-line-2: rgba(255, 255, 255, .17);
    --im-muted: rgba(255, 255, 255, .64);
    --im-dim: rgba(255, 255, 255, .44);
    --im-spring: cubic-bezier(.34, 1.4, .64, 1);
    --im-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — radius and type from mobile.html
   ══════════════════════════════════════════════════════════════════════════ */
.butn,
.butn.butn-md,
.butn.radius-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    transition: transform .18s var(--im-ease), background-color .18s var(--im-ease), border-color .18s var(--im-ease);
}
.butn:active { transform: scale(.975); }
.butn > span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

.butn.butn-bord { border: 1px solid var(--im-line-2); }
.butn.butn-bord:active { border-color: var(--im-main); color: var(--im-main); }

.hero-ctas,
.about-cta-row {
    display: grid;
    gap: 10px;
}
.hero-ctas .butn,
.about-cta-row .butn { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION BADGE — the pill from mobile.html
   ══════════════════════════════════════════════════════════════════════════ */
.sub-title-icon {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--im-line);
    border-radius: 30px;
    background: none;
}
.sub-title-icon .icon {
    margin-right: 0;
    color: var(--im-main);
    font-size: 15px;
    line-height: 1;
}
.sub-title-icon .sub-label {
    color: var(--im-muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS MARQUEE — mobile.html: fade the edges instead of cutting them
   ══════════════════════════════════════════════════════════════════════════ */
/* The gap under the CV button was .mt-60 + .pt-40 — 100px of helper spacing,
   both declared !important, so both have to be answered in kind. */
.stats-strip {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

/* The two hairlines from .bord-thin-top / .bord-thin-bottom are dropped; the
   marquee draws its own rules, and the pair together read as doubled lines. */
#home.bord-thin-bottom { border-bottom: 0; }
.stats-strip.bord-thin-top { border-top: 0; }

.stats-marquee {
    padding: 18px 0;
    border-top: 1px solid var(--im-line);
    border-bottom: 1px solid var(--im-line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.stats-track { animation-duration: 30s; }
.stats-track > * { margin-right: 22px; }

/* index stacks the figure above its label; mobile.html sets them side by
   side on one line. */
.stat-item { flex-direction: row; align-items: baseline; gap: 7px; }
.stat-num { font-family: 'Righteous', sans-serif; font-size: 19px; font-weight: 400; color: var(--im-main); }
.stat-label { font-size: 12.5px; color: var(--im-muted); text-transform: none; letter-spacing: 0; }
.stat-sep { font-size: 11px; color: rgba(var(--im-rgb), .35); }

/* ══════════════════════════════════════════════════════════════════════════
   TRUST SIGNALS — mobile.html cards, contents centred in the box
   ══════════════════════════════════════════════════════════════════════════ */
.dark-signals { margin-top: 22px; padding-bottom: 0; }
/* The Bootstrap row becomes a one-column grid rather than being flattened,
   so the existing col- markup keeps working. */
.dark-signals .row { display: grid; gap: 10px; margin: 0; }
.dark-signals [class*="col-"] { width: 100%; max-width: none; flex: none; margin: 0; padding: 0; }

.dark-signal-item {
    display: flex;
    align-items: center;
    justify-content: center;          /* the centring the brief asked for */
    gap: 11px;
    width: 100%;
    padding: 14px 16px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 14px;
    text-align: center;
}
.dark-signal-item .ds-icon { font-size: 15px; line-height: 1; }
.dark-signal-item .ds-text { color: var(--im-muted); font-size: 13px; line-height: 1.45; }
.dark-signal-item .ds-text strong { color: #fff; font-weight: 600; }

/* The "Trusted by teams at" strip is dropped on mobile — the same client
   names already appear in the work and experience sections. */
.trusted-by-strip { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — mobile-plus.html
   --------------------------------------------------------------------------
   The class is applied by js/index-mobile.js rather than sitting in the
   markup, so a failed script can never leave content invisible.
   ══════════════════════════════════════════════════════════════════════════ */
.im-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--im-ease) var(--im-d, 0s),
                transform .6s var(--im-ease) var(--im-d, 0s);
}
.im-up.im-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT — mobile-plus.html
   ══════════════════════════════════════════════════════════════════════════ */
.about-new-top { display: block; }
.about-photo-col { margin-bottom: 28px; }

/* The gradient ring is a padded background rather than an inset glow, so the
   animation reads as a border being drawn around the photo. */
.about-photo-wrap {
    position: relative;
    padding: 3px;
    border-radius: 23px;
    background: linear-gradient(135deg, #28e98c, #5b6af0, #28e98c, #ff8c42);
    background-size: 300% 300%;
    animation: im-grad 6s ease infinite;
}
.about-photo-glow { display: none; }
.about-photo-wrap .about-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;                    /* the gradient ring is the border now */
    border-radius: 20px;
    margin: 0;
}
@keyframes im-grad {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.about-avail-pill {
    position: absolute;
    left: 13px; top: 13px;
    right: auto; bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(12, 12, 12, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--im-rgb), .38);
    color: var(--im-main);
    font-size: 11.5px;
    font-weight: 500;
}

.about-photo-icons {
    position: absolute;
    right: 13px; bottom: 13px;
    left: auto; top: auto;
    display: flex;
    gap: 7px;
    transform: none;
}
.about-photo-icons span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 8px;
    margin: 0;
    border-radius: 12px;
    background: rgba(12, 12, 12, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--im-line-2);
    animation: im-bob 4s var(--im-ease) infinite;
}
.about-photo-icons span:nth-child(2) { animation-delay: .4s; }
.about-photo-icons span:nth-child(3) { animation-delay: .8s; }
.about-photo-icons span:nth-child(4) { animation-delay: 1.2s; }
.about-photo-icons span img { width: 100%; height: auto; }
@keyframes im-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }

.about-bio-title { font-size: 28px; }
.about-bio-roles { margin: 13px 0 0; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.6; }
.about-bio-text  { margin: 13px 0 0; color: var(--im-muted); font-size: 14.5px; line-height: 1.75; }

.about-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 26px 0 22px;
    /* index sets justify-items:center here, which shrinks each tile to its
       own text — that is why the "5+ Years Exp." box came out narrower than
       its neighbours. Stretching makes all four fill their cell. */
    justify-items: stretch;
}
.about-stat-item {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 18px 14px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
}
/* A single sweep across the tile as its number counts up — mobile-plus. */
.about-stat-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--im-rgb), .13), transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}
.about-stat-item.im-in::after { animation: im-sweep 1.1s var(--im-ease) .25s; }
@keyframes im-sweep { to { transform: translateX(120%); } }
.about-stat-num,
.about-stat-plus {
    display: inline;
    color: var(--im-main);
    font-family: 'Righteous', sans-serif;
    font-size: 27px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.about-stat-label { display: block; margin-top: 8px; color: var(--im-muted); font-size: 12px; }

.about-info-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.about-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 14px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 11px;
    color: var(--im-muted);
    font-size: 12.5px;
    line-height: 1.3;
    word-break: break-word;
}
.about-chip svg { color: var(--im-main); flex: 0 0 auto; }
a.about-chip:active { border-color: var(--im-main); color: #fff; }

.about-cta-row { margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   WHAT I DO — mobile-plus.html: accent bar, boxed icon, scrolling tools
   ══════════════════════════════════════════════════════════════════════════ */
.skills-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.skill-card {
    position: relative;
    display: block;
    padding: 24px 18px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 18px;
    overflow: hidden;
}
/* The bar draws itself once the card reaches the viewport. */
.skill-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--im-main);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s var(--im-ease);
}
.skill-card.im-in::before { transform: scaleY(1); }

.skill-card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin: 0 0 16px;
    border-radius: 14px;
    background: rgba(var(--im-rgb), .1);
    border: 1px solid rgba(var(--im-rgb), .22);
    color: var(--im-main);
}
.skill-card-title { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 500; }

/* Tool chips ride an infinite marquee, alternating direction per card.
   Spacing lives on the children, not on flex `gap`, so the duplicated halves
   are exactly equal and translateX(-50%) loops without a seam. */
.skill-tools-wrap.im-tools {
    display: block;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.im-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: im-marq 26s linear infinite;
}
.im-track > * { margin-right: 6px; flex: 0 0 auto; }
.skill-card:nth-child(even) .im-track { animation-direction: reverse; }
@keyframes im-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.skill-tool {
    padding: 6px 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--im-line);
    border-radius: 8px;
    color: var(--im-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.skill-anchor-note { margin: 15px 0 0; color: rgba(var(--im-rgb), .8); font-size: 11.5px; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   EXPERIENCE — badge and "Details" toggle from mobile.html
   ══════════════════════════════════════════════════════════════════════════ */
/* The card is reordered with flexbox rather than by moving nodes in the DOM,
   so widening the window back to desktop restores index's own order by
   itself. display:contents lifts the header's children up to become items of
   the card, which is what lets the Details control sit after the tags.
   position:relative anchors the pinned badge; index only sets it under 768px. */
.exp-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
}
.exp-header { display: contents; }
.exp-date-badge  { order: 1; }
.exp-header-main { order: 2; }
.exp-tags        { order: 3; }
.exp-toggle-icon { order: 4; }
.exp-body        { order: 5; }

/* "Most Recent" goes back to the card's top-right corner. js/index-mobile.js
   lifts it out of .exp-header-main so it can be pinned there, and flags the
   card so the date line reserves room for it. */
.exp-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    display: inline-block;
    margin: 0;
    padding: 4px 11px;
    border-radius: 12px;
    background: rgba(var(--im-rgb), .13);
    border: 1px solid rgba(var(--im-rgb), .3);
    color: var(--im-main);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
/* Only the card that actually carries a badge reserves room for it, so the
   other date lines keep their full width. Where :has() is unsupported the
   rule is simply dropped — at worst the date runs close to the badge on that
   one card, which is better than indenting every card for nothing. */
.exp-right:has(.exp-badge) .exp-date-badge { padding-right: 96px; }

/* The tags sit directly under the company / location line; the ordering that
   puts the Details control after them is declared with .exp-right above.
   The control's appearance is set once, outside this media query, so it is
   identical on desktop. Only its placement is mobile-specific: index pins it
   to the card's top-right corner under 768px. */
.exp-tags { margin-top: 6px; }
.exp-toggle-icon { position: static; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   CREDENTIALS — mobile-plus.html: a snap reel, centre card full size
   ══════════════════════════════════════════════════════════════════════════ */
/* Scoped to #education: index reuses the .edu-filters class for the
   portfolio filter row too, which this is not meant to touch. The
   !important flags beat a `justify-content:center` inline style and the
   .mb-50 helper, both of which sit on this element. */
.edu-section .edu-filters {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.edu-section .edu-filters::-webkit-scrollbar { display: none; }

.edu-filter-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--im-line);
    border-radius: 21px;
    background: transparent;
    color: var(--im-muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.edu-filter-btn.active { background: var(--im-main); border-color: var(--im-main); color: var(--im-ink); font-weight: 600; }

/* Negative margins pull the reel out of .container so it runs edge to edge,
   with the padding put back inside — the same breathing room mobile-plus
   gives its shelf. */
.edu-grid {
    display: flex;
    gap: 14px;
    margin-inline: -15px;
    padding: 4px 20px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.edu-grid::-webkit-scrollbar { display: none; }

.edu-card {
    flex: 0 0 74vw;
    max-width: 290px;
    scroll-snap-align: center;
    margin: 0;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 18px;
    overflow: hidden;
    /* --im-p is 1 at the centre of the reel and 0 at its edges (set by JS).
       !important because index declares `transition: transform .3s` here,
       which would make the scale lag the finger instead of tracking it. */
    transform: scale(calc(.92 + .08 * var(--im-p, 1))) !important;
    opacity: calc(.55 + .45 * var(--im-p, 1));
    transition: border-color .3s var(--im-ease) !important;
    will-change: transform;
}
.edu-card.im-mid { border-color: rgba(var(--im-rgb), .3); }

.edu-card-img { height: auto !important; aspect-ratio: 16 / 10; }
.edu-card-img img { width: 100%; height: 100%; object-fit: cover; }

.edu-card-body { padding: 16px; }
.edu-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.edu-card-title { font-family: 'Lexend', sans-serif; font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.edu-card-sub { display: block; margin-top: 4px; color: var(--im-muted); font-size: 12px; font-weight: 400; }
.edu-card-org { margin: 7px 0 0; color: var(--im-muted); font-size: 12px; line-height: 1.5; }
.edu-date { color: var(--im-main); font-size: 11px; font-weight: 500; }
.edu-card-desc { margin: 10px 0 0; color: var(--im-dim); font-size: 12px; line-height: 1.6; }
.edu-verify-btn { margin-top: 12px; font-size: 11.5px; }

/* Progress track, appended after the reel by js/index-mobile.js. */
.im-reel-track { height: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.im-reel-track i { display: block; height: 100%; width: 100%; background: var(--im-main); transform: scaleX(0); transform-origin: left; transition: transform .14s linear; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOGS — mobile-plus.html
   ══════════════════════════════════════════════════════════════════════════ */
/* index's own mobile block pads the featured card, caps the image at a fixed
   height and forces the side cards to stack — with !important on the image.
   These rules undo that so the cards match mobile-plus: flush cover on top,
   image-left rows underneath. */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.blog-side-posts { display: grid !important; grid-template-columns: 1fr; gap: 14px; }

.blog-featured-card,
.blog-side-card {
    display: block;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .3s var(--im-spring), border-color .3s var(--im-ease);
}
.blog-featured-card:active,
.blog-side-card:active { transform: scale(.98); border-color: rgba(var(--im-rgb), .3); }

.blog-featured-card { padding: 0; }
.blog-featured-img { position: relative; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-overlay { display: none; }

.blog-featured-label {
    position: absolute;
    left: 12px; top: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--im-main);
    color: var(--im-ink);
    font-size: 10.5px;
    font-weight: 600;
}

.blog-featured-body { padding: 17px; }
.blog-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.blog-tag { padding: 4px 10px; background: none; border: 1px solid var(--im-line); border-radius: 7px; color: var(--im-muted); font-size: 10.5px; }

.blog-featured-title { font-family: 'Lexend', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.38; }
.blog-featured-excerpt { margin: 11px 0 0; color: var(--im-muted); font-size: 13px; line-height: 1.65; }

.blog-featured-footer,
.blog-side-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--im-line);
}
.blog-date { color: var(--im-dim); font-size: 11.5px; }
.blog-read-more { color: var(--im-main); font-size: 12.5px; font-weight: 500; }
.blog-arrow { color: var(--im-main); font-size: 15px; }

/* Secondary posts sit as image-left rows. index forces width/height on the
   thumbnail with !important, so these have to match that weight. */
.blog-side-card { display: grid !important; grid-template-columns: 116px 1fr; padding: 0; }
.blog-side-img { width: auto !important; height: 100% !important; min-height: 0; border-radius: 0; overflow: hidden; }
.blog-side-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-side-body { padding: 15px; }
.blog-side-title { font-family: 'Lexend', sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.blog-side-excerpt { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT — mobile-max.html
   ══════════════════════════════════════════════════════════════════════════ */
/* Order on mobile: heading → form → channels → socials. index already sets
   this up with display:contents and order values; an earlier `display:block`
   here was flattening it, so it is restated explicitly rather than inherited
   from whichever of index's media blocks happens to apply. */
.contact-new-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
}
.contact-left { display: contents; }
.contact-intro { order: 1; }
.contact-right { order: 2; }
.contact-details { order: 3; }

/* Centred above the heading, but the same width as every other badge.
   The width needs !important of its own: the base .sub-title-icon rule
   carries `width: auto !important`, which on a block-level flex container
   means full width — that is what widened the pill. */
.contact-intro .sub-title-icon {
    display: flex !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin-left: auto;
    margin-right: auto;
}

.contact-heading { font-size: 29px; line-height: 1.3; }
.contact-sub { margin: 13px 0 26px; color: var(--im-muted); font-size: 14.5px; }

.contact-channels { display: grid; gap: 10px; }

.contact-channel {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 13px;
    min-height: 70px;
    padding: 13px 16px 13px 13px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 15px;
    transition: transform .28s var(--im-spring), border-color .25s var(--im-ease);
}
.contact-channel:active { transform: scale(.98); border-color: rgba(var(--im-rgb), .36); }

/* mobile-max uses one flat accent tile for every channel: no border, and
   WhatsApp is not singled out in its own shade of green. */
.contact-channel-icon,
.contact-channel-icon.contact-channel-icon-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border: 0;
    border-radius: 13px;
    background: rgba(var(--im-rgb), .1);
    color: var(--im-main);
}
.contact-channel-body { display: block; min-width: 0; }
.contact-channel-label {
    display: block;
    margin-bottom: 0;
    color: var(--im-dim);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.contact-channel-value { display: block; margin-top: 3px; color: #fff; font-size: 14px; font-weight: 400; line-height: 1.35; word-break: break-word; }
.contact-channel-arrow { color: var(--im-main); font-size: 18px; transform: none; opacity: 1; }

/* "Find me on" and its buttons sit centred rather than ranged left. */
.contact-social-row { display: block; margin-top: 26px; text-align: center; }
.contact-social-label { display: block; margin-bottom: 12px; color: var(--im-dim); font-size: 12px; }
.contact-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.contact-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--im-line);
    border-radius: 13px;
    color: var(--im-muted);
    transition: color .25s var(--im-ease), border-color .25s var(--im-ease), transform .28s var(--im-spring);
}
.contact-social-btn:active { color: var(--im-main); border-color: var(--im-main); transform: scale(.92); }

/* Form card */
.contact-cta-card {
    padding: 26px 18px 28px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: 20px;
}
.cform-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 15px;
    border-radius: 20px;
    background: rgba(var(--im-rgb), .1);
    color: var(--im-main);
    font-size: 11.5px;
    font-weight: 500;
}
.cform-title { font-size: 22px; }
.cform-desc { margin: 11px 0 24px; color: var(--im-muted); font-size: 13.5px; line-height: 1.65; }

.cform-row { display: block; }

.cform-group { position: relative; margin-bottom: 18px; }

.cform-field { position: relative; }
/* mobile-max has no field icons; the floating label uses that space. */
.cform-field-icon { display: none; }

.cform-input {
    width: 100%;
    min-height: 56px;
    padding: 15px;                     /* even now the label is not inside */
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--im-line);
    border-radius: 13px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;                   /* 16px stops iOS zooming on focus */
    transition: border-color .25s var(--im-ease), background-color .25s var(--im-ease);
}
textarea.cform-input { min-height: 136px; line-height: 1.6; }
.cform-input:focus { outline: none; border-color: var(--im-main); background: rgba(var(--im-rgb), .04); }

.cform-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    appearance: none;
    -webkit-appearance: none;
}

/* The service field is not an input at all — index swaps it for the .cselect
   widget, which shows its own placeholder — so it keeps a plain label and is
   simply dressed to match the other fields. */
.cselect-trigger {
    min-height: 56px;
    padding: 14px 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--im-line);
    border-radius: 13px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}
.cselect.open .cselect-trigger,
.cselect-trigger:focus-visible { border-color: var(--im-main); background: rgba(var(--im-rgb), .04); }

/* Labels sit above their field and stay put — no floating, no movement on
   focus. The placeholder does its own job inside the field. */
.cform-label {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    color: var(--im-muted);
    font-size: 12.5px;
    font-weight: 400;
    transform: none;
    transition: none;
}
.cform-label > span { position: static; transform: none; transition: none; }
.cform-req { color: var(--im-main); }

/* index indents these by 48px to clear the field icon, which is hidden here,
   so the text was starting well inside the box. The selector has to match
   its weight to win. */
.cform-field .cform-input,
.cform-field .cform-select { padding-left: 15px; }

/* Smaller than the input's own 16px — that stays put, because anything
   under 16px makes iOS zoom the page on focus. */
.cform-input::placeholder {
    color: rgba(255, 255, 255, .3);
    font-size: 14px;
}

/* The counter rides the right end of the message label. */
.cform-count {
    position: static;
    color: var(--im-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.cform-error { margin-top: 8px; font-size: 11.5px; }

.cform-submit { width: 100%; margin-top: 4px; border-radius: 13px; }
.cform-foot { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--im-dim); font-size: 11.5px; }
.cform-status { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT DIAL — mobile-plus.html, replacing the floating "Let's Talk"
   ══════════════════════════════════════════════════════════════════════════ */
.hire-me-float { display: none !important; }

.im-dial-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(8, 8, 8, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--im-ease), visibility .35s;
}
body.im-dial-on .im-dial-veil { opacity: 1; visibility: visible; }

.im-dial {
    display: block;
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 9998;
    width: 60px; height: 60px;
}

.im-dial-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--im-main);
    color: var(--im-ink);
    box-shadow: 0 10px 30px rgba(var(--im-rgb), .3);
    transition: transform .45s var(--im-spring);
}
body.im-dial-on .im-dial-btn { transform: rotate(135deg); }

.im-dial-ring { position: absolute; inset: -5px; transform: rotate(-90deg); pointer-events: none; }
.im-dial-ring circle { fill: none; stroke-width: 2.5; }
.im-dial-ring .im-bg { stroke: rgba(255, 255, 255, .1); }
.im-dial-ring .im-fg { stroke: var(--im-main); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset .12s linear; }

.im-dial-item {
    position: absolute;
    right: 6px; bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px 0 6px;
    border-radius: 24px;
    background: #171717;
    border: 1px solid var(--im-line-2);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(0) scale(.5);
    pointer-events: none;
    transition: transform .45s var(--im-spring), opacity .3s var(--im-ease);
}
.im-dial-item em {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(var(--im-rgb), .13);
    color: var(--im-main);
    font-style: normal;
}
body.im-dial-on .im-dial-item { opacity: 1; pointer-events: auto; }
body.im-dial-on .im-dial-item:nth-child(1) { transform: translateY(-70px)  scale(1); transition-delay: .04s; }
body.im-dial-on .im-dial-item:nth-child(2) { transform: translateY(-128px) scale(1); transition-delay: .09s; }
body.im-dial-on .im-dial-item:nth-child(3) { transform: translateY(-186px) scale(1); transition-delay: .14s; }
body.im-dial-on .im-dial-item:nth-child(4) { transform: translateY(-244px) scale(1); transition-delay: .19s; }

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .about-photo-wrap,
    .about-photo-icons span,
    .im-track { animation: none; }
    .skill-card::before { transform: scaleY(1); }
    .im-dial-item,
    .im-dial-btn { transition-duration: .001ms; }
}

}   /* end @media (max-width: 991.98px) */