/* Linkcrest craft layer — loaded after linkcrest.css and trust.css.
   Additive only: every rule here refines something the base sheet already
   establishes, so removing this one <link> restores the previous site exactly. */

/* ── Ambient field ─────────────────────────────────────────────────────────
   The base sheet masked the field hard at both ends, which cropped it to a
   band. The field now sits behind <main> (z-index:1) rather than over it, so
   it can carry more light without ever competing with type. */
.site-ambient{
  opacity:.9;
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
}
@media(max-width:1000px){ .site-ambient{opacity:.72} }
@media(max-width:600px){ .site-ambient{opacity:.6} }

/* WebGL unavailable: a static wash so the page is never flatly black. */
html[data-ambient="css"] body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 28%,#1ed76014,transparent 70%),
    radial-gradient(50% 40% at 82% 72%,#1ed7600f,transparent 70%);
}

/* ── Legibility guard ──────────────────────────────────────────────────────
   Type that sits directly on the field, with no card behind it, gets a soft
   dark halo. It is invisible against flat background and only does work where
   a filament passes behind a line — the standard technique for setting type
   over a moving image, and the reason the field can stay bright. */
.hero-copy h1,.hero-copy .hero-description,.hero-location,
.page-hero h1,.page-hero .page-lead,
.section-intro h2,.section-intro p,
.how-we-work h3,.section-note,
.about-copy h2,.about-copy .large-copy,
.provider-heading h2,.provider-lead,
.contact-copy h2,.contact-copy>p,
.hero-copy .eyebrow,.about-copy .eyebrow{
  text-shadow:0 0 22px rgba(16,17,17,.92),0 0 6px rgba(16,17,17,.6);
}
/* Light sections sit on their own ground — a dark halo there would smudge. */
.verify .section-intro h2,.verify .section-intro p,
.page-hero-light h1,.page-hero-light .page-lead{ text-shadow:none }

/* ── Hero scene ────────────────────────────────────────────────────────────
   The halo ring and its two wide box-shadow blooms, plus the conic sweep, were
   drawn to give a darker scene something to sit in. The fibre field now does
   that job across the whole site, and against it they read as smudges rather
   than structure. The technical grid and corner marks stay — those are
   deliberate framing, not atmosphere. */
.hero-visual::before,.hero-visual::after{display:none}

/* ── StarHub partner lockup ────────────────────────────────────────────────
   The rotating ring and pulsing circle that sat across the StarHub mark are
   gone from the markup. Partner brand guidelines almost universally forbid
   animating over, overlaying or obscuring a licensed logo, and this site's
   whole job is being verifiably legitimate — not a place to be casual about
   someone else's trademark. The card's own tilt and light sweep stay: those
   light the surface the logo sits on, and pass behind it, not across it. */
.partner-logo-stage{ padding-inline:10px }              /* honest clear space around the mark */
.partner-logo-stage img{ filter:none }                  /* no glow applied to the licensed mark */

/* The ghost word was pinned past the card's own overflow:hidden edge, so it
   arrived clipped through the middle of its letterforms. Pulled inside, it
   then sat on top of "Singapore consumer services" instead. It was never
   carrying meaning the card does not already state in full, so it goes: a
   clean partner lockup is worth more here than a decorative watermark. */
.authorised-lockup::after{ display:none }

/* ── Section watermarks ────────────────────────────────────────────────────
   The oversized numerals are a good editorial device landing in the wrong
   place: at 250px they collided with the second line of every heading, so the
   italic "lives." read as doubled. Smaller, lifted clear of the text block. */
.section-watermark{ top:-26px; right:-12px; font-size:clamp(88px,10vw,164px); color:#ffffff06 }
@media(max-width:1000px){ .section-watermark{ top:-14px; font-size:clamp(72px,12vw,110px) } }
@media(max-width:600px){ .section-watermark{ display:none } }

/* ── Vertical rhythm ───────────────────────────────────────────────────────
   Every section carried a full 130px top AND bottom, so each join opened a
   260px void that read as unfinished rather than generous. Sections keep their
   breathing room; adjoining ones stop paying for it twice. */
.section{ padding-block:clamp(84px,8.4vw,126px) }
.section + .section{ padding-top:clamp(54px,5.4vw,80px) }
.how-we-work{ margin-top:clamp(48px,5vw,72px) }
.section-note{ margin-top:clamp(40px,4vw,60px) }
.provider-context{ padding-bottom:clamp(56px,6vw,86px) }
.career-preview{ margin-top:clamp(40px,4.5vw,64px) }

/* ── Motion tokens ─────────────────────────────────────────────────────────
   Two curves, used everywhere, instead of `ease` — which is the browser
   default and reads as "nobody chose this". `--out` decelerates hard for
   things arriving; `--soft` is gentler, for hover states that must not
   feel twitchy under a moving cursor. */
:root{
  --out:cubic-bezier(.16,.84,.34,1);
  --soft:cubic-bezier(.32,.72,.28,1);
  --edge:linear-gradient(90deg,transparent,#1ed76038 18%,#1ed76070 50%,#1ed76038 82%,transparent);
}

/* ── Section edge light ────────────────────────────────────────────────────
   A hairline that brightens toward the centre at each major join. It gives the
   page a structural beat without adding another block of colour, and it reads
   as precision rather than decoration — which is the register this brand
   wants. Drawn on the section, not between them, so nothing reflows. */
.section + .section::before,
.provider-context::before,
.focus-strip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--edge);opacity:.5;pointer-events:none;
}
.section,.provider-context{position:relative}
.verify::before{opacity:.85}

