/* FINOVAS — hnry.com.au structure in the company CI.
   Kept from the playful release: the three-slide hero carousel with cut-out people, information
   stickers and a few coins. Sub-page heroes pair the copy with an office-photo collage.
   2026-10-09 refinement ("looks templated"): the organic blobs gave way to the brand chevron Λ
   from the wordmark, drawn large behind every hero person and collage; flat navy instead of glows;
   stickers are crisp tags and coins are flat; the hand-written callouts and the closing wave are gone.
   Per the CI brief ("Less Decoration, More Structure", motion on 20–30% of the page): no looping or
   bouncing animation, no pattern backgrounds, CI colours only (coins stay gold). */

/* ── Coins in the branch currency (hero people and country cards) ── */
.fun-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fun-shape { position: absolute; left: var(--x); top: var(--y); width: var(--s); line-height: 0; transform: rotate(var(--r)); }
.fun-shape svg { width: 100%; height: auto; overflow: visible; }
.fun-shape text { font-family: var(--font); }
.fun-shape--coin { filter: drop-shadow(0 3px 6px rgba(4, 12, 28, .28)); }
.fun-shapes--visual { z-index: 1; }

/* ── Heroes: flat Deep Navy; the chevron is the only graphic ── */
.hero, .page-hero { background: var(--navy); isolation: isolate; }
.page-hero { position: relative; overflow: hidden; }
.hero .container, .page-hero .container { position: relative; z-index: 1; }

/* The brand chevron (decor.js peak()): same proportions as the Λ in FINOVΛS */
.peak { position: absolute; display: block; fill: var(--blue); pointer-events: none; }

/* Cut-out person in front of the chevron, both standing on the hero's bottom edge */
.hero--fun .hero__inner { align-items: end; padding-bottom: 0; }
.hero--fun .hero__content { align-self: center; padding-bottom: clamp(44px, 6vw, 88px); }
.fun-visual { position: relative; display: grid; place-items: end center; min-height: clamp(380px, 40vw, 560px); }
.fun-visual .peak--hero { left: 50%; bottom: 0; width: min(108%, 560px); height: auto; translate: -50% 0; }
.fun-cutout { position: relative; z-index: 2; width: auto; max-width: 100%; height: clamp(360px, 38vw, 560px); object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 28px rgba(4, 12, 28, .32)); }

/* Information stickers: crisp white tags, the icon bare beside the words */
.sticker {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 10px 16px 10px 12px; border-radius: var(--r-md); background: #fff; color: var(--navy);
  box-shadow: 0 1px 2px rgba(4, 12, 28, .12), 0 12px 28px rgba(4, 12, 28, .26); font-weight: 600; font-size: .9rem; line-height: 1.35;
}
.sticker__icon { display: block; flex: 0 0 26px; height: 26px; }
.sticker__icon .fi { width: 100%; height: 100%; }
.sticker__icon .fi .l { stroke-width: 2.6; }
.sticker--a { left: 0; bottom: 14%; }
.sticker--b { right: 0; top: 16%; }

/* Keep stickers off faces: every cut-out's head is in its top third, so the second sticker sits on
   the right below the chin at every width (checked against each person's head box, 320–1440 px). */
.fun-visual .sticker--b { top: auto; right: -4%; bottom: 40%; }

