/* =====================================================
   BAOIAM - INTERNSHIP PAGE

   Rebuilt against the Figma frame "Internship Hifi"
   (node 2296:1178, 1440px). Colours, radii, shadows,
   gradients and the type scale are the Figma values;
   motion comes from css/animations.css.
===================================================== */

/* ==========================
   PAGE BACKGROUND

   The Figma root frame is plain #FFFFFF. The peach washes are NOT
   page-wide — each is a fill on one specific section, so most of the
   page reads white and the warmth only appears where Figma puts it.
========================== */

.int-page{
    position:relative;
    background:#FFFFFF;
}

.int-orange{
    color:var(--primary);
}

/* ==========================
   TYPE SCALE
========================== */

.int-heading{
    font-family:var(--font-display);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.01em;
    text-align:center;
    color:var(--ink);
}

.int-heading-left{
    text-align:left;
}

.int-subheading{
    margin-top:16px;
    /* House style is a taper: the first line full, each one after it
       shorter. Left at the container's full width these ran as a single
       edge-to-edge line under a much narrower heading. This measure lands
       them on two lines with the break falling naturally. */
    max-width:760px;
    margin-inline:auto;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.55;
    text-align:center;
    text-wrap:normal;
    color:var(--ink);
}


/* ==========================
   BUTTONS
========================== */

.int-btn-primary{
    display:inline-block;
    padding:12px 26px;
    border:2px solid var(--primary);
    border-radius:var(--r-15);
    background:var(--primary);
    color:#fff;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out);
}

.int-btn-primary:hover{
    background:var(--primary-hover);
    transform:translateY(-3px);
    box-shadow:var(--glow);
}

.int-btn-primary:active{
    transform:translateY(-1px) scale(.98);
}

.int-btn-ghost{
    display:inline-block;
    padding:12px 28px;
    text-align:center;
    text-decoration:none;
    border:1.5px solid var(--primary);
    border-radius:var(--r-20);
    background:#fff;
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.int-btn-ghost:hover{
    background:var(--primary-10);
    transform:translateY(-3px);
}

.int-btn-white{
    display:inline-block;
    padding:14px 32px;
    border-radius:var(--r-50);
    background:#fff;
    color:var(--primary);
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-btn-white:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* ==========================
   HERO

   Figma: a solid #FF6600 plate with the photo masked over it. The
   photo itself stays at full brightness.
========================== */

.int-hero{
    position:relative;
    min-height:609px;
    display:flex;
    align-items:center;
    padding-bottom:var(--space-section-sm);
    background:var(--primary);
    overflow:hidden;
}

/* --- Slideshow ---------------------------------------------------------
   7 frames, each held for --hero-hold, crossfading with a slow Ken Burns
   push. Timing is pure CSS: every slide runs the same 7x-long animation
   and is offset by one hold. --------------------------------------------- */

.int-hero-slides{
    --hero-hold:4.5s;
    --hero-cycle:31.5s;          /* 7 x --hero-hold */
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,#2b2118 0%,#5c3a1e 45%,#a05a22 100%);
}

.int-hero-slide{
    position:absolute;
    inset:0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    will-change:opacity,transform;
    animation:heroCycle var(--hero-cycle) var(--ease-soft) infinite;
}

.int-hero-slide:nth-child(1){ animation-delay:calc(var(--hero-hold) * 0); }
.int-hero-slide:nth-child(2){ animation-delay:calc(var(--hero-hold) * 1); }
.int-hero-slide:nth-child(3){ animation-delay:calc(var(--hero-hold) * 2); }
.int-hero-slide:nth-child(4){ animation-delay:calc(var(--hero-hold) * 3); }
.int-hero-slide:nth-child(5){ animation-delay:calc(var(--hero-hold) * 4); }
.int-hero-slide:nth-child(6){ animation-delay:calc(var(--hero-hold) * 5); }
.int-hero-slide:nth-child(7){ animation-delay:calc(var(--hero-hold) * 6); }

/* One slide occupies 100/7 = 14.28% of the cycle; the fade eats ~3% either
   side so two frames always overlap and the plate never shows through. */

@keyframes heroCycle{
    0%     { opacity:0; transform:scale(1.08); }
    3%     { opacity:1; }
    14.28% { opacity:1; }
    17.28% { opacity:0; }
    100%   { opacity:0; transform:scale(1); }
}

/* Stillness for anyone who asked for it: frame 1 only. */

@media (prefers-reduced-motion:reduce){

    .int-hero-slide{
        animation:none;
    }

    .int-hero-slide:nth-child(1){
        opacity:1;
    }

}

/* The 180deg gradient in Figma's "Mask group" is an ALPHA MASK, not a
   scrim — it fades the photo into the #FF6600 plate underneath, going from
   fully opaque at the top to 60% at the bottom. So the photo stays bright;
   only the lower edge picks up a warm cast. That is this first layer.

   The second layer is ours: a soft left-edge falloff, because the Figma
   frame puts white 52px copy straight over a bright photo and it does not
   hold up. It fades out by 70% so the right side stays as bright as Figma. */

.int-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.34) 38%,rgba(0,0,0,0) 70%),
        linear-gradient(180deg,rgba(255,102,0,0) 55%,rgba(255,102,0,.4) 100%);
}

.int-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:var(--container-width);
    margin-inline:auto;
    padding:70px var(--container-padding);
}

/* The headline sets its own three lines with <br>. At the 52px ceiling the
   longest of them ("and Start Becoming Professionals.") measures 944px, so
   a 900px cap broke it in two and the headline ran to four lines. */

.int-hero-content h1{
    max-width:980px;
    font-family:var(--font-sans);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.16;
    letter-spacing:.04em;
    color:#fff;
}

.int-hero-content p{
    margin-top:22px;
    max-width:820px;
    font-family:var(--font-sans);
    font-size:clamp(15px,1.3vw,19px);
    font-weight:500;
    line-height:1.5;
    letter-spacing:.04em;
    /* Flush on both edges, so the lines stack as a block rather than stepping
       in and out against the photo behind them.

       justify with PRETTY, never with balance: balance shortens every line to
       even them up and justify then has to stretch each one back to the full
       measure, so the gaps carry the whole difference and rivers open down the
       middle. pretty leaves the lines nearly full already, so justify has
       almost nothing left to stretch. Same pairing as the homepage hero
       paragraph in css/hero.css. */
    text-align:justify;
    text-wrap:pretty;
    color:#fff;
}

.int-hero-content .int-btn-primary{
    margin-top:34px;
    /* The label is the longest on the page, so this one is sized down from
       the shared button rather than carrying its 12/26 and 16px. */
    padding:8px 18px;
    font-size:13.5px;

    /* The sheen is a background-image, not a pseudo-element. A ::after laid
       over the face would paint above the label - backgrounds paint below
       text, so the light passes under it. It also means no overflow:hidden
       and no stacking context to manage. */
    background-image:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 60%);
    background-repeat:no-repeat;
    background-size:220% 100%;
    background-position:210% 0;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out),
        background-position .62s var(--ease-out);
}

/* background-color, not the background shorthand. The shared rule's hover
   uses the shorthand, which would reset background-image to none and take
   the sheen with it. */

.int-hero-content .int-btn-primary:hover{
    background-color:var(--primary-hover);
    background-position:-110% 0;
}

/* The arrow leans out ahead of the label. */

.int-btn-arrow{
    display:inline-block;
    margin-left:3px;
    transition:transform var(--dur-base) var(--ease-out);
}

.int-btn-primary:hover .int-btn-arrow{
    transform:translateX(4px);
}

@media (prefers-reduced-motion:reduce){

    .int-hero-content .int-btn-primary,
    .int-btn-arrow{
        transition:none;
    }

    .int-hero-content .int-btn-primary:hover{
        background-position:210% 0;
    }

    .int-btn-primary:hover .int-btn-arrow{
        transform:none;
    }

}

/* ==========================
   FEATURE STRIP

   A floating card that overlaps the bottom of the hero.
========================== */

.int-strip{
    position:relative;
    z-index:3;
    margin-top:-48px;
    padding:0 var(--container-padding);
}

.int-strip-inner{
    max-width:1382px;
    margin-inline:auto;
    padding:26px 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    border:3px solid var(--primary-25);
    border-radius:var(--r-15);
    background:var(--grad-strip);
    box-shadow:var(--glow-lg);
}

.int-strip-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-sans);
    font-size:clamp(14px,1.25vw,19px);
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink);
    transition:transform var(--dur-base) var(--ease-out);
}

.int-strip-item:hover{
    transform:translateY(-3px);
}

.int-strip-item i,
.int-strip-item img{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    font-size:20px;
    object-fit:contain;
    color:var(--primary);
}

/* Figma sets a small curved arrow between each strip item. */

.int-strip-item + .int-strip-item::before{
    content:"";
    width:18px;
    height:22px;
    margin-right:12px;
    background:url("/assets/images/figma/strip-arrow.svg") center/contain no-repeat;
    opacity:.85;
}

@media (max-width:900px){
    .int-strip-item + .int-strip-item::before{
        display:none;
    }
}

/* ==========================
   PILLARS

   The four-badge row Figma places between the feature strip and the
   stats numbers: "Beginner Friendly / Practical Learning / Career
   Ready / Outcomes" — each an outlined card with an orange eyebrow
   label, a bold line, and a short description underneath.
========================== */

/* The section runs straight off the feature strip, which is a raised card
   with a shadow under it, so a gap measured from the card's edge reads as
   less than it is. It also had no header at all -- four cards arriving with
   nothing to say what they were. Both fixed here: the section opens further
   down, and on a heading rather than on the grid.

   Not one of the space tokens: --space-block and --space-section-sm both cap
   at 48px, which is what it already had. */

.int-pillars{
    margin-top:clamp(56px,5.6vw,84px);
    padding:0 var(--container-padding);
}

/* Same measure as the grid below it, so the heading and the cards share one
   pair of edges. */

.int-pillars-head{
    max-width:1382px;
    margin:0 auto var(--space-block);
}

.int-pillars-grid{
    max-width:1382px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.int-pillar-card{
    padding:24px 26px;
    border:1.5px solid var(--primary-35);
    border-radius:var(--r-15);
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-pillar-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--glow);
}

.int-pillar-eyebrow{
    display:block;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    color:var(--primary);
}

.int-pillar-card h5{
    margin-top:8px;
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:700;
    color:var(--ink);
}

.int-pillar-card p{
    margin-top:8px;
    font-size:14px;
    line-height:1.5;
    color:var(--ink-800);
}

/* ==========================
   STATS
========================== */

.int-stats{
    /* No side padding and no container of its own -- the band is full-bleed
       and the ticker inside it runs off both screen edges. */

    /* The block token is the gap between a header and its own grid. This is
       not that: it is the edge of a full-bleed dark band arriving under four
       pale cards, and at 48 the cards looked stuck to it. A boundary that
       hard needs the room a section boundary gets. Written out because the
       section tokens both cap at 48, which is what it had. */
    margin-top:clamp(56px,5.8vw,88px);
    padding:0;
    background:#FFFFFF;
}

/* The band used to be a pale peach rectangle sitting between two more pale
   sections -- the figures had nothing to push against, so the whole strip
   read as a caption. It is a dark full-bleed band now: same brand orange, but
   the figures carry it as light instead of as ink. */

.int-stats-band{
    position:relative;
    overflow:hidden;
    /* A ticker, not a panel. Each figure is laid out as a row -- icon, then
       number, then its two lines of copy beside them -- so the band's height
       is one line of content instead of four stacked ones. That took it from
       ~300px to ~100px without shrinking the figures. */
    padding:clamp(17px,1.8vw,24px) 0;
    /* Edge to edge, so no radius and no side borders -- a 32px corner at the
       viewport edge reads as a panel that failed to reach the edge. The lit
       hairlines top and bottom are what close the band. */
    border:0;
    border-radius:0;
    /* Top layer is a tiled fractal-noise tile at ~5% -- a flat gradient this
       large bands visibly on 8-bit panels and reads as cheap; the grain
       breaks the bands up and is what makes the band look printed rather
       than filled. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
        radial-gradient(120% 200% at 6% -40%,rgba(255,102,0,.30) 0%,rgba(255,102,0,0) 56%),
        radial-gradient(110% 190% at 94% 140%,rgba(255,138,61,.24) 0%,rgba(255,102,0,0) 54%),
        linear-gradient(135deg,#1B1210 0%,#120C0B 48%,#20150F 100%);
    /* Inset only. A drop shadow belongs to a panel floating on the page; a
       full-bleed band has no edges to cast one from. */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(255,255,255,.04);
    /* Slower than the mentors row's 42s default: the track is eight cards
       wide here, so the same duration would run it past at a blur. */
    --marquee-duration:52s;
}

/* Lit top and bottom edges -- hairlines that catch the orange in the middle
   and die out at both ends. With the border gone these are the only thing
   separating the band from the white above and below it. Above the ticker in
   the stack, so the moving row cannot ride over them. */

.int-stats-band::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    background:
        linear-gradient(90deg,rgba(255,160,90,0) 0%,rgba(255,178,122,.8) 50%,rgba(255,160,90,0) 100%) top left/100% 1px no-repeat,
        linear-gradient(90deg,rgba(255,160,90,0) 0%,rgba(255,150,80,.55) 50%,rgba(255,160,90,0) 100%) bottom left/100% 1px no-repeat;
    pointer-events:none;
}

/* A slow sheen crossing the band every seven seconds. Long pause, short
   sweep, very low opacity. Killed under reduced motion below. */

.int-stats-band::after{
    content:"";
    position:absolute;
    top:0;
    left:-45%;
    z-index:2;
    width:42%;
    height:100%;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 100%);
    transform:skewX(-14deg);
    animation:intStatsSheen 7s ease-in-out infinite;
    pointer-events:none;
}

@keyframes intStatsSheen{
    0%,72%{ left:-45%; }
    100%  { left:118%; }
}

/* Flex once it is a track -- grid-template-columns means nothing to a row
   that deliberately runs past the viewport edge. Same opt-in the mentors
   grid uses. */

.bao-marquee .int-stats-grid{
    display:flex;
}

/* Left to right: the shared keyframe runs 0 -> -50%, so the row travels
   leftwards by default. Reversed here, and only here -- the mentors row
   keeps the house direction. */

.int-stats-band .bao-marquee-track{
    animation-direction:reverse;
}

.int-stat-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    /* Fixed in the track: a flex item sized off its own content would make
       "Self-reported improvement" half again the width of "To choose from",
       and the figures would drift out of rhythm as they passed. */
    /* Sized off the worst case, not the average: "90%+" is the widest figure
       and "Job-Ready Interns" the widest label, and at 21vw those two landed
       in the same card and wrapped it onto a second line -- one card taller
       than the seven beside it. */
    flex:0 0 clamp(320px,26vw,368px);
    /* Own trailing margin rather than `gap` on the track. Sixteen cards carry
       only fifteen gaps, so a gapped track is half a gap wider than two sets
       and the -50% loop lands short -- a visible jump every cycle. With the
       space on the card, one set is exactly half the track. */
    margin-right:clamp(30px,3vw,48px);
    padding:6px 0 6px clamp(16px,1.6vw,26px);
    text-align:left;
}

