/* ============================================================
   SiliconPath Law - Individual Visas, v2.

   Built on the Services kinetic story: loads AFTER about-v2.css (tokens,
   glass hero, .pnv, .kx headings, [data-rv], .wlit) and services-v2.css
   (.sko band + rail, .ska pinned rise-in grid, .skf FAQ), and BEFORE
   cursor-layer.css. This file holds only what is this page's own:
     the merit split (photo holds, copy reads), the six-plate work-visa
     rail, the six-card family stage + disclaimer, the eight profile cards.
   EVERY MOTION RULE IS GATED ON html.st-scroll; without it the page is
   plain, static, complete content. Every variable has a fallback.
   ============================================================ */

/* In-page targets of the hero navigator land below the fixed header. */
#merit,#work-visas,#family,#who{scroll-margin-top:calc(var(--header-h,73px) + 8px)}

/* ---- 2. MERIT PATHWAYS: photo split ------------------------------------ */
.ivm{background:var(--white,#fff);border-bottom:1px solid var(--line,#E4DAD0)}
.ivm__in{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
/* NATURAL ratio (1375x1144): it carries the firm's branding and a readable
   document, so no aspect-ratio and no object-fit:cover. */
.ivm__fig{margin:0;border-radius:var(--r-lg,22px);overflow:hidden;
  border:1px solid var(--line,#E4DAD0);background:var(--white,#fff);
  box-shadow:0 30px 60px -38px rgba(36,19,16,.45)}
.ivm__fig img{display:block;width:100%;height:auto}
.ivm__h{margin:0;max-width:20ch}
.ivm__p{margin:22px 0 0;color:var(--ink-2,#4A3F3A);font-size:1.04rem;line-height:1.75;max-width:60ch}
.ivm__lnk{color:var(--brand,#5A1F1B);text-decoration:none;font-weight:700;
  border-bottom:1.5px solid rgba(90,31,27,.3);transition:border-color .28s ease}
.ivm__lnk:hover{border-bottom-color:var(--brand,#5A1F1B)}
/* The second paragraph, set larger: it lights word by word (shared .wlit). */
.ivm__big{margin:22px 0 0;font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.6;font-weight:700;
  letter-spacing:-.014em;color:var(--ink,#1F1714);max-width:46ch}
.ivm__b{margin:clamp(24px,2.8vw,32px) 0 0}
@media(min-width:900px){
  .ivm__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .ivm__fig{position:sticky;top:calc(var(--header-h,73px) + 32px)}
}
/* The photo settles in as the section arrives (figure --progress). */
html.st-scroll .ivm__fig img{
  --t:clamp(0, calc(var(--progress,1) * 3), 1);
  transform:scale(calc(1.08 - var(--t) * .08));transform-origin:50% 40%}

/* ---- 3. WORK VISAS: six plates on the shared .sko band ------------------ */
/* .sko clips with overflow:hidden, which turns off position:sticky inside
   it; clip keeps the dots contained without that side effect. */
.ivw{overflow:clip}
/* The heading sits in the band's narrow left column, so it is set a step
   smaller and allowed to wrap on its own (the source's <br> is a
   full-width break that a half-width column cannot honour). */
.ivw .sko__txt .ivw__h{max-width:none;font-size:clamp(1.8rem,2.7vw,2.5rem)}
.ivw__l{font-size:clamp(1.05rem,1.55vw,1.32rem)}
@media(min-width:960px){
  .ivw .sko__in{align-items:start}
  .ivw .sko__txt{position:sticky;top:calc(var(--header-h,73px) + 48px)}
}
.ivw .sko__rail{gap:12px}
.ivw .sko__p{padding:18px 20px}
.ivw__lnk{color:inherit;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.4);
  transition:border-color .28s ease}
.ivw__lnk:hover{border-bottom-color:#fff}
/* Six plates, not three: each lights a little sooner than the shared
   three-pillar timing so the last one is fully lit before the band leaves. */
html.st-scroll .ivw .sko__p{
  --t:clamp(0, calc((var(--progress,1) - .2 - var(--k,0) * .075) * 8), 1)}
html.st-scroll .ivw .sko__rail::after{
  transform:scaleY(clamp(0, calc((var(--progress,1) - .18) * 1.9), 1))}

/* ---- 4. FAMILIES: six cards on the shared pinned .ska stage ------------- */
.ivf .ivf__hd .h-sec{max-width:30ch}
.ivf .ska__p b{font-weight:800;color:var(--ink,#1F1714)}
.ivf__note{margin:0;grid-column:1 / -1;display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:16px;background:var(--white,#fff);
  border:1px solid var(--line,#E4DAD0);border-left:4px solid var(--brand,#5A1F1B);
  color:var(--ink-2,#4A3F3A);font-size:.92rem;line-height:1.66}
.ivf__note .bi{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--brand,#5A1F1B);background:var(--brand-wash,#F3E8E5);font-size:1rem}
/* Wide screens: heading on top, the six cards three across, so the whole
   stage fits a laptop screen while it is pinned. */
@media(min-width:960px){
  .ivf .ska__in{grid-template-columns:1fr;gap:clamp(24px,3vh,40px)}
  .ivf__g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ivf .ska__c{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;
    padding:clamp(18px,2vw,24px)}
  .ivf .ska__img{width:56px;height:56px;border-radius:16px}
  .ivf .ska__n{margin:0}
  .ivf .ska__p{grid-column:1 / -1;margin-top:12px}
}
@media(min-width:760px) and (max-width:959px){
  .ivf__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:760px) and (min-height:600px){
  html.st-scroll .ivf{height:auto}
  html.st-scroll .ivf .ska__sticky{position:static;min-height:0;display:block;
    padding-block:clamp(56px,6.5vw,96px) clamp(28px,3vw,40px)}
  html.st-scroll .ivf{min-height:0}
}
/* Pinned only where the stage actually fits the screen. */
@media(min-width:960px) and (min-height:780px){
  html.st-scroll .ivf{height:230svh}
  /* The stage holds just under the header at its own height, rather than
     filling the screen and centring: a full-screen stage left ~190px of
     empty paper on each side of it as it arrived and as it released. */
  html.st-scroll .ivf .ska__sticky{position:sticky;top:calc(var(--header-h,73px) + 8px);
    min-height:0;display:block;padding-block:clamp(32px,4vh,44px) clamp(24px,3vh,32px)}
}
/* Six cards: each rises a little sooner than the shared four-card timing,
   so the sixth is fully up before the stage releases. Where the stage is
   NOT pinned its progress only starts once it reaches the top of the
   screen, so there the cards are simply shown. */
@media(min-width:760px) and (min-height:600px){
  html.st-scroll .ivf .ska__c{--t:1}
}
@media(min-width:960px) and (min-height:780px){
  html.st-scroll .ivf .ska__c{
    --t:clamp(0, calc(var(--progress,1) * 7 - var(--k,0) * .9), 1)}
}
/* ---- 5. WHO WE WORK WITH: eight profile cards --------------------------- */
.ivwho{background:var(--white,#fff);border-bottom:1px solid var(--line,#E4DAD0)}
.ivwho__hd{display:grid;gap:14px 48px;align-items:end}
.ivwho__h{margin:0;max-width:20ch}
.ivwho__l{margin:0;max-width:46ch}
@media(min-width:960px){.ivwho__hd{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.ivwho__g{margin:clamp(28px,3.6vw,48px) 0 0;padding:0;list-style:none;display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1000px){.ivwho__g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:479px){.ivwho__g{grid-template-columns:1fr}}
.ivwho__c{display:flex;flex-direction:column;border-radius:var(--r-lg,22px);padding:clamp(18px,2vw,24px);
  background:var(--paper,#F7F4EF);border:1px solid var(--line,#E4DAD0);
  transition:border-color .3s ease,box-shadow .3s ease}
.ivwho__c:hover{border-color:var(--line-2,#D0C1B4);box-shadow:0 24px 44px -32px rgba(90,31,27,.45)}
.ivwho__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:1.05rem;
  color:var(--brand,#5A1F1B);background:var(--brand-wash,#F3E8E5);border:1px solid rgba(90,31,27,.12);
  transition:background .3s ease,color .3s ease}
.ivwho__c:hover .ivwho__ic{background:var(--brand,#5A1F1B);color:#fff}
.ivwho__t{margin:16px 0 0;font-size:clamp(1.02rem,1.3vw,1.12rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.3;color:var(--ink,#1F1714)}
.ivwho__tags{margin:auto 0 0;padding:14px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ivwho__t + .ivwho__tags{margin-top:12px}
.ivwho__tags li{padding:5px 11px;border-radius:999px;font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.05em;color:var(--brand,#5A1F1B);background:var(--white,#fff);
  border:1px solid var(--line-2,#D0C1B4);white-space:nowrap}
/* Cards light in turn as the grid comes up the screen (the grid's
   --progress: 0 as its top enters at the bottom, 1 as its bottom leaves). */
html.st-scroll .ivwho__c{
  --t:clamp(0, calc((var(--progress,1) - .04 - var(--k,0) * .045) * 8), 1);
  opacity:calc(.12 + var(--t) * .88);
  transform:translateY(calc((1 - var(--t)) * 22px))}

/* ---- 6. FAQ ------------------------------------------------------------- */
.ivfq .skf__hd .h-sec{max-width:14ch}

@media(prefers-reduced-motion:reduce){
  .ivm__lnk,.ivw__lnk,.ivwho__c,.ivwho__ic{transition:none}
}