/* The elevated plane reads as a distinct surface rather than a slightly
   different dark, with a lit top edge the way a real raised panel catches. */
.provider-context{
  background:linear-gradient(180deg,#1c1f1b,#171915 62%,#141613);
  box-shadow:inset 0 1px 0 #ffffff0c;
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Weight shift plus a light that crosses on hover. The arrow leaves ahead of
   the button, which is the small asymmetry that makes a control feel alive. */
.button.primary{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .42s var(--out),box-shadow .42s var(--out),filter .3s var(--soft);
}
.button.primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,#ffffff40 48%,#ffffff18 54%,transparent 62%);
  transform:translateX(-120%);transition:transform .72s var(--out);
}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px #1ed76036;filter:saturate(1.06)}
.button.primary:active{transform:translateY(0);transition-duration:.08s}
.button.primary:hover::after{transform:translateX(120%)}
.button.primary svg{transition:transform .42s var(--out)}
.button.primary:hover svg{transform:translate(3px,-3px)}

/* ── Text links ────────────────────────────────────────────────────────────
   The rule draws from the left on the way in and retracts to the right on the
   way out, so the gesture has a direction instead of just fading. */
.text-link{position:relative}
.text-link::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--out);
}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
.text-link:not(:hover)::after{transform-origin:right}
.text-link svg{transition:transform .42s var(--out)}
.text-link:hover svg{transform:translateX(4px)}
.text-link.external-link:hover svg,.text-link:hover svg[viewbox="0 0 24 24"]{transform:translate(3px,-3px)}

/* ── Surfaces that respond ─────────────────────────────────────────────────
   A small rise and a lit top edge — the same language as the elevated plane,
   so hover feels like part of the system rather than a bolted-on effect. */
.service-tab,.verify-card,.career-principles article,.contact-route-card,
.provider-points>div,.assurance-card,.info-card,.enquiry-card{
  transition:transform .42s var(--out),border-color .42s var(--soft),
             box-shadow .42s var(--out),background-color .42s var(--soft);
}
.verify-card:hover,.career-principles article:hover,.provider-points>div:hover,
.assurance-card:hover,.info-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px #00000038,inset 0 1px 0 #ffffff12;
  border-color:#1ed76042;
}

/* ── Nav ───────────────────────────────────────────────────────────────────
   The current page keeps a permanent mark; the others draw one on approach. */
@media(min-width:1001px){
  #navigation>a:not(.nav-contact){position:relative}
  #navigation>a:not(.nav-contact)::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .38s var(--out);
  }
  #navigation>a:not(.nav-contact):hover::after{transform:scaleX(1);transform-origin:left}
  #navigation>a[aria-current="page"]::after{transform:scaleX(1);background:var(--green);opacity:.8}
}

/* ── Reveals ───────────────────────────────────────────────────────────────
   Children arrive in sequence rather than the whole block at once. The delay
   is small on purpose: long staggers look like a slideshow. */
.reveal.pending>*{opacity:0;transform:translateY(14px)}
.reveal>*{transition:opacity .62s var(--out),transform .62s var(--out)}
.reveal>*:nth-child(2){transition-delay:.07s}
.reveal>*:nth-child(3){transition-delay:.14s}
.reveal>*:nth-child(4){transition-delay:.21s}

/* ── Focus ─────────────────────────────────────────────────────────────────
   Keyboard users get a ring with its own halo, legible on both the dark field
   and the ivory sections. Never removed, only made better looking. */
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}
.button.primary:focus-visible{outline-offset:5px;box-shadow:0 0 0 6px #1ed7602e}

@media(prefers-reduced-motion:reduce){
  .button.primary,.button.primary::after,.text-link::after,.text-link svg,
  .button.primary svg,.reveal>*,#navigation>a:not(.nav-contact)::after,
  .verify-card,.career-principles article,.provider-points>div,
  .assurance-card,.info-card{transition:none!important;animation:none!important}
  .reveal.pending>*{opacity:1;transform:none}
  .button.primary:hover,.verify-card:hover,.career-principles article:hover,
  .provider-points>div:hover,.assurance-card:hover,.info-card:hover{transform:none}
}

/* ── Header states ─────────────────────────────────────────────────────────
   Quiet at the top of the page, defined once it has moved. */
.site-header{transition:background-color .4s var(--soft),border-color .4s var(--soft),box-shadow .4s var(--soft)}
.site-header[data-scrolled="false"]{background:#10111199;border-bottom-color:transparent}
.site-header[data-scrolled="true"]{background:#101111f7;border-bottom-color:#ffffff14;box-shadow:0 12px 34px #00000038}

/* ── Magnetic offset ───────────────────────────────────────────────────────
   Composited with the hover lift, so the two never fight for `transform`. */
.button.primary{
  --pull-x:0px;--pull-y:0px;
  transform:translate3d(var(--pull-x),var(--pull-y),0);
}
.button.primary:hover{transform:translate3d(var(--pull-x),calc(var(--pull-y) - 2px),0)}
.button.primary:active{transform:translate3d(var(--pull-x),var(--pull-y),0)}

/* The stagger belongs to the children; the parent no longer fades as well, or
   the two compound into a slow double dissolve. */
.reveal.pending{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .button.primary{transform:none!important}
}

/* The scroll cue retires once the reader has started. Kept focusable and in
   the accessibility tree — it is faded, not removed, so keyboard users can
   still reach it. */
.hero-foot a[href="#services"]{transition:opacity .5s var(--out)}
.hero-foot a[href="#services"].is-spent{opacity:0}
.hero-foot a[href="#services"].is-spent:focus-visible{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-foot a[href="#services"]{transition:none}}