/* The icon tile. Glass on the dark ground rather than a filled orange chip:
   a row of saturated chips would out-shout the figures, which are the thing
   the band exists to show. */

.int-stat-ico{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:11px;
    background:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    color:#FF9A52;
}

.int-stat-ico svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.int-stat-card h3{
    /* A display figure, not a heading role -- deliberately off the ladder.
       Still the biggest thing in the band; the height came out of the layout,
       not out of the figure. */
    position:relative;
    flex:0 0 auto;
    margin:0;
    font-family:var(--font-sans);
    font-size:clamp(28px,2.5vw,36px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.025em;
    white-space:nowrap;
    color:#FF8A3D;
}

/* The glow behind the figure. Wide and weak, with the falloff pushed right
   out to the edge -- tighter stops render it as a hard-edged orange disc
   sitting behind the number, a blob rather than a light. Blur finishes off
   what the extra stop cannot. */

.int-stat-card h3::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:3.4em;
    height:3.4em;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(255,132,44,.20) 0%,rgba(255,110,10,.10) 30%,rgba(255,102,0,.035) 52%,rgba(255,102,0,0) 74%);
    filter:blur(7px);
    pointer-events:none;
}

.int-stat-copy{
    min-width:0;
}

.int-stat-label{
    margin:0;
    font-size:clamp(12.5px,1vw,14px);
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.005em;
    color:rgba(255,255,255,.96);
}

.int-stat-sub{
    margin-top:2px;
    font-size:clamp(11px,.85vw,12px);
    /* 500 not 400: on a dark ground a 400 at this size goes thin and grey. */
    font-weight:500;
    line-height:1.3;
    color:rgba(255,255,255,.60);
}

/* A hairline before every card, not just between siblings -- the row is a
   loop, so the first card has a predecessor on screen like every other one. */

.int-stat-card::after{
    content:"";
    position:absolute;
    top:8%;
    left:0;
    width:1px;
    height:84%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.17) 50%,rgba(255,255,255,0) 100%);
}

/* Reduced motion kills the animation (animations.css), which would leave the
   sixteen figures frozen and clipped. Hand them back a scrollbar instead. */

@media (prefers-reduced-motion:reduce){

    .int-stats-band .bao-marquee{
        overflow-x:auto;
    }

    .int-stats-band::after{
        display:none;
    }

}


/* ==========================
   TEAM
========================== */

/* The artwork is one flat JPG -- heading, script line, subtitle and the row
   of portraits are all pixels in it -- so the only spacing this section can
   give is around it. Opened at both ends to match the track section below,
   which now floors at 72. */

.int-team{
    padding:var(--space-section) 0;
    background:var(--paper);
}


/* The Kalam line is flanked by two orange rules in Figma. */


/* width:100% with nothing above it meant this grew with the window forever.
   The file is 1439px wide, so at a 5400px viewport -- which is what a 25%
   browser zoom gives you -- it painted at 5394, three and three quarter
   times its own resolution, spanning the page while every section around it
   stayed on the site's 1400px measure. It read as a different website.

   Capped at that same measure and centred. The file is 1439 native, so this
   is about 1:1 and it never has to be upscaled. Below 1400 nothing changes:
   width:100% is still the smaller of the two. */

.int-team-img{
    display:block;
    width:100%;
    max-width:var(--container-width,1400px);
    height:auto;
    margin-top:34px;
    margin-inline:auto;
}

/* ==========================
   TRACK
========================== */

/* Figma's plain root background carries through this section too — no
   grid lattice, no radial washes. Just white. */
/* The floor comes up with the section below it, which now opens at 88: at
   48 the card's bottom edge sat close enough to that boundary to read as
   one long section rather than two. */

.int-track{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.int-track-tabs{
    /* The tabs are the section's control, not a third line of its header --
       40px kept them tucked under the lead. */
    margin-top:var(--space-block);
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:40px;
}

.int-tab{
    min-width:140px;
    padding:8px 24px;
    border:1px solid var(--primary-50);
    border-radius:var(--r-25);
    background:#fff;
    font-family:var(--font-sans);
    font-size:clamp(14px,1.1vw,18px);
    font-weight:700;
    color:var(--ink);
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.int-tab:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
}

.int-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:var(--glow);
}

.int-track-card{
    /* Opened with the tabs above it, so the card reads as what the tabs
       switch rather than as the next thing down the page. */
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:557px 1fr;
    gap:60px;
    align-items:center;
    padding:34px;
    border:1px solid var(--primary-50);
    border-radius:35px;
    background:#fff;
}

/* Re-rendering the panel replays the fade so the tab switch reads as a
   transition, not a swap. It starts partly visible on purpose: if the
   animation never runs, the card degrades to dimmed rather than blank. */

@keyframes trackSwap{
    from{ opacity:.35; transform:translate3d(0,12px,0); }
    to  { opacity:1;   transform:none; }
}

.int-track-card.is-swapping{
    animation:trackSwap var(--dur-slow) var(--ease-out);
}




/* Pinned to the panel ratio, 1200x749, so the card is the same height on
   every tab. Four of the five now have full-bleed panels cut to it and fill
   the box exactly; Marketing still points at a 380x380 square icon
   borrowed from the skills section, which stretched the card to nearly
   twice the height on a tab switch. contain lets that one sit whole and
   centred on the cream until its own panel is exported. */

.int-track-img{
    width:100%;
    aspect-ratio:1200/749;
    height:auto;
    border-radius:var(--r-40);
    background:#FFF8F3;
    object-fit:contain;
}

.int-track-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-sans);
    font-size:clamp(14px,1.15vw,18px);
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--primary);
}

.int-track-tag + h3{
    margin-top:10px;
}

.int-track-right p + .int-track-tag,
.int-track-list + .int-track-tag,
.int-track-roles + .int-track-tag{
    margin-top:26px;
}

.int-track-right h3{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    color:var(--ink);
}

.int-track-right p{
    margin-top:14px;
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
}