/* ── Photos: a plain rounded frame (no offset panel, no shadow) ── */
.framed-photo { position: relative; }
.framed-photo__frame { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 3; background: var(--ice); }
.framed-photo__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ── Hero carousel: three slides and a dark pill (‹ • • • ›), as on hnry.com.au ── */
.hero--carousel { --dir: 1; }
.hero-slides { display: grid; touch-action: pan-y; }
.hero-slide {
  grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir) * 4%));
}
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: transform .6s var(--ease), opacity .45s ease; }
.hero-slide.is-leaving {
  opacity: 0; visibility: visible; pointer-events: none; transform: translateX(calc(var(--dir) * -4%));
  transition: transform .6s var(--ease), opacity .35s ease;
}
.hero .hero__title { margin-top: 14px; color: #fff; font-size: var(--fs-display); line-height: 1.15; }
:lang(th) .hero .hero__title { line-height: 1.32; }
.hero--carousel .hero__lead { color: rgba(255, 255, 255, .88); }
.hero--carousel .hero__lead p + p { margin-top: 12px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; color: #A9CCFF; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.hero-tag + .hero__title, .hero-tag + h1 { margin-top: 16px; }

/* A slide eases in once: copy fades up, the person rises, stickers and callout fade in. */
@keyframes hs-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes hs-fade { from { opacity: 0; } }
.hero-slide.is-active .hero__content > * { animation: hs-up .6s var(--ease) both; }
.hero-slide.is-active .hero__content > :nth-child(2) { animation-delay: .06s; }
.hero-slide.is-active .hero__content > :nth-child(3) { animation-delay: .12s; }
.hero-slide.is-active .hero__content > :nth-child(4) { animation-delay: .18s; }
.hero-slide.is-active .hero__content > :nth-child(5) { animation-delay: .24s; }
.hero-slide.is-active .peak--hero { animation: hs-fade .6s ease both; }
.hero-slide.is-active .fun-cutout { animation: hs-rise .7s var(--ease) .06s both; }
.hero-slide.is-active .fun-shapes--visual,
.hero-slide.is-active .sticker { animation: hs-fade .5s ease .35s both; }

/* The pill */
.hero-nav {
  position: absolute; left: 50%; bottom: clamp(14px, 2.2vw, 26px); z-index: 6; translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 999px;
  background: rgba(5, 14, 32, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(4, 12, 28, .35), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero-nav button { position: relative; display: grid; place-items: center; height: 36px; border-radius: 999px; color: #fff; }
.hero-nav__arrow, .hero-nav__pause { width: 36px; transition: background var(--t-fast); }
.hero-nav__arrow:hover, .hero-nav__pause:hover { background: rgba(255, 255, 255, .12); }
.hero-nav__pause { margin-left: 6px; }
.hero-nav__pause::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .2); }
.hero-nav__dot { width: 24px; transition: width .35s var(--ease); }
.hero-nav__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; translate: -50% -50%;
  border-radius: 999px; background: rgba(255, 255, 255, .45); transition: width .35s var(--ease), background .25s;
}
.hero-nav__dot:hover::before { background: rgba(255, 255, 255, .8); }
.hero-nav__dot.is-active { width: 46px; }
.hero-nav__dot.is-active::before { width: 34px; background: rgba(255, 255, 255, .28); }
.hero-nav__fill {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 11px; translate: -50% -50%; border-radius: 999px;
  background: #fff; opacity: 0; clip-path: inset(0 100% 0 0 round 999px);
}
.hero-nav__dot.is-active .hero-nav__fill { opacity: 1; animation: hero-progress 7s linear forwards; }
@keyframes hero-progress { to { clip-path: inset(0 0 0 0 round 999px); } }
.hero--carousel.is-manual .hero-nav__dot.is-active .hero-nav__fill { animation: none; clip-path: none; }
.hero--carousel.is-paused .hero-nav__fill,
.hero--carousel:focus-within .hero-nav__fill,
.hero--carousel:has(.hero__content:hover, .hero-nav:hover) .hero-nav__fill { animation-play-state: paused; }
.hero--carousel .hero__content { padding-bottom: clamp(88px, 8vw, 104px); }

/* ── Sub-page heroes: copy beside an office-photo collage (About, Careers) or contact tiles ── */
.page-hero--split { padding-block: clamp(48px, 6vw, 84px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-flag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(143, 191, 255, .38); color: var(--white); font-size: .9rem; font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hero-flag span { font-size: 1.15rem; line-height: 1; }
.hero-flag:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); color: var(--white); }

.collage { position: relative; min-height: clamp(340px, 33vw, 450px); }
/* The chevron frames the collage: its peak shows above the main photo, its feet below */
.collage .peak--collage { left: 50%; bottom: -4%; width: 96%; height: auto; translate: -50% 0; }
/* Behind a single photo it peeks out at the top right */
.collage--single .peak--collage { left: auto; right: -10%; top: -6%; bottom: auto; width: 74%; translate: none; }
.collage__photo { position: absolute; z-index: 1; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--navy-2); box-shadow: 0 18px 40px rgba(4, 12, 28, .3); }
.collage__photo img { width: 100%; height: 100%; object-fit: cover; }
.collage__photo--1 { left: 4%; top: 14%; width: 72%; aspect-ratio: 4 / 3; }
.collage__photo--2, .collage__photo--3 { z-index: 2; border: 4px solid var(--navy); }
.collage__photo--2 { right: 0; top: 0; width: 34%; aspect-ratio: 1; }
.collage__photo--3 { right: 6%; bottom: 0; width: 40%; aspect-ratio: 4 / 3; }
.collage .sticker--a { left: 0; top: auto; bottom: 4%; }
.collage .sticker--b { right: auto; left: 24%; top: 2%; }

/* Contact: three ways to reach the team, as one ruled white panel on the hero */
.contact-ways { display: grid; overflow: hidden; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 20px 48px rgba(4, 12, 28, .28); }
.contact-way {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: 20px 24px; color: var(--navy); text-align: left;
  transition: background var(--t-fast);
}
.contact-way + .contact-way { border-top: 1px solid var(--line); }
.contact-way:hover { background: #F5F9FF; color: var(--navy); }
.contact-way__icon { display: block; flex: 0 0 38px; height: 38px; }
.contact-way__icon .fi { width: 100%; height: 100%; }
.contact-way > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.contact-way b { font-size: 1.05rem; font-weight: 600; line-height: 1.4; transition: color var(--t-fast); }
.contact-way:hover b { color: var(--blue-ink); }
.contact-way small { color: var(--steel); font-size: .88rem; line-height: 1.5; }
.contact-way > svg { display: none; }

/* ── Home: reasons beside the office photo, as a ruled list ── */
.why-layout--home { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; }
.why-layout--home .section-head { margin-bottom: 28px; }
/* The office photo runs the full height of the list beside it */
.why-layout--home .why-photo, .why-layout--home .framed-photo { height: 100%; }
.why-layout--home .framed-photo__frame { height: 100%; aspect-ratio: auto; }
.why-list { display: grid; border-top: 1px solid var(--line); }
.why-item--row { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.why-item--row .feature-icon { width: 36px; height: 36px; margin: 2px 0 0; }
.why-photo { position: relative; }
.why-layout > figure { margin: 0; }
.photo-row--fun { gap: clamp(12px, 2vw, 24px); }
.photo-row--fun > figure { margin: 0; }

@media (max-width: 900px) {
  .why-layout--home { grid-template-columns: minmax(0, 1fr); }
  .why-photo { max-width: 560px; margin-inline: auto; }
  .why-layout--home .why-photo, .why-layout--home .framed-photo { height: auto; }
  .why-layout--home .framed-photo__frame { height: auto; aspect-ratio: 4 / 3; }
  .fun-visual { margin-inline: auto; width: min(100%, 440px); min-height: 360px; }
  .fun-cutout { height: 380px; }
  .sticker { font-size: .82rem; max-width: 210px; }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .collage { width: min(100%, 540px); margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero--carousel .hero__content { padding-bottom: 36px; }
  .hero-nav { bottom: 12px; }
}
@media (max-width: 520px) {
  .sticker { max-width: 200px; padding: 7px 12px 7px 7px; font-size: .78rem; }
  .sticker__icon { flex-basis: 22px; height: 22px; }
  .sticker--a { left: 0; }
  .sticker--b, .fun-visual .sticker--b { right: 0; }
  .collage { min-height: 300px; }
  .collage .sticker--b { left: auto; right: 0; top: 0; }
  .page-hero__cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-nav .hero-nav__pause { display: none; } /* the carousel never moves on its own */
}