.int-track-list{
    margin-top:14px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.int-track-list li{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 16px;
    border:1px solid var(--primary-25);
    border-radius:10px;
    background:var(--primary-10);
    font-size:15px;
    color:var(--ink);
}

.int-track-list li i{
    font-size:13px;
    color:var(--primary);
}

/* Career-path pills: near-black, r30, white bold label. */

.int-track-roles{
    margin-top:14px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.int-track-roles li{
    padding:9px 20px;
    border-radius:30px;
    background:rgba(0,0,0,.85);
    font-size:14px;
    font-weight:700;
    color:#fff;
}

/* ==========================
   SKILLS

   The four "What Actually You'll Work On" project cards.
========================== */

/* 48px of top padding put the heading almost against the card above it,
   which read as the tail of that section rather than the start of this one.
   The floor comes up with it so the row of cards is not left sitting on the
   section boundary. */

.int-skills{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.int-skills-grid{
    /* Opened up with the space above: the lead had the same 48 under it as
       the heading had over it, so the three read as one block.

       Then a step further. The illustrations used to sit above the cards'
       top edge, so the gap the eye measured was 13px shorter than the one
       set here; with them pulled inside, the same value reads as tight.
       Written out because --space-block caps at 48, which is what it was. */
    margin-top:clamp(40px,4vw,60px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.int-skill-card{
    /* The track illustration is absolutely positioned and is a sibling of
       .int-skill-head, so it needs a containing block here. The old rule
       got one by accident from backdrop-filter; without that it escaped
       the card and anchored to the viewport. */
    position:relative;
    display:flex;
    flex-direction:column;
    padding:26px 22px 22px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    background:#FFFDFB;
    box-shadow:0 2px 14px rgba(76,75,75,.10);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-skill-card:hover{
    transform:translateY(-8px);
    box-shadow:4px 8px 22px rgba(76,75,75,.20);
}

/* Number and title on the left, the track illustration large in the
   top-right corner of the same row. */

.int-skill-head{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-bottom:14px;
    padding-right:96px;
}

/* Was top:-14px / right:-10px, which hung the illustration 13px above the
   card and 9px past its right edge -- over the border on two sides, so it
   read as a picture that had slipped rather than one placed there. Inside
   the card now, on the same inset both ways.

   And a little smaller with it: coming in costs the heading beside it 23px
   of width, which is enough to wrap a track name that fits today. At 92 it
   gives most of that back. */

.int-skill-art{
    position:absolute;
    top:14px;
    right:14px;
    width:92px;
    height:92px;
    object-fit:contain;
}

.int-skill-num{
    font-family:var(--font-sans);
    font-size:clamp(38px,3.6vw,52px);
    font-weight:800;
    line-height:1;
    color:var(--primary);
}

/* The rule sits under the title only, not across the whole card. */

.int-skill-head h4{
    display:inline-block;
    padding-bottom:10px;
    border-bottom:2px solid var(--primary);
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.int-skill-block{
    margin-top:16px;
}

.int-skill-block h5{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:var(--fs-meta);
    font-weight:700;
    letter-spacing:.09em;
    color:var(--primary);
}

/* Tools sits in ink rather than the brand orange. Its icon stays orange, so
   the row still reads as one of this card's labelled sections. */

.int-skill-block h5.int-skill-block-dark{
    color:var(--ink);
}

.int-skill-block h5.int-skill-block-dark i{
    color:var(--primary);
}

/* The first block is the only one whose height varies -- three bullets on
   some cards, four on others -- so it absorbs the difference. Everything
   under it then starts at the same line across the row instead of each card
   setting its own. The cards are equal height already, being grid items. */

.int-skill-head + .int-skill-block{
    flex:1 1 auto;
}

/* Hollow rings rather than filled dots, as in the reference. */

.int-skill-block ul{
    margin-top:10px;
    padding-left:0;
    list-style:none;
    display:grid;
    gap:8px;
}

.int-skill-block li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-size:12.5px;
    line-height:1.45;
    color:var(--ink);
}

.int-skill-block li::before{
    content:"";
    flex:none;
    width:13px;
    height:13px;
    margin-top:2px;
    border:1.5px solid var(--primary-35);
    border-radius:50%;
}

.int-skill-tools{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

/* Icon-only tiles. --brand is set per tile in the HTML from the official
   brand colour, so each mark reads as itself rather than being flattened
   into the page's orange. */

.int-tool{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid rgba(76,75,75,.14);
    border-radius:9px;
    background:#fff;
    box-shadow:0 1px 6px rgba(255,197,146,.45);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.int-tool:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}

.int-tool-mark{
    width:18px;
    height:18px;
    flex-shrink:0;
    /* SVG marks are single-path, so filling with the brand colour is enough. */
    fill:var(--brand);
    color:var(--brand);
    font-size:17px;
    display:grid;
    place-items:center;
}

/* Kept for screen readers and the hover title; the tile shows the mark. */

.int-tool-name{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* Three across, divided by hairlines — one row, never wrapping. */

.int-skill-deliverables{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.int-skill-deliverables span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:2px 6px;
    font-size:11px;
    line-height:1.3;
    text-align:center;
    color:var(--ink);
}

.int-skill-deliverables span + span{
    border-left:1px solid rgba(0,0,0,.10);
}

.int-skill-deliverables span i{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1.5px solid var(--primary-35);
    border-radius:50%;
    background:#fff;
    font-size:14px;
    color:var(--primary);
    transition:transform var(--dur-base) var(--ease-spring);
}

.int-skill-deliverables span:hover i{
    transform:translateY(-2px);
}

/* margin-top:auto pushes it to the card's bottom edge, so every button
   lines up across the row whatever length the lists above them run to. */

.int-skill-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:auto;
    padding:13px 18px;
    border-radius:999px;
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    letter-spacing:.06em;
    color:#fff;
    text-decoration:none;
    transition:
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

/* Sits above the button, not against it. */

.int-skill-card > .int-skill-block:last-of-type{
    margin-bottom:22px;
}

.int-skill-cta i{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.26);
    font-size:11px;
}

.int-skill-cta:hover{
    background:#E85D00;
    box-shadow:0 8px 20px rgba(255,102,0,.32);
}

@media (prefers-reduced-motion:reduce){

    .int-skill-deliverables span i,
    .int-tool{
        transition:none;
    }

    .int-skill-deliverables span:hover i,
    .int-tool:hover{
        transform:none;
    }

}

/* ==========================
   TRUST
========================== */

.int-trust{
    padding:var(--space-section) 0;
    background:rgba(217,217,217,.2);
}

.int-trust-top{
    margin-top:var(--space-block);
    display:grid;
    /* Near-even now: the illustration is no longer a 4:3 stage that had
       to be wide enough to hold a composition. */
    grid-template-columns:1.05fr 0.95fr;
    gap:36px;
    align-items:center;
}

/* ---------- the illustration panel ----------

   Was a built composition - a dashed orbit carrying three mentor windows and
   four track chips. The design calls for a single illustration instead.

   No decoration drawn here. The artwork already carries the orange corner
   rounds, the dot grid and the faint rings, so the frame that used to paint
   them was doubling them up; it holds the image and nothing else now.

   The heading, the sub, the three points and the four cards all stay real
   markup. Only the picture is a picture - the JPG this section once used had
   its heading baked into the pixels, and no code edit could reach it. */

.int-trust-stage{
    position:relative;
    margin:0;
}

.int-trust-stage img{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--r-25);
}

/* The card beside the illustration. It carried three bare lines and stood
   mostly empty against a tall picture; it now holds a header, the three
   habits with a sentence each, and a closing line. Column layout so the
   header sits at the top, the list takes the middle and the note sits under
   it, whatever height the illustration sets. */

.int-trust-points{
    display:flex;
    flex-direction:column;
    padding:clamp(24px,2.4vw,34px);
    border:1px solid rgba(0,0,0,.5);
    border-radius:var(--r-40);
    background:#fff;
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-trust-points:hover{
    border-color:var(--primary-50);
    box-shadow:0 18px 40px rgba(0,0,0,.07);
}

.int-trust-points-eyebrow{
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--primary);
}

.int-trust-points h3{
    margin-top:10px;
    font-family:var(--font-sans);
    font-size:clamp(17px,1.5vw,21px);
    font-weight:800;
    line-height:1.3;
    text-wrap:balance;
    color:var(--ink);
}

.int-trust-points-list{
    /* Takes the slack, so the closing note stays on the card's floor rather
       than floating under the third habit. */
    flex:1 1 auto;
    margin-top:18px;
    padding:0;
    list-style:none;
}

/* Number in a fixed first column, copy in the second. Ranged left now: the
   old rows centred their text, which reads as a slogan rather than as an
   explanation. */

.int-trust-points-list li{
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:start;
    gap:14px;
    padding:16px 0;
    text-align:left;
    transition:color var(--dur-base) var(--ease-out);
}

.int-trust-points-list li + li{
    border-top:1px solid rgba(0,0,0,.12);
}

.int-trust-point-num{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--primary-10);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:800;
    line-height:1;
    color:var(--primary);
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.int-trust-points-list li:hover .int-trust-point-num{
    background:var(--primary);
    color:#fff;
}

.int-trust-points-list strong{
    display:block;
    font-family:var(--font-sans);
    font-size:clamp(15px,1.25vw,17px);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.int-trust-points-list p{
    margin-top:6px;
    font-family:var(--font-sans);
    font-size:clamp(13px,1.05vw,14.5px);
    font-weight:500;
    line-height:1.55;
    text-wrap:pretty;
    color:var(--ink-500);
}

.int-trust-points-foot{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(255,102,0,.22);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:600;
    line-height:1.5;
    color:var(--ink-600);
}

.int-trust-points-foot i{
    margin-top:2px;
    font-size:14px;
    color:var(--primary);
}

.int-trust-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.int-trust-card{
    /* relative + overflow so the accent below can sit on the card's own
       floor and stay inside its radius. */
    position:relative;
    overflow:hidden;
    padding:15px;
    border:1px solid var(--primary-50);
    border-radius:var(--r-15);
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.int-trust-card:hover,
.int-trust-card:focus-within{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:var(--glow);
}

/* Draws along the floor from the left. A pseudo-element because a border
   cannot animate from scaleX(0), and animating a width would reflow. */

.int-trust-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:3px;
    background:linear-gradient(90deg,var(--primary),#FFA14A);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--dur-base) var(--ease-out);
}

.int-trust-card:hover::after,
.int-trust-card:focus-within::after{
    transform:scaleX(1);
}

/* The frame sets the number in a soft peach tile rather than as loose
   text above the title. */

.int-trust-num{
    display:inline-grid;
    place-items:center;
    min-width:52px;
    padding:9px 14px;
    border-radius:12px;
    background:var(--primary-20);
    font-family:var(--font-sans);
    font-size:24px;
    font-weight:700;
    color:var(--primary);
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

/* The tile fills as the card lifts - the number is the thing the eye is
   already on, so it is the thing that answers. */

.int-trust-card:hover .int-trust-num,
.int-trust-card:focus-within .int-trust-num{
    transform:translateY(-2px) scale(1.06);
    background:var(--primary);
    color:#fff;
}

.int-trust-card h4{
    margin-top:8px;
    font-size:var(--fs-card-sm);
    font-weight:700;
    color:var(--ink);
}

.int-trust-card p{
    margin-top:8px;
    font-size:clamp(14px,1.1vw,18px);
    line-height:1.45;
    color:var(--ink-soft);
}

/* The trust section's hover states: colour and fill stay, movement goes. */

@media (prefers-reduced-motion:reduce){

    .int-trust-points li::before,
    .int-trust-card,
    .int-trust-card::after,
    .int-trust-num{
        transition:none;
    }

    .int-trust-points li:hover::before{
        transform:none;
    }

    .int-trust-card:hover,
    .int-trust-card:focus-within{
        transform:none;
    }

    .int-trust-card:hover .int-trust-num,
    .int-trust-card:focus-within .int-trust-num{
        transform:none;
    }

}

/* --- Testimonials -------------------------------------------------------

   Figma geometry, per card frame (417.14 x 469.06):
     grey backing sheet   0,26.01   417.14 x 443.06   r12.17
     white card          49.48,61.59  318.68 x 370.95 r12.17
     avatar             118.95,0      179.03 round, overlapping the card top
   Everything below is those numbers as percentages of the frame so the
   card keeps its proportions at any column width.
------------------------------------------------------------------------ */

/* Intro pair above the three cards. The trust grid directly above it has no
   bottom margin of its own, so the spacing is set here. */

/* The cards above and this heading live in one .int-trust section, but they
   read as two: a card block, then a titled block with its own grid. So the
   seam gets a section-scale gap rather than the 72px block gap it had --
   one --space-section plus a block gap, which lands near a real
   section-to-section seam. Two sections meet at one --space-section from
   each side, so that is exactly what this seam gets. */

.int-testimonials-title{
    /* Was exactly the two-section seam this file's note above describes. The
       block reads as its own section rather than as the tail of the trust
       grid, so it gets more room than a seam -- but 2.75 of them left the
       heading marooned below a screen of blank, so it is 2 now. */
    margin-top:calc(var(--space-section) * 2);
}

.int-testimonials-lead{
    max-width:880px;
    margin-inline:auto;
}

.int-testimonials{
    /* Opened up with the space above the heading, so the lead is not left
       tight against the row of cards. */
    margin-top:var(--space-section-sm);
    margin-bottom:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.int-testimonial{
    --tst-ring:var(--primary-50);
    --tst-glow:rgba(255,102,0,.25);
    --tst-backing:#DCD9D9;
    position:relative;
    padding:14.8% 11.9% 8.8%;
    text-align:center;
}

/* Card 1 carries the green accent in Figma; the other two are orange. */

.int-testimonial.is-green{
    --tst-ring:var(--primary-50);
    --tst-glow:rgba(255,102,0,.25);
}

/* The backing sheet that makes it read as a stack of prints. */

.int-testimonial::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:6.2%;
    bottom:0;
    border-radius:12.17px;
    background:var(--tst-backing);
    transform:rotate(4deg);
    transform-origin:50% 60%;
}

.int-testimonial-avatar{
    position:absolute;
    top:0;
    left:50%;
    z-index:2;
    width:42.9%;
    aspect-ratio:1;
    transform:translateX(-50%);
    border:1.43px solid var(--tst-ring);
    border-radius:50%;
    object-fit:cover;
    box-shadow:3.58px 2.86px 2.86px rgba(0,0,0,.25);
}

.int-testimonial-card{
    position:relative;
    z-index:1;
    padding:37% 7% 9%;
    border-radius:12.17px;
    background:radial-gradient(circle at -27% 117%,#FFFFFF 100%);
    box-shadow:
        7.16px 7.16px 7.16px rgba(0,0,0,.25),
        0 2.86px 14.32px var(--tst-glow);
    transition:transform var(--dur-base) var(--ease-out);
}

.int-testimonial:hover .int-testimonial-card{
    transform:translateY(-6px);
}

/* Oversized closing quote — Instrument Sans Bold Italic, #CFEFD7. */

.int-testimonial-mark{
    position:absolute;
    top:2%;
    right:8%;
    font-family:var(--font-quote);
    font-style:italic;
    font-weight:700;
    font-size:92px;
    line-height:1;
    color:#CFEFD7;
    pointer-events:none;
    user-select:none;
}

.int-testimonial-verified{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 10px 2px 3px;
    border-radius:14.32px;
    background:rgba(2,171,45,.19);
    font-size:14.32px;
    font-weight:600;
    color:#02AB2D;
    white-space:nowrap;
}

.int-testimonial-verified img{
    width:16.47px;
    height:16.47px;
    object-fit:contain;
}

.int-testimonial figcaption{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.int-testimonial figcaption strong{
    font-size:17.19px;
    font-weight:700;
    color:var(--ink);
}

.int-testimonial-role{
    font-size:14.32px;
    font-weight:600;
    color:var(--primary);
}

/* 4 stars, gradient #FFEE00 -> #F1981C. */

.int-testimonial-stars{
    margin-top:8px;
    display:flex;
    justify-content:center;
    gap:2.86px;
}

.int-testimonial-stars i{
    width:16.42px;
    height:18.92px;
    background:linear-gradient(180deg,#FFEE00 0%,#F1981C 100%);
    -webkit-mask:var(--star-shape) center/contain no-repeat;
    mask:var(--star-shape) center/contain no-repeat;
    --star-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .6l3.2 7.4 8 .7-6 5.3 1.8 7.9L12 17.7 5 21.9l1.8-7.9-6-5.3 8-.7z'/%3E%3C/svg%3E");
}

.int-testimonial blockquote{
    margin-top:12px;
    font-size:17.19px;
    line-height:1.45;
    color:var(--ink-soft);
}

/* Two green chips close the card out in Figma. They carry only the check
   glyph there — no label was ever filled in. */

/* ==========================
   CAREER SUPPORT
========================== */

.int-support{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

/* Figma stacks the cards each 20px wider than the one above
   (1250 / 1270 / 1290), so they read as layers. Was four in the original
   design; the fourth (Portfolio & GitHub Review, 1310px) was removed. */

.int-support{
          /* pichla card kitna dikhega — badhao to zyada peek */
    --runway:30vh;        /* har card kitni der screen pe ruka rahega */
    --nav-clear:20px;   /* navbar ke neeche clear rehne ke liye */
}

.int-support-row{
    position:sticky;
    margin-inline:auto;
    margin-top:var(--space-block);
    margin-bottom:var(--runway);
    display:grid;
    /* Picture column widened from 520px; the text column is 1fr, so it
       gives up exactly what the media gains. */
    grid-template-columns:600px 1fr;
    grid-template-areas:
        "media text"
        "meta  meta";
    gap:44px;
    align-items:center;
    padding:40px 50px;
    border:1px solid var(--primary);
    border-radius:var(--r-40);
    background:#fff;
    box-shadow:0 24px 60px rgba(0,0,0,.10);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-support-row:hover{
    transform:translateY(-4px);
    box-shadow:var(--glow);
}

[data-reveal].int-support-row{
    transform:none;
}

.int-support-row.is-layer-2[data-reveal]{ transition-delay:110ms; }
.int-support-row.is-layer-3[data-reveal]{ transition-delay:220ms; }

.int-support-row.is-layer-1{ max-width:1250px; top:100px; z-index:1; }
.int-support-row.is-layer-2{ max-width:1270px; top:100px; z-index:2; }

/* Last card in the stack. Every row carries margin-bottom:var(--runway)
   to give itself scroll distance while it is stuck; on the final one that
   margin has nothing after it to scroll past. It used to be cancelled with
   translateY(-1 * runway), but a transform only moves the paint — the 30vh
   still sat in the layout, so the hole was there twice over and the next
   section tried to swallow both with a flat margin-top:-350px. Two of the
   three terms scaled with the viewport and the third did not, so the hole
   grew with the window: 245px at 900px tall, 1214px at 2500px (a browser
   at 25% zoom). Removing the margin removes the space for real, at every
   size, and needs no counter-margin downstream.
   This lived on is-layer-4 until that row (Portfolio & GitHub Review)
   was removed — it belongs to whichever row ends the stack. */

.int-support-row.is-layer-3{
    max-width:1290px;
    top:100px;
    z-index:3;
    margin-bottom:0;
    /* The closing card sits on the peach radial in Figma. */
    background:radial-gradient(circle at 33% 100%,#FFDEC8 0%,#FFFFFF 100%);
}

.int-support-media{
    grid-area:media;
    border:1px solid var(--primary-50);
    border-radius:var(--r-40);
    background:var(--grad-media);
    overflow:hidden;
    position:relative;
    isolation:isolate;
    contain:paint;
}

.int-support-media img{
    width:100%;
    height:auto;
    object-fit:cover;
}

/* Figma overlaps two screenshots inside the gradient panel: one pinned to
   the top-left corner, one to the bottom-right. */

.int-support-stack{
    position:relative;
    aspect-ratio:520 / 400;
    overflow:hidden;
    border-radius:var(--r-40);
    contain:paint;
}

.int-support-stack img{
    position:absolute;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    height:auto;
    max-width:100%;
}

.int-support-stack img:first-child{
    top:0;
    left:0;
    width:76%;
    max-width:76%;
    border-radius:var(--r-40) 0 12px 0;
}

.int-support-stack img:last-child{
    right:0;
    bottom:0;
    width:64%;
    max-width:64%;
    border-radius:12px 0 var(--r-40) 0;
}

/* Panels that carry a single icon instead of screenshots. */

.int-support-icon{
    display:grid;
    place-items:center;
    aspect-ratio:520 / 400;
    padding:70px;
}

.int-support-icon img{
    width:100%;
    max-width:190px;
    height:auto;
}

/* Panels carrying one full screenshot/collage rather than the small icon.
   Same panel ratio as its neighbours so the stacked rows stay in rhythm, but
   contain rather than cover: the job-referral collage is square against a
   1.3:1 panel, and cover would slice off its top and bottom rows of chats.
   The panel gradient shows through the side gaps. */

.int-support-shot{
    display:grid;
    place-items:center;
    aspect-ratio:520 / 400;
    padding:18px;
}

.int-support-shot img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:16px;
}

/* For shots that already carry their own framing and match the panel ratio,
   so they can run edge to edge instead of sitting inside a second frame. */

.int-support-shot--bleed{
    padding:0;
}

.int-support-shot--bleed img{
    object-fit:cover;
    border-radius:0;
}

.int-support-text{
    grid-area:text;
}

.int-support-text h3{
    display:flex;
    align-items:center;
    gap:20px;
    font-family:var(--font-sans);
    font-size:clamp(21px,2.3vw,32px);
    font-weight:600;
    color:var(--ink);
}

.int-support-text h3 i{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    font-size:26px;
    color:var(--primary);
}

/* Figma wraps the 48px icon in a peach rgba(255,102,0,.2) tile, r15. */

.int-support-icon-tile{
    flex:none;
    display:grid;
    place-items:center;
    padding:10px;
    border-radius:15px;
    background:var(--primary-20);
}

.int-support-icon-tile img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.int-support-lead{
    margin-top:10px;
    font-size:clamp(14px,1.25vw,18px);
    font-weight:400;
    color:var(--ink);
}

.int-support-text ul{
    margin-top:24px;
    list-style:none;
    display:grid;
    gap:20px;
}

.int-support-text li{
    position:relative;
    padding-left:40px;
    font-size:clamp(14px,1.3vw,21px);
    line-height:1.4;
    color:var(--ink);
}

/* 24px peach disc with an inset orange highlight, per Figma. */

.int-support-text li::before{
    content:"";
    position:absolute;
    left:0;
    top:.1em;
    width:24px;
    height:24px;
    border:.5px solid rgba(255, 102, 0, 0.71);
    border-radius:50%;
    background:var(--primary-20);
    box-shadow:inset -4px -4px 4px rgba(255,102,0,.55);
}

.int-support-meta{
    grid-area:meta;
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}

/* Figma gives these chips their own "Hover effect" variant:
   #FFF7F2 fill, #FFD8BF rule, 40px radius, icon + label. */

.int-support-meta span{
    display:inline-flex;
    align-items:center;
    gap:24px;
    padding:10px 20px;
    border:1px solid #FFD8BF;
    border-radius:var(--r-40);
    background:#FFF7F2;
    font-size:clamp(14px,1.15vw,21px);
    color:var(--ink-600);
    cursor:default;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-support-meta span:hover{
    transform:translateY(-3px);
    border-color:var(--primary);
    color:var(--primary);
    box-shadow:var(--glow);
}

.int-support-meta img{
    width:40px;
    height:40px;
    object-fit:contain;
}

/* ==========================
   DAILY RHYTHM
========================== */
/* ===================== DAILY RHYTHM (wireframe style) ===================== */

/* faint grid pattern - subtle, uniform everywhere, no patchy fade */

/* remove the patchy radial glow completely */

/* Daily Rhythm desktop section defined below */
/* ==========================
   MENTORS

   Figma runs this row as a horizontal scroller, so it is a
   marquee here. Wrap .int-mentors-grid in .bao-marquee and
   give it .bao-marquee-track to auto-scroll.
========================== */

.int-mentors{
    /* Was trimmed to 16px, then 32px, to sit close under .int-rhythm-perks —
       still read as visibly tighter than every other section gap on the
       page. Dropped the special case: top now matches the standard section
       gap like the bottom already does. */
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

/* This one carries a hand-placed break before "it is someone", so it needs
   room for the longer first line rather than the shared 760px measure. */
.int-mentors .int-subheading{
    max-width:980px;
}

.int-mentors-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:48px;
}

.bao-marquee .int-mentors-grid{
    display:flex;
    gap:48px;
}

/* Card holds the photo full-bleed on a shared brand gradient panel, with the
   name and role on a clean white body below. */

/* No frame of its own: the dark panel baked into each image is the card
   now, and a second box around it read as a box inside a box. The image's
   white margin sits on the section's white, so nothing shows around the
   panel except the head breaking out over it. */
.int-mentor-card{
    flex:none;
    width:324px;
    padding:0;
    background:transparent;
    text-align:center;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transition:transform var(--dur-base) var(--ease-out);
}

.int-mentor-card:hover{
    transform:translateY(-8px);
}

.int-mentor-media{
    position:relative;
    /* Square, matching the pre-composed mentor images. These are built to
       one shared template (see assets/images/mentors/) with the subject cut
       out and dropped on the same orange blob, already cropped to the same
       head size and position — so the frame just needs to not distort them.
       The old 4/3 frame plus per-card --fx/--fy nudges is gone with them. */
    aspect-ratio:1/1;
    background:#fff;
    overflow:hidden;
}

.int-mentor-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform var(--dur-slow) var(--ease-out);
}

.int-mentor-card:hover .int-mentor-media img{
    transform:scale(1.06);
}

.int-mentor-body{
    /* Left-aligned, unlike the rest of the card: the name and the role sit
       as a block under the photo the way a profile line reads, rather than
       centred captions. */
    padding:16px 18px 20px;
    text-align:left;
}

/* Name and the LinkedIn mark share a baseline row. */
.int-mentor-name{
    display:flex;
    align-items:center;
    gap:8px;
}

.int-mentor-card h4{
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
}

/* Sits in the bottom-right of the dark panel that is baked into each
   mentor image. The panel runs to x 94.5% and the bottom of the frame
   (see the generator's PANEL_* values), so these insets keep the badge
   inside it with a consistent margin. */
.int-mentor-badge{
    position:absolute;
    right:9%;
    bottom:6%;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:8px;
    background:#fff;
    color:#0A66C2;   /* LinkedIn brand blue */
    font-size:15px;
    line-height:1;
    box-shadow:0 2px 10px rgba(0,0,0,.28);
}

.int-mentor-role{
    display:block;
    margin-top:6px;
    font-size:14.5px;
    font-weight:500;
    line-height:1.45;
    /* Muted, so the name leads and the employer below still reads clearly. */
    color:var(--ink-500);
}

/* Company / institution names without a logo asset — weight and ink carry
   the emphasis instead. */
.int-mentor-role b{
    font-weight:700;
    color:var(--ink-800);
}

/* Employer logos, sized by height so each keeps its own width; they stand
   in for the company name, so the alt text carries it. */
.int-mentor-logo{
    height:15px;
    width:auto;
    display:inline-block;
    vertical-align:-3px;
}

/* The current employer, on its own line above the past ones. */
.int-mentor-logo--lead{
    height:18px;
    vertical-align:-4px;
}

/* The BAOIAM mark is a thin, multi-colour wordmark — it needs more height
   than the solid black ones beside it before the letterforms read. */
.int-mentor-logo[alt="BAOIAM"]{
    height:20px;
    vertical-align:-5px;
}

/* ==========================
   CERTIFICATION

   Restyled to match the reference: a flat, unboxed bullet list
   (orange dot only, no card/border) plus a "Get Your Certificate"
   CTA button under it.
========================== */

/* Trimmed from 90px: the certificate card below was scaled down, so the
   section no longer needs the taller band to sit comfortably. */
.int-cert{
    padding:var(--space-section-sm) 0;
    background:
        repeating-linear-gradient(0deg,rgba(255,102,0,.07) 0 1px,transparent 1px 96.34px),
        repeating-linear-gradient(90deg,rgba(255,102,0,.07) 0 1px,transparent 1px 68.52px),
        radial-gradient(circle at 5% 11%,#FFE0CC 0%,#FFFFFF 100%);
}

/* The copy column was 403px, too narrow for this heading to fall in two
   lines. Shrinking the certificate freed the room to widen it. */
.int-cert-inner{
    display:grid;
    grid-template-columns:minmax(0,500px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

.int-cert-right{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* For the frame's hover tilt. It sits on the frame, not here — this
       element carries data-reveal="right", whose reveal animates transform
       and would cancel the tilt. */
    perspective:1200px;
}

.int-cert-left .int-heading-left{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    /* Two even lines rather than breaking after "That" and leaving
       "Represents" stranded on a line of its own. */
    text-wrap:balance;
}

/* The four bullets that used to sit under this are sentences in it now, the
   way the course pages read, so it carries the whole column. */

.int-cert-lead{
    margin-top:14px;
    font-size:15px;
    line-height:1.6;
    /* Justified, the way the course pages' certificate copy is set. */
    text-align:justify;
    color:var(--ink-800);
}

/* Matched to the course pages: the three certificate buttons were sized for
   a much larger label than every other control around them. */

.int-cert-cta{
    display:inline-block;
    position:relative;
    overflow:hidden;
    margin-top:32px;
    padding:11px 30px;
    border-radius:var(--r-50);
    font-size:15px;
}

.int-cert-frame{
    box-sizing:border-box;
    display:grid;
    grid-template-areas:"cert";
    align-items:center;
    justify-items:center;
    width:100%;
    /* Was 780px, which made the certificate the tallest thing on the page
       and pushed the section past 800px of height. 600 keeps the document
       legible while letting the section breathe. */
    max-width:600px;
    min-width:0;
    padding:18px;
    border:2px solid var(--primary);
    border-radius:var(--r-40);
    background:#fff;
    text-align:center;
    overflow:hidden;
    position:relative;
}

/* The frame tips toward the cursor, same as the course pages.
   js/animations.js only writes --tilt-x/--tilt-y; CSS owns everything
   else, so with the script blocked the frame simply sits flat. */

.int-cert-frame{
    transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
    will-change:transform;
}

/* Track the cursor closely while hovering; the slower transition above is
   what eases the frame back to flat once the pointer leaves. */

.int-cert-frame.is-tilting{
    transition:transform .12s linear, box-shadow .3s var(--ease-out);
    box-shadow:0 26px 60px -28px rgba(255,102,0,.55);
}

@media (prefers-reduced-motion:reduce){

    .int-cert-frame{
        transform:none;
        transition:none;
    }

}

.int-cert-shot{
    grid-area:cert;
    width:100%;
    min-width:0;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    display:block;
    animation:certFlip 10s var(--ease-soft) infinite;
}

.int-cert-shot:last-child{
    grid-area:cert;
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    animation-delay:5s;
}

@keyframes certFlip{
    0%   { opacity:0; }
    4%   { opacity:1; }
    42%  { opacity:1; }
    46%  { opacity:0; }
    100% { opacity:0; }
}

@media (prefers-reduced-motion:reduce){

    .int-cert-shot{
        animation:none;
    }

    .int-cert-shot:last-child{
        opacity:0;
    }

}


.int-cert-actions{
    margin-top:32px;
    display:flex;
    justify-content:center;
    /* 78px was set when the pair was 276px wide each; at the smaller size it
       left them stranded at opposite edges of the frame. */
    gap:24px;
}

.int-cert-actions .int-btn-ghost,
.int-cert-actions .int-btn-primary{
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
    min-width:0;
    width:190px;
    height:42px;
    padding:0;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
}

/* The outlined one fills in on hover so the pair reads as one control set
   rather than two unrelated states. Elsewhere on the page .int-btn-ghost
   keeps its light tint. */

.int-cert-actions .int-btn-ghost:hover{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--glow);
}

.int-cert-actions .int-btn-ghost:active{
    transform:translateY(-1px) scale(.98);
}

/* Sheen sweep, shared by all three. It is a positioned pseudo-element, so
   it paints over the label — which is what a gloss should do. Keep it
   translucent and keep pointer-events off it. It parks off the left edge
   and only moves while hovered. */

.int-cert-cta::after,
.int-cert-actions .int-btn-primary::after,
.int-cert-actions .int-btn-ghost::after{
    content:"";
    position:absolute;
    top:0;
    left:-140%;
    width:60%;
    height:100%;
    transform:skewX(-22deg);
    background:linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 100%);
    pointer-events:none;
}

.int-cert-cta:hover::after,
.int-cert-actions .int-btn-primary:hover::after,
.int-cert-actions .int-btn-ghost:hover::after{
    animation:int-cert-sheen .75s var(--ease-out);
}

@keyframes int-cert-sheen{
    to{ left:140%; }
}

@media (prefers-reduced-motion:reduce){

    .int-cert-cta:hover::after,
    .int-cert-actions .int-btn-primary:hover::after,
    .int-cert-actions .int-btn-ghost:hover::after{
        animation:none;
    }

}

/* ==========================
   CERTIFICATE PREVIEW MODAL
========================== */
.int-cert-modal {
    border: none;
    border-radius: 20px;
    padding: 0;
    background: transparent;
    max-width: 94vw;
    max-height: 94vh;
    overflow: visible;
    margin: auto;
}

.int-cert-modal::backdrop {
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: certBackdropFade .25s ease-out;
}

.int-cert-modal-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid rgba(255, 102, 0, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    animation: certModalPop .3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes certModalPop {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes certBackdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.int-cert-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FF6600;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 102, 0, 0.45);
    transition: transform .2s ease, background .2s ease;
    z-index: 20;
}

.int-cert-modal-close:hover {
    transform: scale(1.1);
    background: #e65c00;
}

.int-cert-modal-img-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #fff8f3;
    border: 1px solid rgba(255, 102, 0, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.int-cert-modal-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.int-cert-modal-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
}

.int-cert-modal-footer .int-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.int-cert-modal-footer .int-btn-primary:hover {
    transform: translateY(-2px);
    background: #e65c00;
}

@media (max-width: 600px) {
    .int-cert-modal-card {
        padding: 10px;
        border-radius: 14px;
        max-width: 90vw;
    }
    .int-cert-modal-close {
        top: -10px;
        right: -10px;
        width: 32px;
        height: 32px;
        font-size: 19px;
    }
    .int-cert-modal-footer .int-btn-primary {
        padding: 8px 24px;
        font-size: 12.5px;
    }
}

/* ==========================
   FAQ

   Restyled to match the reference: solid orange plates with white
   text and a white +/- chip, instead of the white card + orange icon
   chip. Question/answer copy is unchanged.
========================== */

.int-rhythm{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.int-rhythm-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:665px 1fr;
    gap:76px;
    align-items:start;
}

/* --- Timeline --- */

.int-timeline{
    position:relative;
    padding-left:68px;
}

.int-timeline::before{
    content:"";
    position:absolute;
    left:11px;
    top:12px;
    bottom:12px;
    width:2px;
    background:var(--border-grey);
}

.int-timeline-row{
    position:relative;
    margin-bottom:34px;
}

/* 24px dot on the rail, plus the short connector into the card. */

.int-timeline-row::before{
    content:"";
    position:absolute;
    left:-68px;
    top:50%;
    width:24px;
    height:24px;
    margin-top:-12px;
    border-radius:50%;
    background:var(--primary);
    transition:transform var(--dur-base) var(--ease-spring);
}

.int-timeline-row::after{
    content:"";
    position:absolute;
    left:-44px;
    top:50%;
    width:44px;
    height:2px;
    background:var(--border-grey);
}

.int-timeline-row:hover::before{
    transform:scale(1.18);
}

.int-timeline-card{
    display:flex;
    align-items:center;
    gap:20px;
    padding:10px;
    border:1px solid var(--primary-35);
    border-radius:var(--r-25);
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.int-timeline-card:hover{
    transform:translateX(6px);
    border-color:var(--primary);
    box-shadow:var(--glow);
}

/* Icon sits in a rgba(255,102,0,.1) tile, r10, per Figma. */

.int-timeline-icon{
    flex:none;
    display:grid;
    place-items:center;
    padding:10px;
    border-radius:10px;
    background:var(--primary-10);
}

.int-timeline-icon img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.int-time{
    flex:none;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--ink);
}

/* --- Perks row: was completely unstyled (no rules existed at all), so the
   five items just stacked one under another full-width. Grid gives them a
   proper row and wraps down as the viewport narrows. --- */

/* Sits on the grid's own measure -- both are inside the same container --
   so the heading and the five cards share one pair of edges. The grid's own
   24px top margin collapses into this one rather than adding to it. */

.int-perks-head{
    margin-bottom:var(--space-block);
}

.int-perks{
    margin-top:24px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    /* 32px here cost each card 26px of its own width. The cards carry a
       border and a shadow of their own, so they read as separated at 18
       just as well, and the copy inside gets that width back. */
    gap:18px;
}

.int-perk{
    display:flex;
    flex-direction:column;
    gap:12px;
    /* Side padding trimmed to buy the copy measure: five cards across a
       1358px row leave each one 246px, and the longest of these paragraphs
       needs 240px of text width to hold three lines. */
    padding:24px 14px;
    border:1px solid rgba(255,102,0,.16);
    border-radius:var(--r-20);
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.int-perk:hover{
    transform:translateY(-6px);
    border-color:var(--primary-35);
    box-shadow:0 14px 34px rgba(255,102,0,.14);
}

.int-perk-icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
}

.int-perk-icon img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.int-perk h5{
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:700;
    color:var(--ink);
}

.int-perk p{
    margin-top:2px;
    font-family:var(--font-sans);
    font-size:14.5px;
    line-height:1.5;
    color:var(--ink-800);
}

@media (max-width:1200px){

    .int-perks{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

/* Responsive handled in main media queries below */

.int-rhythm-perks{
    /* The bottom used to be held at 16px so "Meet the Mentors" read as the
       next thing in this block rather than a new section. It reads as a new
       section either way -- it has its own title, lead and grid -- and at
       16px + the mentors' own 80px the seam came to 96px against 138-180px
       everywhere else on this page, which is what made it look pinched.
       The compact section tier now, so the seam lands at 144px without
       claiming a full section edge for what is a trailing strip.
       Top keeps its own smaller gap: that boundary is with the daily-rhythm
       timeline, which is a genuinely different section. */
    /* Top was 24px because this was a trailing strip with no header of its
       own -- five cards arriving under the timeline. It has a title and a
       lead now, so it opens like the sections around it. */
    padding:clamp(56px,5.6vw,84px) 0 var(--space-section-sm);
    background:#FFFFFF;
}

/* ==========================
   DAILY RHYTHM — from feat-akanksha, kept as-authored
========================== */

.rt-section{
  position: relative;
  /* margin-top was -350px, hand-tuned to swallow the sticky stack's
     trailing runway above. The stack now ends flush (see .is-layer-3), so
     there is nothing to claw back and this section just needs its own
     cushion. */
  padding: 48px 0 24px;
  overflow: hidden;
  background: #FFFFFF;   /* solid white, no gradient patch */
}

/* faint grid pattern - subtle, uniform everywhere, no patchy fade */
.rt-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 3px),
    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 3px);
  background-size: 80px 60px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 280px, #000 280px);
          mask-image: linear-gradient(180deg, transparent 0, transparent 280px, #000 280px);
  pointer-events:none;
}

.rt-section::after{
  content: none;
}

.rt-heading-wrap{
  position: relative;
  z-index: 2;
  text-align: center;
  /* 150px was set when this heading was 55px and two lines; at one line
     it left a band of empty page between the title and the timeline. 64
     then read as the heading sitting on the timeline -- 96 is the middle
     of the two. */
  padding: 0 20px 96px;
}

.rt-heading{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  /* Was 55px, far larger than every other section title on the page. */
  font-size: var(--fs-section);
  line-height: 1.2;
  color: #0a0a0a;
  margin: 0;
}

.rt-timeline{
  position: relative;
  z-index: 2;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* vertical orange line */
.rt-timeline::before{
  content:"";
  position:absolute;
  left: 60.5px;
  top: -52px;
  bottom: 0;
  width: 3px;
  background: #ec5c09;
}

.rt-row{
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 50px;
  /* Was 260px — the white card and the image box both stretch to match
     (align-items:stretch), so shrinking this alone shrinks both. */
  min-height: 158px;
}

.rt-marker{
  flex: 0 0 112px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}

.rt-time{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 54px;
  padding: 0 10px;
  background: #FFF3E8;
  border: 2px solid #FFC896;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #ee5b0ba5;
}

.rt-card{
  flex: 1 1 0;
  box-sizing: border-box;
  background: #ffffff;
  /* Was a pale orange that all but disappeared against the card. Black at
     the same weight, so the box reads as an outline rather than a tint.
     Border only -- the fill, the radius and the shadow are unchanged. */
  border: 2px solid #0A0A0A;
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 6px 20px rgba(255, 106, 26, 0.06);
}

.rt-card h4{
  font-family: 'Poppins', sans-serif;
  font-weight:700;
  font-size:var(--fs-card);
  color: #0a0a0a;
  margin: 0 0 10px;
}

.rt-card p{
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: #555555;
  margin: 0;
}

.rt-box{
  flex: 1.05 1 0;
  box-sizing: border-box;
  position: relative;
  border-radius: 22px;
  border: 2px solid #ffbc74;
  background: linear-gradient(120deg, #FFFBF6 0%, #FFE9CE 100%);
  overflow: hidden;
}

.rt-box img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Daily rhythm responsive handled in main media queries */

/* .got-questions-container carries its own --space-section on top, so 90px
   here stacked to 152px of empty page above the heading. */

.int-faq{
    padding:var(--space-gap) 0 var(--space-section-sm);
    background:
        radial-gradient(circle at 96% 72%,rgba(255,102,0,.2) 0%,rgba(255,255,255,.2) 100%),
        radial-gradient(circle at 5% -29%,#FFE2CF 0%,#FFFFFF 100%);
}



/* ==========================
   COUNSELLOR
========================== */

/* Figma keeps the counsellor block and the CTA under it on ONE peach
   graph-paper surface — same 68.52 x 96.34 lattice as .int-track and
   .int-cert, with the wash pooling off the bottom-left corner and a
   faint orange bloom off the right edge. Both sections carry it so the
   boundary between them stays invisible. */
.int-counsellor{
    padding:var(--space-section-sm) 0;
    background:
        repeating-linear-gradient(0deg,rgba(255,102,0,.07) 0 1px,transparent 1px 96.34px),
        repeating-linear-gradient(90deg,rgba(255,102,0,.07) 0 1px,transparent 1px 68.52px),
        radial-gradient(circle at 100% 34%,rgba(255,102,0,.09) 0%,rgba(255,255,255,0) 55%),
        radial-gradient(circle at -8% 118%,#FFDFCB 0%,#FFFFFF 60%);
}

/* Three tracks — copy, photo, form. The photo sits in the band that the
   two-column version left empty beside the heading, so it fills the gap
   sideways instead of making the section taller. */
.int-counsellor-inner{
    display:grid;
    /* 562px put "Not Sure Which Internship" over two lines on its own, so
       the heading ran to three. This split gives the copy 680px at full
       width. Proportional rather than a fixed 680px: pinned, it starved the
       form below 1366 and the field labels spilled out of the card. */
    grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

/* Nudged off the container's left edge so the photo and heading sit in
   from the section boundary together rather than starting hard against
   it. Dropped at the stacked breakpoint below. */
.int-counsellor-left{
    padding-left:clamp(16px,3vw,56px);
    /* The column is the taller of the two, so it already sat at the top of
       the row; this lifts it half into the section's own 48px of padding so
       the block sits higher in the band. The form is left where it is. */
    margin-top:-24px;
}

/* Sits above the heading and fills the slack the two short lines of copy
   used to leave empty beside the tall form. The negative bottom margin
   pulls the heading up into the artwork's faded lower edge so the two
   read as one block rather than a photo with a caption. */
.int-counsellor-photo{
    display:block;
    width:100%;
    max-width:300px;
    height:auto;
    margin-bottom:-26px;
}

/* Still larger than the usual --fs-section title — the left column is a
   short block beside a tall form — but 56px was wide enough that the
   heading broke to three lines and the copy to five. */
.int-counsellor-left h2{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
}

.int-counsellor-left p{
    margin-top:14px;
    font-size:clamp(15px,1.25vw,18px);
    line-height:1.5;
    color:var(--ink);
}

/* Card border sampled off the Figma export: a 1.5px #FFAF7B hairline with
   a tight orange bloom behind it (~8px spread, offset down-right) — not the
   half-opacity brand border and hard 4px drop it carried before. */
.int-counsellor-form{
    padding:20px;
    border:1.5px solid #FFAF7B;
    border-radius:var(--r-22);
    background:var(--white);
    box-shadow:var(--glow-lg);
    transition:box-shadow var(--dur-base) var(--ease-out);
}

/* The whole card leans in while any field is being filled. */
.int-counsellor-form:focus-within{
    box-shadow:6px 6px 26px 0 var(--primary-35);
}

.int-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

/* Field labels are the smallest type on the card, not another body line:
   at 19px they read as loud as the section copy beside them and held the
   fields that far apart. Capped just under the 16px body step. */
.int-counsellor-form label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-family:var(--font-sans);
    font-size:clamp(13px,1vw,15px);
    font-weight:500;
    color:var(--ink);
}

.int-form-full{
    margin-bottom:14px;
}

/* Fields in the design are peach-outlined, not grey: 1.5px #FFB07B on a
   #FFFAF7 tint, 12px radius. Kept well under the export's 60px so the
   whole card stays short next to the heading — five fields at that
   height stacked into a wall of boxes. */
.int-counsellor-form input,
.int-counsellor-form select,
.int-counsellor-form textarea{
    padding:7px 12px;
    border:1.5px solid #FFB07B;
    border-radius:var(--radius-md);
    background:#FFFAF7;
    font-family:inherit;
    font-size:clamp(13px,0.95vw,15px);
    font-weight:400;
    color:var(--ink);
    outline:none;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-counsellor-form ::placeholder{
    color:var(--ink-500);
}

.int-counsellor-form input:hover,
.int-counsellor-form select:hover,
.int-counsellor-form textarea:hover{
    border-color:#FF9552;
}

.int-counsellor-form input:focus,
.int-counsellor-form select:focus,
.int-counsellor-form textarea:focus{
    border-color:var(--primary);
    background:var(--white);
    box-shadow:0 0 0 4px var(--primary-10);
}

/* Drawn as one line; resize is left on so it can grow. */
.int-counsellor-form textarea{
    min-height:34px;
    resize:vertical;
}

/* Scaled down with the fields above it — at 18px on 13px padding it was
   the one heavy element left on a card of slim inputs. Down again: 11px of
   padding on a 2px border still stood a good bit taller than the fields it
   closes, so the pill read as the heaviest thing on the card. */
.int-counsellor-form .int-btn-primary{
    padding:8px 26px;
    border-width:1px;
    border-radius:var(--r-50);
    font-size:clamp(13.5px,1.05vw,15px);
    font-weight:600;
}

.int-form-status{
    display:none;
    margin-bottom:16px;
    font-size:14px;
}

.int-form-status.visible{
    display:block;
    animation:baoFadeUp var(--dur-base) var(--ease-out);
}

.int-form-status.error{
    color:#d93025;
}

.int-form-status.success{
    color:#188038;
}

/* ==========================
   CTA
========================== */

/* Continues the counsellor surface — the wash carries on down the left
   edge so the two sections read as one panel, the way Figma has them. */
.int-cta{
    padding:22px 0 30px;
    background:
        repeating-linear-gradient(0deg,rgba(255,102,0,.07) 0 1px,transparent 1px 96.34px),
        repeating-linear-gradient(90deg,rgba(255,102,0,.07) 0 1px,transparent 1px 68.52px),
        radial-gradient(circle at -8% 20%,#FFDFCB 0%,#FFFFFF 62%);
}

/* The banner was ~310px tall for a line, a paragraph and a button, and the
   whole middle-right of it was flat orange with nothing in it. Two changes:
   it comes down to about 240, and that empty stretch gets the concentric
   rings below rather than being left as a plain field.

   isolation:isolate so the decoration can sit at z-index:-1 -- above this
   element's own gradient, below its content -- without escaping into the
   section behind it. overflow:hidden keeps the rings inside the 40px
   corners. */

.int-cta-inner{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    /* Half the container it used to run to. Three items across only worked
       at ~1340px wide; at 760 the copy would have been squeezed to about
       190px between the illustration and the button, so the row becomes a
       grid instead -- illustration down the left across both rows, copy top
       right, button under the copy rather than out beside it. */
    width:100%;
    max-width:760px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
        "img text"
        "img action";
    align-items:center;
    gap:10px 22px;
    padding:18px 24px;
    border-radius:32px;
    background:var(--grad-cta);
}

/* Concentric rings: one repeating-radial-gradient rather than a stack of
   elements, masked back to a soft disc so the outermost ring fades out
   instead of ending on a hard edge. It breathes rather than spins -- a
   rotation would fight the sheen crossing it. */

.int-cta-inner::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:50%;
    /* Scaled with the panel. At 460 across a 760px banner the rings stopped
       being a texture behind the copy and became the loudest thing in it. */
    right:-44px;
    width:220px;
    height:220px;
    translate:0 -50%;
    border-radius:50%;
    background:repeating-radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1px 34px);
    -webkit-mask-image:radial-gradient(circle,#000 34%,transparent 71%);
    mask-image:radial-gradient(circle,#000 34%,transparent 71%);
    animation:intCtaRipple 9s var(--ease-out) infinite;
    pointer-events:none;
}

/* A slow band of light crossing the panel. Kept under 20% white: on a
   saturated orange anything brighter reads as a rendering artifact rather
   than as a highlight. */

.int-cta-inner::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%);
    translate:-100% 0;
    animation:intCtaSheen 7s var(--ease-out) 1.5s infinite;
    pointer-events:none;
}

@keyframes intCtaRipple{
    0%,100%{ transform:scale(1); opacity:.9; }
    50%    { transform:scale(1.07); opacity:.55; }
}

@keyframes intCtaSheen{
    0%      { translate:-100% 0; }
    55%,100%{ translate:100% 0; }
}

/* Sized to hug the illustration. It used to be a 472px panel around a
   270px image, so most of the white was empty margin -- and 284 was still
   setting the banner's height on its own. */
.int-cta-img{
    flex:none;
    display:grid;
    place-items:center;
    grid-area:img;
    /* max-width:30% is what shrank this to a thumbnail. The track it sits in
       is sized `auto`, so the percentage resolved against a width that was
       itself waiting on this element - the circular case, which browsers
       settle by treating the box as its minimum. A flat width in an
       intrinsic track, no percentage. */
    width:150px;
    padding:10px;
    border:1px dashed #fff;
    border-radius:18px;
    background:var(--grad-cta-panel);
}

.int-cta-img img{
    width:100%;
    max-width:130px;
    height:auto;
}

.int-cta-text h2{
    font-family:var(--font-sans);
    /* Was the shared section token, up to 32px. That was set for a banner
       running the full container; on one 760px wide it pushed the headline
       to two deep lines and drove most of the height. */
    font-size:clamp(18px,1.9vw,24px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
    color:#fff;
}

.int-cta-text{
    grid-area:text;
    min-width:0;
}

.int-cta-text p{
    margin-top:10px;
    /* Down a step with the banner. At 18px this paragraph ran five lines and
       was the thing the height was being built around. */
    font-size:clamp(13.5px,1.15vw,16px);
    line-height:1.5;
    /* Its own measure, so it does not stretch to whatever the row has spare
       and drag the banner back up. */
    max-width:54ch;
    text-wrap:pretty;
    color:#fff;
}

.int-cta-action{
    grid-area:action;
    position:relative;
    /* start, not stretch: a grid item fills its track by default, which
       would turn this pill into a bar the width of the copy above it. */
    justify-self:start;
    white-space:nowrap;
}

/* A ring leaving the button every few seconds. The eye has to land
   somewhere in a band this wide, and this is where it should land. */

.int-cta-action::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.8);
    animation:intCtaPulse 3s var(--ease-out) infinite;
    pointer-events:none;
}

@keyframes intCtaPulse{
    0%      { transform:scale(1); opacity:.8; }
    70%,100%{ transform:scale(1.32); opacity:0; }
}

/* All of it is decoration; none of it survives a reduced-motion setting.
   The rings and the ring around the button stay put rather than vanishing --
   they are part of the composition, it is only the movement that goes. */

@media (prefers-reduced-motion:reduce){

    .int-cta-inner::before,
    .int-cta-inner::after,
    .int-cta-action::after{
        animation:none;
    }

    .int-cta-inner::after{
        translate:0 0;
        opacity:.35;
    }

    .int-cta-action::after{
        opacity:.5;
    }

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1200px){

    .int-rhythm-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .int-timeline{
        max-width:665px;
    }

    .int-support-row{
        position:static;
        top:auto;
        /* Nothing sticks here, so the runway is not scroll distance any
           more — it is just 30vh of blank between cards. */
        margin-bottom:var(--space-block);
        grid-template-areas:
            "media"
            "text"
            "meta";
    }

    .int-track-card,
    .int-support-row,
    .int-cert-inner,
    .int-faq-inner,
    .int-counsellor-inner,
    .int-trust-top{
        grid-template-columns:1fr;
    }

    .int-counsellor-photo{
        display:block;
        max-width:220px;
        margin:0 auto 14px;
    }

    .int-counsellor-left{
        padding-left:0;
        /* Stacked, there is nothing beside it to sit high against. */
        margin-top:0;
    }

    .int-pillars-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:1100px){

    .int-skills-grid,
    .int-trust-grid,
    .int-mentors-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .int-testimonials{
        grid-template-columns:1fr;
    }

}

@media (max-width:900px){

    .int-strip-inner{
        padding:22px 24px;
    }

    /* Was flex-direction:column, which does nothing to a grid. Same intent
       expressed in the layout this now is. */
    .int-cta-inner{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "img"
            "text"
            "action";
        justify-items:center;
        text-align:center;
    }

    .int-cta-img{
        width:100%;
        max-width:100%;
    }

    .int-cta-action{
        justify-self:center;
    }

    .int-faq-side{
        text-align:left;
    }

    .int-cert-actions{
        gap:20px;
    }

}

@media (max-width:600px){

    /* Consistent compact typography matching About Us page */
    .int-heading{
        font-size:clamp(19px, 5vw, 24px) !important;
        line-height:1.25 !important;
        text-wrap:balance !important;
    }

    .int-subheading{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        max-width:94% !important;
        margin:8px auto 0 !important;
        text-wrap:balance !important;
    }

    /* Hero section */
    .int-hero{
        min-height:auto !important;
        padding:40px 0 28px !important;
    }

    .int-hero-content h1{
        font-size:clamp(20px, 5.5vw, 26px) !important;
        line-height:1.2 !important;
        text-wrap:balance !important;
    }

    .int-hero-content p{
        font-size:clamp(13px, 3.2vw, 15px) !important;
        line-height:1.55 !important;
        margin-top:12px !important;
        text-align:left !important;
        text-wrap:pretty !important;
    }

    .int-hero-content .int-btn-primary{
        margin-top:20px !important;
        padding:12px 24px !important;
        font-size:14.5px !important;
    }

    /* Feature Strip - Hidden on Mobile */
    .int-strip{
        display:none !important;
    }

    /* Pillars - 2x2 grid with proper left & right container margin */
    .int-pillars{
        margin-top:0 !important;
        padding:clamp(28px, 6vw, 44px) 16px !important;
        box-sizing:border-box !important;
        max-width:100% !important;
        margin-inline:auto !important;
    }

    .int-pillars-head{
        margin-bottom:14px !important;
        padding:0 !important;
    }

    .int-pillars-grid{
        display:grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap:10px !important;
        margin-top:14px !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .int-pillar-card{
        padding:15px 13px !important;
        border-radius:14px !important;
        border:1.5px solid var(--primary-35) !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        box-sizing:border-box !important;
    }

    .int-pillar-eyebrow{
        font-size:11px !important;
        font-weight:700 !important;
        letter-spacing:0.02em !important;
    }

    .int-pillar-card h5{
        font-size:14px !important;
        font-weight:700 !important;
        margin-top:5px !important;
        line-height:1.25 !important;
        color:var(--ink) !important;
    }

    .int-pillar-card p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:5px !important;
        color:var(--ink-700) !important;
    }

    /* Track category oval buttons: single horizontal scrollable line with proper margins */
    .int-track{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .int-track > .container{
        padding:0 16px !important;
    }

    .int-track-tabs{
        margin-top:16px !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        gap:8px !important;
        padding:8px 4px 14px !important;
        margin-inline:0 !important;
        justify-content:flex-start !important;
        scroll-snap-type:x mandatory !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        box-sizing:border-box !important;
    }

    .int-track-tabs::-webkit-scrollbar{
        display:none !important;
    }

    .int-track-tabs::after{
        content:'';
        flex:0 0 12px;
    }

    .int-tab{
        flex:0 0 auto !important;
        min-width:auto !important;
        min-height:auto !important;
        padding:8px 18px !important;
        border-radius:999px !important;
        font-size:13px !important;
        font-weight:600 !important;
        white-space:nowrap !important;
        scroll-snap-align:center !important;
        box-sizing:border-box !important;
    }

    /* Track card */
    .int-track-card{
        padding:18px 16px !important;
        border-radius:18px !important;
        gap:16px !important;
        margin-top:14px !important;
    }

    .int-track-right h3{
        font-size:16px !important;
        margin-top:8px !important;
    }

    .int-track-right p{
        font-size:13px !important;
        line-height:1.5 !important;
        margin-top:8px !important;
    }

    .int-track-tag{
        font-size:11.5px !important;
    }

    .int-track-right p + .int-track-tag,
    .int-track-list + .int-track-tag,
    .int-track-roles + .int-track-tag{
        margin-top:14px !important;
    }

    .int-track-list{
        margin-top:10px !important;
        gap:8px !important;
    }

    .int-track-list li{
        padding:5px 12px !important;
        font-size:12.5px !important;
        border-radius:8px !important;
    }

    .int-track-roles{
        margin-top:10px !important;
        gap:8px !important;
    }

    .int-track-roles li{
        padding:6px 14px !important;
        font-size:12px !important;
        border-radius:20px !important;
    }

    /* Track CTA */
    .int-track-cta{
        padding:20px 16px !important;
        border-radius:18px !important;
        gap:10px !important;
        margin-top:20px !important;
    }

    .int-track-cta p{
        font-size:13px !important;
        line-height:1.45 !important;
        text-wrap:balance !important;
    }

    .int-track-cta-btn{
        padding:10px 22px !important;
        font-size:13.5px !important;
        font-weight:700 !important;
    }

    .int-track-cta-note{
        font-size:11.5px !important;
    }

    /* Skills - Horizontal scrollable cards with clean edge padding */
    .int-skills{
        overflow:hidden !important;
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .int-skills > .container{
        padding:0 16px !important;
    }

    .int-skills-grid{
        display:flex !important;
        flex-direction:row !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        scroll-snap-type:x mandatory !important;
        -webkit-overflow-scrolling:touch !important;
        gap:14px !important;
        padding:12px 6px 22px 6px !important;
        margin-inline:0 !important;
        margin-top:16px !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        box-sizing:border-box !important;
    }

    .int-skills-grid::-webkit-scrollbar{
        display:none !important;
    }

    .int-skills-grid::after{
        content:'';
        flex:0 0 16px;
    }

    .int-skill-card{
        flex:0 0 255px !important;
        width:255px !important;
        max-width:80vw !important;
        scroll-snap-align:start !important;
        scroll-snap-stop:normal !important;
        padding:18px 16px 16px !important;
        border-radius:14px !important;
        box-sizing:border-box !important;
        box-shadow:0 4px 14px rgba(0,0,0,0.06) !important;
    }

    .int-skill-art{
        width:56px !important;
        height:56px !important;
        top:10px !important;
        right:10px !important;
    }

    .int-skill-head{
        padding-right:60px !important;
        padding-bottom:8px !important;
        gap:2px !important;
    }

    .int-skill-num{
        font-size:28px !important;
    }

    .int-skill-head h4{
        font-size:14.5px !important;
        padding-bottom:4px !important;
    }

    .int-skill-block{
        margin-top:12px !important;
    }

    .int-skill-block h5{
        font-size:11px !important;
        gap:5px !important;
    }

    .int-skill-block ul{
        margin-top:8px !important;
        gap:5px !important;
    }

    .int-skill-block li{
        font-size:12px !important;
        gap:6px !important;
        line-height:1.45 !important;
    }

    .int-skill-block li::before{
        width:9px !important;
        height:9px !important;
        margin-top:2px !important;
    }

    .int-skill-tools{
        margin-top:8px !important;
        gap:6px !important;
    }

    .int-tool{
        width:30px !important;
        height:30px !important;
        border-radius:6px !important;
    }

    .int-tool-mark{
        font-size:14px !important;
        width:16px !important;
        height:16px !important;
    }

    .int-skill-deliverables{
        margin-top:8px !important;
    }

    .int-skill-deliverables span{
        font-size:11px !important;
        gap:5px !important;
        padding:3px 4px !important;
    }

    .int-skill-deliverables span i{
        width:24px !important;
        height:24px !important;
        font-size:12px !important;
    }

    .int-skill-card > .int-skill-block:last-of-type{
        margin-bottom:14px !important;
    }

    .int-skill-cta{
        padding:9px 16px !important;
        font-size:12.5px !important;
        font-weight:700 !important;
    }

    .int-skill-cta i{
        width:18px !important;
        height:18px !important;
        font-size:10px !important;
    }

    /* Trust section & 4 cards in 2x2 grid with clean margins */
    .int-trust{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .int-trust > .container{
        padding:0 16px !important;
    }

    .int-trust-top{
        margin-top:16px !important;
        gap:16px !important;
    }

    .int-trust-points{
        padding:18px 16px !important;
        border-radius:18px !important;
    }

    .int-trust-points-eyebrow{
        font-size:11px !important;
    }

    .int-trust-points h3{
        font-size:16px !important;
        margin-top:6px !important;
    }

    .int-trust-points-list{
        margin-top:12px !important;
    }

    .int-trust-points-list li{
        padding:9px 0 !important;
        gap:10px !important;
        grid-template-columns:28px 1fr !important;
    }

    .int-trust-point-num{
        width:28px !important;
        height:28px !important;
        font-size:12px !important;
    }

    .int-trust-points-list strong{
        font-size:13.5px !important;
    }

    .int-trust-points-list p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:2px !important;
    }

    .int-trust-points-foot{
        font-size:12px !important;
        margin-top:10px !important;
        padding-top:10px !important;
    }

    /* 4 Trust Cards - 2x2 Side-by-side stack with balanced margins */
    .int-trust-grid{
        display:grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap:10px !important;
        margin-top:16px !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .int-trust-card{
        padding:15px 13px !important;
        border-radius:14px !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        box-sizing:border-box !important;
    }

    .int-trust-num{
        min-width:34px !important;
        padding:4px 9px !important;
        font-size:15px !important;
        border-radius:6px !important;
        align-self:flex-start !important;
    }

    .int-trust-card h4{
        font-size:14px !important;
        margin-top:6px !important;
        line-height:1.25 !important;
    }

    .int-trust-card p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:4px !important;
    }

    .int-testimonials-title{
        margin-top:clamp(28px, 6vw, 44px) !important;
        text-wrap:balance !important;
    }

    .int-testimonials-lead{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        max-width:94% !important;
        margin:8px auto 0 !important;
        text-wrap:balance !important;
    }

    /* 3 Vertical Verified Intern Cards */
    .int-testimonials{
        display:flex !important;
        flex-direction:column !important;
        gap:36px !important;
        max-width:350px !important;
        width:100% !important;
        margin:32px auto 0 !important;
        padding:0 8px !important;
        box-sizing:border-box !important;
    }

    .int-testimonial{
        padding:28px 0 0 !important;
        text-align:center !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .int-testimonial-avatar{
        width:68px !important;
        height:68px !important;
        top:0 !important;
        border-width:2px !important;
    }

    .int-testimonial-card{
        padding:44px 16px 18px !important;
        border-radius:14px !important;
        box-shadow:0 6px 18px rgba(0,0,0,0.08), 0 2px 10px var(--tst-glow) !important;
        box-sizing:border-box !important;
    }

    .int-testimonial-mark{
        font-size:52px !important;
        top:4px !important;
        right:10px !important;
    }

    .int-testimonial-verified{
        font-size:11px !important;
        padding:3px 9px !important;
        gap:4px !important;
        border-radius:12px !important;
    }

    .int-testimonial-verified img{
        width:13px !important;
        height:13px !important;
    }

    .int-testimonial figcaption{
        margin-top:8px !important;
        gap:1px !important;
    }

    .int-testimonial figcaption strong{
        font-size:15px !important;
        font-weight:700 !important;
    }

    .int-testimonial-role{
        font-size:12.5px !important;
        font-weight:600 !important;
    }

    .int-testimonial-stars{
        margin-top:6px !important;
        gap:2px !important;
    }

    .int-testimonial-stars i{
        width:13px !important;
        height:15px !important;
    }

    .int-testimonial blockquote{
        font-size:13px !important;
        line-height:1.5 !important;
        margin-top:8px !important;
    }

    .int-timeline-card{
        flex-wrap:wrap;
        gap:12px;
    }

    .int-rhythm-stat{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .int-mentors-grid,
    .int-form-row{
        grid-template-columns:1fr;
    }

    /* Career Support Section - Sticky Card Stacking Animation & 1-line Oval Buttons */
    .int-support{
        padding:clamp(28px, 6vw, 44px) 0 !important;
        overflow:visible !important;
    }

    .int-support > .container{
        padding:0 16px !important;
        overflow:visible !important;
    }

    .int-support-row{
        position:sticky !important;
        top:72px !important;
        margin-top:20px !important;
        margin-bottom:24vh !important;
        display:grid !important;
        grid-template-columns:100% !important;
        grid-template-areas:
            "media"
            "text"
            "meta" !important;
        gap:14px !important;
        padding:18px 14px !important;
        border:1px solid var(--primary) !important;
        border-radius:18px !important;
        box-shadow:0 12px 32px rgba(0,0,0,0.08) !important;
        background:#fff !important;
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .int-support-row.is-layer-1{ top:72px !important; z-index:1 !important; width:100% !important; max-width:100% !important; }
    .int-support-row.is-layer-2{ top:76px !important; z-index:2 !important; width:100% !important; max-width:100% !important; }
    .int-support-row.is-layer-3{
        top:80px !important;
        z-index:3 !important;
        width:100% !important;
        max-width:100% !important;
        margin-bottom:0 !important;
        background:radial-gradient(circle at 33% 100%, #FFDEC8 0%, #FFFFFF 100%) !important;
    }

    .int-support-media{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        max-height:none !important;
        border-radius:14px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
        display:block !important;
        position:relative !important;
        isolation:isolate !important;
        contain:paint !important;
    }

    .int-support-stack{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        aspect-ratio:16 / 10 !important;
        position:relative !important;
        border-radius:14px !important;
        overflow:hidden !important;
        contain:paint !important;
    }

    .int-support-stack img{
        position:absolute !important;
        height:auto !important;
        object-fit:cover !important;
    }

    .int-support-stack img:first-child{
        top:0 !important;
        left:0 !important;
        width:76% !important;
        max-width:76% !important;
        border-radius:14px 0 10px 0 !important;
    }

    .int-support-stack img:last-child{
        right:0 !important;
        bottom:0 !important;
        width:64% !important;
        max-width:64% !important;
        border-radius:10px 0 14px 0 !important;
    }

    .int-support-shot{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        aspect-ratio:16 / 10 !important;
        padding:10px !important;
        box-sizing:border-box !important;
        display:grid !important;
        place-items:center !important;
    }

    .int-support-shot img{
        width:100% !important;
        max-width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        border-radius:10px !important;
    }

    .int-support-shot--bleed{
        padding:0 !important;
    }

    .int-support-shot--bleed img{
        object-fit:cover !important;
        border-radius:0 !important;
    }

    .int-support-text{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .int-support-text h3{
        font-size:16px !important;
        gap:10px !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .int-support-icon-tile{
        padding:6px !important;
        border-radius:10px !important;
    }

    .int-support-icon-tile img{
        width:28px !important;
        height:28px !important;
    }

    .int-support-lead{
        font-size:13px !important;
        line-height:1.5 !important;
        margin-top:6px !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .int-support-text ul{
        margin-top:10px !important;
        gap:6px !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
        padding:0 !important;
    }

    .int-support-text li{
        font-size:12px !important;
        line-height:1.45 !important;
        padding-left:24px !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .int-support-text li::before{
        width:14px !important;
        height:14px !important;
        top:2px !important;
    }

    /* Oval Meta Buttons - Always in 1 Single Line */
    .int-support-meta{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:6px !important;
        margin-top:12px !important;
        width:100% !important;
    }

    .int-support-meta span{
        flex:1 1 0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        padding:7px 10px !important;
        border-radius:999px !important;
        font-size:12px !important;
        font-weight:600 !important;
        white-space:nowrap !important;
        box-sizing:border-box !important;
    }

    .int-support-meta img{
        width:18px !important;
        height:18px !important;
        flex-shrink:0 !important;
    }

    .int-faq-inner{
        padding:24px 14px;
    }

    /* Certification Section - Centered CTA, 1-Line Preview & Enroll Buttons */
    .int-cert{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .int-cert-inner{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
        text-align:center !important;
        padding:0 16px !important;
    }

    .int-cert-left{
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        padding:0 !important;
    }

    .int-heading.int-heading-left{
        font-size:clamp(19px, 5.2vw, 24px) !important;
        line-height:1.25 !important;
        text-align:center !important;
        margin:0 auto !important;
        text-wrap:balance !important;
    }

    .int-cert-lead{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        text-align:center !important;
        max-width:94% !important;
        margin:8px auto 0 !important;
        text-wrap:balance !important;
    }

    .int-cert-cta{
        margin:16px auto 0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:11px 26px !important;
        font-size:14px !important;
        font-weight:700 !important;
        border-radius:999px !important;
        text-align:center !important;
        width:auto !important;
    }

    .int-cert-right{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        margin-top:4px !important;
    }

    .int-cert-frame{
        display:grid !important;
        grid-template-areas:"cert" !important;
        align-items:center !important;
        justify-items:center !important;
        padding:8px !important;
        border-radius:18px !important;
        border-width:1.5px !important;
        width:100% !important;
        max-width:340px !important;
        margin:0 auto !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .int-cert-shot{
        grid-area:cert !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        border-radius:10px !important;
        box-sizing:border-box !important;
    }

    .int-cert-shot:last-child{
        grid-area:cert !important;
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
    }

    .int-cert-actions{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:12px !important;
        margin-top:16px !important;
        width:100% !important;
    }

    .int-cert-actions .int-btn-primary,
    .int-cert-actions .int-btn-ghost{
        width:140px !important;
        min-width:140px !important;
        max-width:140px !important;
        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
        padding:0 !important;
        border:1.5px solid var(--primary) !important;
        border-radius:999px !important;
        font-family:var(--font-sans) !important;
        font-size:13.5px !important;
        font-weight:700 !important;
        line-height:40px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        white-space:nowrap !important;
        box-sizing:border-box !important;
        flex:none !important;
        margin:0 !important;
    }

    .int-cert-actions .int-btn-primary{
        background:var(--primary) !important;
        color:#fff !important;
    }

    .int-cert-actions .int-btn-ghost{
        background:#fff !important;
        color:var(--ink) !important;
    }

    .int-timeline{
        padding-left:36px;
    }

    .int-timeline::before{
        left:6px;
    }

    .int-timeline-row::before{
        left:-36px;
        width:14px;
        height:14px;
        margin-top:-7px;
    }

    .int-timeline-row::after{
        left:-22px;
        width:22px;
    }

    /* Daily Rhythm Timeline Section */
    .rt-section{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .rt-heading-wrap{
        padding:0 16px 20px !important;
        text-align:center !important;
    }

    .rt-heading{
        font-size:clamp(19px, 5.2vw, 25px) !important;
        line-height:1.25 !important;
        text-wrap:balance !important;
    }

    .rt-timeline{
        padding:0 16px 0 12px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:20px !important;
        position:relative !important;
    }

    .rt-timeline::before{
        content:"" !important;
        position:absolute !important;
        left:37px !important;
        top:12px !important;
        bottom:20px !important;
        width:2.5px !important;
        background:#ec5c09 !important;
        display:block !important;
        z-index:1 !important;
    }

    .rt-row{
        display:grid !important;
        grid-template-columns:56px 1fr !important;
        grid-template-areas:
            "marker card"
            "marker box" !important;
        gap:8px 10px !important;
        min-height:auto !important;
        align-items:start !important;
        position:relative !important;
        z-index:2 !important;
    }

    .rt-marker{
        grid-area:marker !important;
        display:flex !important;
        align-items:flex-start !important;
        justify-content:center !important;
        padding-top:4px !important;
        flex:none !important;
        position:relative !important;
        z-index:3 !important;
    }

    .rt-time{
        min-width:52px !important;
        height:28px !important;
        padding:0 6px !important;
        font-size:12px !important;
        font-weight:800 !important;
        border-radius:8px !important;
        border:1.5px solid #FFC896 !important;
        background:#FFF3E8 !important;
        color:#ee5b0b !important;
        box-sizing:border-box !important;
    }

    .rt-card{
        grid-area:card !important;
        padding:14px 14px !important;
        border-radius:14px !important;
        border:1.5px solid #0A0A0A !important;
        background:#fff !important;
        box-shadow:0 4px 14px rgba(0,0,0,0.04) !important;
        box-sizing:border-box !important;
    }

    .rt-card h4{
        font-size:14.5px !important;
        font-weight:700 !important;
        margin:0 0 4px 0 !important;
        line-height:1.25 !important;
        color:#0a0a0a !important;
    }

    .rt-card p{
        font-size:12.5px !important;
        line-height:1.45 !important;
        color:#555555 !important;
        margin:0 !important;
    }

    .rt-card p br{
        display:none !important;
    }

    .rt-box{
        grid-area:box !important;
        display:block !important;
        height:115px !important;
        width:100% !important;
        border-radius:12px !important;
        border:1.5px solid #ffbc74 !important;
        overflow:hidden !important;
        position:relative !important;
        background:linear-gradient(120deg, #FFFBF6 0%, #FFE9CE 100%) !important;
        box-sizing:border-box !important;
    }

    .rt-box img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    /* Rhythm Perks (What You Work With, Day to Day) - Horizontal Scroller */
    .int-rhythm-perks{
        padding:clamp(28px, 6vw, 44px) 0 !important;
        overflow:hidden !important;
    }

    .int-rhythm-perks > .container{
        padding:0 16px !important;
    }

    .int-perks-head{
        margin-bottom:14px !important;
    }

    .int-perks{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        scroll-snap-type:x mandatory !important;
        -webkit-overflow-scrolling:touch !important;
        gap:12px !important;
        padding:10px 4px 18px 4px !important;
        margin-inline:0 !important;
        margin-top:14px !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        box-sizing:border-box !important;
    }

    .int-perks::-webkit-scrollbar{
        display:none !important;
    }

    .int-perks::after{
        content:'';
        flex:0 0 14px;
    }

    .int-perk{
        flex:0 0 220px !important;
        width:220px !important;
        max-width:72vw !important;
        scroll-snap-align:start !important;
        scroll-snap-stop:normal !important;
        padding:16px 14px !important;
        border-radius:16px !important;
        border:1.5px solid rgba(255,102,0,.2) !important;
        background:#fff !important;
        box-shadow:0 4px 14px rgba(0,0,0,0.05) !important;
        gap:8px !important;
        box-sizing:border-box !important;
    }

    .int-perk-icon{
        width:42px !important;
        height:42px !important;
    }

    .int-perk-icon img{
        width:34px !important;
        height:34px !important;
    }

    .int-perk h5{
        font-size:14.5px !important;
        font-weight:700 !important;
        margin-top:4px !important;
        color:var(--ink) !important;
    }

    .int-perk p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:3px !important;
        color:var(--ink-700) !important;
    }

    /* FAQ Section - 2x2 Side-by-side Stack on Mobile */
    .got-questions-container{
        padding:clamp(28px, 6vw, 44px) 16px !important;
    }

    .got-questions-header h1{
        font-size:clamp(19px, 5.2vw, 24px) !important;
        line-height:1.2 !important;
        text-wrap:balance !important;
    }

    .got-questions-header p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        max-width:94% !important;
        margin:8px auto 14px !important;
        text-wrap:balance !important;
    }

    .got-questions-media{
        max-width:140px !important;
        margin:0 auto 16px !important;
    }

    .got-questions-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        width:100% !important;
        max-width:680px !important;
        margin-inline:auto !important;
    }

    .got-questions-card{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        border-radius:12px !important;
        box-shadow:0 0 2px 1px rgba(238, 126, 72, 0.6), 0 3px 10px rgba(238, 126, 72, 0.2) !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .got-questions-btn{
        width:100% !important;
        padding:14px 16px !important;
        font-size:13.5px !important;
        font-weight:600 !important;
        line-height:1.4 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        height:auto !important;
        min-height:0 !important;
        box-sizing:border-box !important;
        text-align:left !important;
    }

    .got-questions-btn span:first-child{
        font-size:13.5px !important;
        line-height:1.4 !important;
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .got-questions-icon-wrapper{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        margin-left:6px !important;
        flex-shrink:0 !important;
    }

    .got-questions-icon{
        font-size:12px !important;
    }

    .got-questions-icon i{
        font-size:12px !important;
    }

    .got-questions-answer{
        max-height:0 !important;
        overflow:hidden !important;
        padding:0 16px !important;
        transition:max-height 0.35s ease, padding 0.35s ease !important;
    }

    .got-questions-answer p{
        font-size:13px !important;
        line-height:1.55 !important;
        color:#332C28 !important;
        margin:0 !important;
    }

    .got-questions-card.active .got-questions-answer{
        max-height:600px !important;
        padding:10px 16px 16px !important;
    }

    /* Counsellor Section */
    .int-counsellor{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .int-counsellor-inner{
        padding:0 16px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:20px !important;
    }

    .int-counsellor-left{
        text-align:center !important;
        margin:0 auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
    }

    .int-counsellor-photo{
        width:100% !important;
        max-width:180px !important;
        height:auto !important;
        margin:0 auto 12px !important;
        display:block !important;
        object-fit:contain !important;
    }

    .int-counsellor-left h2{
        font-size:clamp(19px, 5.2vw, 24px) !important;
        line-height:1.25 !important;
        text-wrap:balance !important;
    }

    .int-counsellor-left p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:6px !important;
        max-width:94% !important;
        margin-inline:auto !important;
        text-wrap:balance !important;
    }

    .int-counsellor-left p br{
        display:none !important;
    }

    .int-counsellor-form{
        padding:18px 14px !important;
        border-radius:18px !important;
        border:1.5px solid rgba(255,102,0,.2) !important;
        background:#fff !important;
        box-shadow:0 6px 20px rgba(0,0,0,.05) !important;
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
    }

    .int-counsellor-form .int-form-row{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        margin-bottom:10px !important;
        width:100% !important;
    }

    .int-counsellor-form label{
        display:flex !important;
        flex-direction:column !important;
        font-size:12.5px !important;
        font-weight:600 !important;
        gap:4px !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .int-counsellor-form input,
    .int-counsellor-form select,
    .int-counsellor-form textarea{
        width:100% !important;
        box-sizing:border-box !important;
        min-width:0 !important;
        max-width:100% !important;
        padding:9px 12px !important;
        font-size:13.5px !important;
        border-radius:8px !important;
    }

    .int-counsellor-form .int-form-full{
        width:100% !important;
        box-sizing:border-box !important;
        margin-bottom:12px !important;
    }

    .int-counsellor-form .int-form-actions{
        width:100% !important;
    }

    .int-counsellor-form .int-btn-primary{
        width:100% !important;
        padding:12px 20px !important;
        font-size:14.5px !important;
        font-weight:700 !important;
        border-radius:999px !important;
        box-sizing:border-box !important;
    }

    /* Final CTA Banner - Clean Inset Margins & Balanced Sizing */
    .int-cta{
        padding:clamp(24px, 5vw, 36px) 16px !important;
        box-sizing:border-box !important;
    }

    .int-cta-inner{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:22px 16px !important;
        border-radius:22px !important;
        box-sizing:border-box !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
        gap:12px !important;
        grid-template-columns:none !important;
        grid-template-areas:none !important;
    }

    .int-cta-img{
        width:100% !important;
        max-width:200px !important;
        height:auto !important;
        padding:8px !important;
        border-radius:16px !important;
        background:rgba(255,255,255,0.15) !important;
        display:grid !important;
        place-items:center !important;
        box-sizing:border-box !important;
    }

    .int-cta-img img{
        max-width:120px !important;
        height:auto !important;
    }

    .int-cta-text h2{
        font-size:clamp(18px, 5vw, 22px) !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        color:#fff !important;
        margin:0 !important;
        text-wrap:balance !important;
    }

    .int-cta-text p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        color:rgba(255,255,255,0.95) !important;
        margin-top:6px !important;
        max-width:100% !important;
        text-wrap:balance !important;
    }

    .int-cta-action{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:11px 24px !important;
        font-size:13.5px !important;
        font-weight:700 !important;
        border-radius:999px !important;
        width:auto !important;
        max-width:100% !important;
        margin-top:4px !important;
    }

}

/* =====================================================
   MEET THE MENTORS — PROFILE CARDS

   Was a round portrait with the name centred underneath. These now take the
   same card the About team row uses (.tm-card in about.css): a white box on
   a hairline, square photo full-bleed across the top, name and role in a
   left-aligned body below, and the same hover - lift, border warms, photo
   eases in.

   The photos keep their own backgrounds. Each asset is a composite with the
   subject already dropped on its dark panel, and a square frame at
   object-fit:cover shows that composition exactly as it was built - which
   is what the circle could not do without cropping into it.
   ===================================================== */

.int-mentor-card{
    width:225px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 4px 14px rgba(15,23,42,.04), 0 2px 4px rgba(0,0,0,.02);
    text-align:left;
    flex-shrink:0;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.int-mentor-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,102,0,0.45);
    box-shadow:0 10px 22px rgba(15,23,42,.07), 0 4px 10px rgba(255,102,0,.1);
}

.int-mentor-media{
    position:relative;
    width:calc(100% - 12px);
    margin:6px 6px 0;
    aspect-ratio:4 / 3.2;
    overflow:hidden;
    border-radius:10px;
    background:#fdfbf9;
    border:1px solid rgba(240,230,220,0.8);
}

.int-mentor-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:var(--pos,center 12%);
    transform:scale(var(--zoom,1));
    transition:transform .35s ease;
    border-radius:10px;
}

.int-mentor-card:hover .int-mentor-media img{
    transform:scale(calc(var(--zoom,1) * 1.04));
}

.int-mentor-badge{
    display:grid;
    place-items:center;
    position:absolute;
    top:6px;
    right:6px;
    left:auto;
    bottom:auto;
    width:20px;
    height:20px;
    border-radius:5px;
    background:var(--primary);
    font-size:9.5px;
    color:#fff;
    box-shadow:0 2px 6px rgba(255,102,0,0.3);
}

.int-mentor-body{
    flex:1;
    padding:8px 10px 10px;
    display:flex;
    flex-direction:column;
    text-align:left;
}

.int-mentor-name{
    justify-content:flex-start;
}

.int-mentor-card h4{
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    color:var(--ink);
    margin:0;
}

.int-mentor-role{
    display:block;
    margin-top:2px;
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:600;
    line-height:1.25;
    color:var(--ink-700);
}

.int-mentor-meta{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:6px;
}

.int-mentor-stat{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-sans);
    font-size:9.5px;
    font-weight:600;
    color:#334155;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:5px;
    padding:2px 5px;
}

.int-mentor-stat i{
    color:var(--primary);
    font-size:8.5px;
    flex-shrink:0;
}

.int-mentor-expertise{
    font-family:var(--font-sans);
    font-size:9.5px;
    color:#64748b;
    line-height:1.3;
    margin-top:5px;
    padding-top:5px;
    border-top:1px dashed rgba(226,232,240,0.9);
}

.int-mentor-expertise strong{
    color:#1e293b;
    font-weight:700;
}

.int-mentors-grid,
.bao-marquee .int-mentors-grid{
    gap:18px;
}

/* Shared dark treatment used by the real-projects section. The proof and
   mentor sections keep their white content cards, while their surrounding
   canvas now carries the same dark, lightly gridded background. */
.int-trust,
.int-mentors{
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px),
        radial-gradient(circle at 8% 12%, rgba(255,102,0,.17), transparent 27%),
        radial-gradient(circle at 94% 74%, rgba(66,111,136,.16), transparent 32%),
        linear-gradient(145deg, #111416, #17191a);
}

.int-trust .int-heading,
.int-mentors .int-heading{
    color:#fff;
}

.int-trust .int-subheading,
.int-mentors .int-subheading{
    color:rgba(255,255,255,.76);
}

@media (prefers-reduced-motion:reduce){

    .int-mentor-card{ transition:none; }
    .int-mentor-card:hover{ transform:none; }
    .int-mentor-card:hover .int-mentor-media img{ transform:none; }

}

/* ==========================================
   TOUCH TARGETS
   The hero and counsellor buttons came out 34-36px after the desktop
   sizing pass. They are the page's two conversion points.
========================================== */

@media (max-width:768px), (hover:none){

    .int-btn-primary{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .int-hero-content .int-btn-primary{
        padding:12px 20px;
        font-size:15px;
    }

    .int-mentor-card h4{
        font-size:14.5px;
    }

    .int-mentor-role{
        font-size:12.5px;
    }

    .int-mentor-stat{
        font-size:11px;
    }

    .int-mentor-expertise{
        font-size:11px;
    }

}


/* ==========================
   TRACK CTA + APPLY DIALOG
========================== */

/* The panel that closes the track section: the end of the choosing and the
   start of the applying. A warm wash rather than the page's flat cream, with
   a dashed arc curving in from each side so the eye is led to the middle. */

.int-track-cta{
    position:relative;
    /* The arcs are drawn wider than the panel so their ends never show as a
       cut edge; this is what trims them to the rounded corners. */
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-top:clamp(30px,3.2vw,46px);
    padding:clamp(28px,3vw,44px) clamp(22px,3vw,52px);
    border:1px solid var(--primary-20);
    border-radius:var(--r-32);
    background:
        radial-gradient(120% 140% at 50% 0%,rgba(255,102,0,.09) 0%,rgba(255,102,0,0) 58%),
        /* Sits under the button, so the middle of the panel carries some
           warmth of its own and the eye lands there rather than on the arcs. */
        radial-gradient(46% 62% at 50% 68%,rgba(255,102,0,.12) 0%,rgba(255,102,0,0) 70%),
        linear-gradient(180deg,#FFF7F2 0%,#FFFFFF 72%);
    box-shadow:0 18px 46px -34px rgba(255,102,0,.75);
    text-align:center;
}

.int-track-cta > *:not(.int-track-cta-deco){
    position:relative;
    z-index:1;
}

/* --- The arcs --- */

.int-track-cta-deco{
    position:absolute;
    top:50%;
    width:clamp(120px,13vw,190px);
    transform:translateY(-50%);
    pointer-events:none;
}

/* Hard against the panel edge, so the rings run off it rather than floating
   inside as three complete circles. The SVG clips them to its own box, which
   is what leaves the arcs. */

.int-track-cta-deco--l{ left:0; }
.int-track-cta-deco--r{ right:0; scale:-1 1; }

.int-track-cta-deco svg{
    display:block;
    width:100%;
    height:auto;
}

/* The dash pattern travels along the path rather than the path moving, so
   the arc keeps its position and only the marks run. */

.int-cta-arc{
    fill:none;
    stroke:var(--primary);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-dasharray:6 10;
    opacity:.45;
    animation:intCtaDash 7s linear infinite;
}

@keyframes intCtaDash{
    to{ stroke-dashoffset:-64; }
}

.int-cta-arc-end{
    fill:var(--primary);
    opacity:.55;
}

/* Three concentric rings running off the panel edge. Dashed and turning at
   different speeds, with the middle one reversed, so they read as three
   separate arcs rather than one rigid wheel -- a whole circle spinning looks
   identical to a still one, which is why the dash is what makes the motion
   visible at all. */

.int-cta-ring{
    fill:none;
    stroke:var(--primary);
    stroke-width:1.2;
    stroke-linecap:round;
    transform-origin:30px 100px;
}

.int-cta-ring-a{
    stroke-dasharray:3 12;
    opacity:.30;
    animation:intCtaTurn 44s linear infinite;
}

.int-cta-ring-b{
    stroke-dasharray:22 16;
    opacity:.24;
    animation:intCtaTurn 32s linear infinite reverse;
}

.int-cta-ring-c{
    stroke-dasharray:2 9;
    opacity:.38;
    animation:intCtaTurn 24s linear infinite;
}

@keyframes intCtaTurn{
    to{ rotate:360deg; }
}

/* The line runs in from the panel edge toward the middle, ending on a dot, so
   the arcs point at the button rather than sitting beside it. */

.int-cta-line{
    stroke:var(--primary);
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-dasharray:5 8;
    opacity:.4;
    animation:intCtaDash 6s linear infinite;
}

.int-cta-node{
    fill:var(--primary);
    opacity:.5;
}

.int-cta-star{
    fill:var(--primary);
    transform-box:fill-box;
    transform-origin:center;
    animation:intCtaTwinkle 3.4s var(--ease-out) infinite;
}

.int-cta-star-b{
    animation-delay:1.1s;
}

@keyframes intCtaTwinkle{
    0%,100%{ opacity:.2; scale:.75; }
    50%    { opacity:.65; scale:1.1; }
}

/* --- The label --- */

.int-track-cta-pill{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:6px 15px;
    border:1px solid var(--primary-20);
    border-radius:var(--r-50);
    background:#fff;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--primary);
}

/* A live dot: the ring is a box-shadow that grows and fades, so nothing in
   the layout moves as it pulses. */

.int-track-cta-live{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    animation:intCtaLive 2.2s var(--ease-out) infinite;
}

@keyframes intCtaLive{
    0%  { box-shadow:0 0 0 0 rgba(255,102,0,.55); }
    70% { box-shadow:0 0 0 9px rgba(255,102,0,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,102,0,0); }
}

.int-track-cta p{
    max-width:520px;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:500;
    line-height:1.5;
    text-wrap:balance;
    color:var(--ink-600);
}

.int-track-cta-note{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:600;
    color:var(--ink-400);
}

.int-track-cta-note i{
    color:var(--primary);
}

/* A slow breath on the button, so the eye finds it after the tabs settle.
   scale only -- a glow would fight the sheen .int-btn-primary already runs
   across its face on hover. */

.int-track-cta-btn{
    animation:intCtaBreathe 3.4s var(--ease-out) infinite;
}

.int-track-cta-btn:hover,
.int-track-cta-btn:focus-visible{
    animation-play-state:paused;
}

@keyframes intCtaBreathe{
    0%,100%{ transform:scale(1); box-shadow:0 8px 22px -14px rgba(255,102,0,.9); }
    50%    { transform:scale(1.035); box-shadow:0 14px 30px -14px rgba(255,102,0,.95); }
}

/* --- The dialog --- */

/* overlay and display are discrete properties: without allow-discrete the
   element is pulled out of the top layer the instant it closes and the exit
   transition never runs. @starting-style gives the entry its from-state,
   which a dialog cannot otherwise have because it does not exist in the
   layout until it opens. */

.int-apply{
    /* The UA centres a modal dialog with margin:auto, and Global.css's reset
       zeroes every margin on the page, which parks it in the top-left. */
    margin:auto;
    width:min(680px,calc(100vw - 32px));
    max-height:min(88vh,860px);
    padding:clamp(26px,3vw,40px);
    border:1px solid var(--primary-20);
    border-radius:var(--r-25);
    background:#fff;
    box-shadow:0 40px 90px -40px rgba(60,25,0,.55);
    color:var(--ink-900);
    overflow:auto;
    opacity:0;
    transform:translateY(16px) scale(.96);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        overlay var(--dur-base) allow-discrete,
        display var(--dur-base) allow-discrete;
}

.int-apply[open]{
    opacity:1;
    transform:none;
}

@starting-style{
    .int-apply[open]{
        opacity:0;
        transform:translateY(16px) scale(.96);
    }
}

.int-apply::backdrop{
    background:rgba(38,18,4,.55);
    opacity:0;
    transition:
        opacity var(--dur-base) var(--ease-out),
        overlay var(--dur-base) allow-discrete,
        display var(--dur-base) allow-discrete;
}

.int-apply[open]::backdrop{
    opacity:1;
}

@starting-style{
    .int-apply[open]::backdrop{
        opacity:0;
    }
}

.int-apply-close{
    position:absolute;
    top:14px;
    right:16px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:var(--primary-10);
    font-size:22px;
    line-height:1;
    color:var(--primary);
    cursor:pointer;
    transition:background var(--dur-base) var(--ease-out);
}

.int-apply-close:hover{
    background:var(--primary-20);
}

.int-apply-eyebrow{
    display:block;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--primary);
}

.int-apply h3{
    margin-top:10px;
    font-family:var(--font-sans);
    font-size:clamp(20px,2vw,27px);
    font-weight:800;
    line-height:1.2;
    text-wrap:balance;
    color:var(--ink);
}

.int-apply-sub{
    margin-top:10px;
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:500;
    line-height:1.55;
    color:var(--ink-500);
}

/* --- Track chooser --- */

.int-apply-tracks{
    margin-top:22px;
    padding:0;
    border:0;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.int-apply-tracks legend{
    margin-bottom:10px;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-400);
}

/* The radio is the control, the span is the chip. Hiding the input with
   display:none would take it out of the tab order, so it is clipped instead
   and the chip carries the focus ring for it. */

.int-apply-chip input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.int-apply-chip span{
    display:block;
    padding:9px 18px;
    border:1.5px solid var(--border);
    border-radius:var(--r-50);
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:600;
    color:var(--ink-600);
    cursor:pointer;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.int-apply-chip span:hover{
    border-color:var(--primary-50);
    color:var(--primary);
}

.int-apply-chip input:checked + span{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
    transform:translateY(-1px);
}

.int-apply-chip input:focus-visible + span{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

/* Each chip drops in behind the one before it once the dialog is open, so the
   choice reads as the first thing to make. */

.int-apply[open] .int-apply-chip{
    animation:intChipIn .42s var(--ease-out) both;
}

.int-apply[open] .int-apply-chip:nth-child(2){ animation-delay:.06s; }
.int-apply[open] .int-apply-chip:nth-child(3){ animation-delay:.12s; }
.int-apply[open] .int-apply-chip:nth-child(4){ animation-delay:.18s; }
.int-apply[open] .int-apply-chip:nth-child(5){ animation-delay:.24s; }
.int-apply[open] .int-apply-chip:nth-child(6){ animation-delay:.30s; }

@keyframes intChipIn{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:none; }
}

/* --- Fields --- */

.int-apply-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:16px;
}

.int-apply-form label{
    display:block;
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--ink-600);
}

.int-apply-form input,
.int-apply-form select{
    width:100%;
    margin-top:7px;
    padding:11px 14px;
    border:1.5px solid var(--border);
    border-radius:12px;
    background:#fff;
    font-family:var(--font-sans);
    font-size:14.5px;
    font-weight:500;
    color:var(--ink-900);
    transition:border-color var(--dur-base) var(--ease-out);
}

.int-apply-form input:focus,
.int-apply-form select:focus{
    outline:none;
    border-color:var(--primary);
}

.int-apply-form .int-form-status{
    margin:16px 0 0;
}

.int-apply-submit{
    width:100%;
    margin-top:20px;
    justify-content:center;
}

@media (max-width:560px){

    .int-apply-row{
        grid-template-columns:minmax(0,1fr);
    }

}

@media (prefers-reduced-motion:reduce){

    .int-track-cta-btn,
    .int-track-cta-live,
    .int-cta-arc,
    .int-cta-line,
    .int-cta-ring,
    .int-cta-star,
    .int-apply[open] .int-apply-chip{
        animation:none;
    }

    .int-apply,
    .int-apply::backdrop{
        transition:none;
    }

}