/* Shared styles for Access Global sub-pages (industries, solutions, …).
   Mirrors the landing's design tokens and core components so every page matches. */
:root{
  --ink:#1a1a1a; --body:#2b2b2b; --mut:#676767; --faint:#9a9a9a;
  --green:#2a9f69; --green-dk:#1d895a; --green-ink:#0f3b29; --tint:#eef7f1; --soft:#f5f7f5;
  --line:rgba(26,26,26,.1); --line-2:rgba(26,26,26,.06);
  --sans:'Onest',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',monospace;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:#fafffd;color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.3rem,4vw,2.4rem)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}
img{max-width:100%}

h1,h2,h3{font-family:var(--sans);font-weight:400;color:var(--ink);letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.7rem+2.4vw,3.6rem)}
h2{font-size:clamp(1.7rem,1.3rem+1.5vw,2.4rem);letter-spacing:-.035em}
h3{font-size:1.15rem}
.ey{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk)}
em{font-style:italic;color:var(--green-ink);font-weight:500}

/* nav */
nav{border-bottom:1px solid var(--line-2);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:50}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:64px;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand .logo{height:23px;width:auto;display:block}
.nav-links{display:flex;gap:1.9rem;justify-content:center;font-size:.9rem;color:var(--body)}
.nav-links a{position:relative;transition:color .16s}
.nav-links a:hover,.nav-links a.active{color:var(--green-dk)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--green-dk);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.nav-links a::after{transition:none}}
.nav-right{display:flex;align-items:center;gap:1.3rem}
.signin{font-size:.9rem;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:.5em;font:inherit;font-weight:500;font-size:.88rem;background:var(--green);color:#fff;border:none;border-radius:200px;padding:.6em 1.1em;cursor:pointer;transition:.16s}
.pill:hover{background:var(--green-dk)}
.pill .ar{font-size:1.25em;opacity:.8;margin-left:-.1em;transition:transform .18s ease}
.pill:hover .ar{transform:translateX(3px)}
.pill:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.pill .ar,.pill:hover .ar,.pill:active{transform:none}}
.pill.lg{padding:.78em 1.4em;font-size:.95rem}
.pill.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.pill.ghost:hover{background:var(--soft);border-color:var(--mut)}
@media(max-width:760px){.nav-links{display:none}}
@media(max-width:430px){.nav-in{gap:.55rem}.nav-right{gap:.7rem}.signin{display:none}}

/* page hero */
.phero{text-align:center;padding:clamp(3.4rem,7vw,5.4rem) 0 clamp(2.4rem,4vw,3.4rem)}
.phero .ey{display:block;margin-bottom:1.1rem}
.phero h1{max-width:20ch;margin:0 auto}
.phero p{color:var(--mut);font-size:1.12rem;max-width:56ch;margin:1.2rem auto 0;text-wrap:balance}
.phero .cta{margin-top:1.9rem;display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
/* two-column hero (Fiat-style): copy left, artwork right */
.phero .pgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1rem,2.4vw,2rem);align-items:center;text-align:left}
.phero .pgrid .ey{display:block;margin-bottom:1.1rem}
.phero .pgrid h1{max-width:none;margin:0}
.phero .pgrid p{max-width:48ch;margin:1.2rem 0 0}
.phero .pgrid .cta{justify-content:flex-start}
/* the tall portrait hero needs clear air before the stats row beneath it */
.phero .stats{margin-top:clamp(5.5rem,9vw,8rem)}
/* people-photo heroes — each clipped into a per-page shape over an offset brand
   backing slab, with a subtle brand grade. img = photo; ::before = backing;
   ::after = grade veil (all three share the shape's clip-path). */
.phero-art{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;margin:0;justify-self:center}
.phero-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;filter:drop-shadow(0 16px 28px rgba(15,59,41,.2))}
.phero-art::before{content:"";position:absolute;inset:0;z-index:0;transform:translate(12px,13px);background:linear-gradient(150deg,#1d895a,#0f3b29)}
.phero-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(15,59,41,.05),rgba(15,59,41,.24))}
.phero-art.shape-arch img,.phero-art.shape-arch::before,.phero-art.shape-arch::after{clip-path:inset(0 round 999px 999px 22px 22px)}
.phero-art.shape-leaf img,.phero-art.shape-leaf::before,.phero-art.shape-leaf::after{clip-path:inset(0 round 50% 14px 50% 14px)}
.phero-art.shape-squircle img,.phero-art.shape-squircle::before,.phero-art.shape-squircle::after{clip-path:inset(0 round 34px)}
@media(max-width:820px){
  .phero .pgrid{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .phero .pgrid h1{max-width:20ch;margin:0 auto}
  .phero .pgrid p{max-width:56ch;margin:1.2rem auto 0}
  .phero .pgrid .cta{justify-content:center}
  .phero-art{max-width:220px;margin:.4rem auto 0;justify-self:center}
}

/* generic section */
section{padding:clamp(2rem,5vw,3.6rem) 0}
.sec-head{max-width:64ch}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head .ey{display:block;margin-bottom:.9rem}
.sec-head p{color:var(--mut);margin-top:.9rem;font-size:1.04rem}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
@media(max-width:880px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
/* fewer-but-larger variant (e.g. Company) — two wide columns, distinct from the 3-up grid */
.grid.g2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:560px){.grid.g2{grid-template-columns:1fr}}
.card2{background:#fff;border:1px solid rgba(26,26,26,.05);border-radius:18px;padding:1.6rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card2:hover{transform:translateY(-4px);border-color:rgba(42,159,105,.35);box-shadow:0 22px 46px -34px rgba(15,59,41,.45)}
.card2 .ic{width:34px;height:34px;display:block;margin-bottom:1rem;stroke:var(--green);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.card2 h3{font-weight:600;font-size:1.06rem;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em}
.card2 p{color:var(--mut);font-size:.92rem;line-height:1.5}

/* highlight panel (Ebury-style block) */
.panel{background:#f4f8f6;border:1px solid var(--line-2);border-radius:24px;padding:clamp(1.8rem,4vw,3.2rem);box-shadow:0 34px 70px -50px rgba(15,59,41,.5)}
.panel.center{text-align:center}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.2rem}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr}}
.stat b{display:block;font-weight:300;font-size:clamp(2rem,1.4rem+2vw,3rem);color:var(--green-dk);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat b.ic{display:flex;align-items:center;justify-content:center;height:1em}
.stat b.ic svg{width:.8em;height:.8em;display:block}
.stat span{display:block;color:var(--mut);font-size:.88rem;margin-top:.45rem}

/* rail wall (reused from landing) */
.railwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.6rem;margin-top:1.6rem}
@media(min-width:821px){.railwall{grid-template-columns:repeat(8,1fr)}}
.railwall .r{display:flex;align-items:center;justify-content:center;text-align:center;height:62px;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:11px;white-space:nowrap;overflow:hidden;font-weight:700;font-size:.95rem;color:var(--green-ink);letter-spacing:-.01em}
.railwall .r img{max-height:30px;max-width:90%;width:auto;object-fit:contain;display:block}

/* cta band */
.ctaband2{position:relative;overflow:hidden;background:linear-gradient(125deg,#0f5538 0%,#17714b 52%,#105036 100%);background-size:200% 200%;border-radius:26px;text-align:center;padding:clamp(3rem,6vw,5rem) clamp(1.4rem,5vw,3rem);color:#fff}
@media(prefers-reduced-motion:no-preference){.ctaband2{animation:ctadrift 18s ease-in-out infinite}}
@keyframes ctadrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ctaband2 .ey{color:#dafff0;display:inline-block;margin-bottom:1.1rem}
.ctaband2 h2{color:#fff;margin:0 auto;max-width:18ch}
.ctaband2 p{color:#eafaf2;max-width:46ch;margin:1.1rem auto 0}
.ctaband2 .pill{background:#fff;color:#0c5a3c;font-weight:600;margin-top:1.9rem}
.ctaband2 .pill:hover{background:#eafff6}

/* footer */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem;padding:3rem 0 2rem}
@media(max-width:600px){.foot{flex-direction:column;gap:1.6rem}}
.foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:1rem}
.foot a{display:block;color:var(--mut);font-size:.9rem;padding:.28em 0}
.foot a:hover{color:var(--ink)}
.foot .tag{color:var(--mut);font-size:.92rem;max-width:30ch;margin-top:1rem}
.foot-cols{display:flex;gap:3.5rem;flex-wrap:wrap}
.foot-base{display:flex;justify-content:space-between;border-top:1px solid var(--line-2);padding:1.4rem 0 3rem;color:var(--faint);font-size:.8rem;flex-wrap:wrap;gap:1rem}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.6,.3,1),transform .7s cubic-bezier(.2,.6,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* entrance cascade: direct .reveal children of a .stagger container settle in sequence */
@media(prefers-reduced-motion:no-preference){
  .stagger>.reveal:nth-child(2){transition-delay:.07s}
  .stagger>.reveal:nth-child(3){transition-delay:.14s}
  .stagger>.reveal:nth-child(4){transition-delay:.21s}
  .stagger>.reveal:nth-child(5){transition-delay:.28s}
  .stagger>.reveal:nth-child(6){transition-delay:.35s}
  .stagger>.reveal:nth-child(7){transition-delay:.42s}
  .stagger>.reveal:nth-child(8){transition-delay:.49s}
}

/* ── richer page components (modeled on Airwallex / Ebury) ── */

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center;padding:clamp(1.8rem,3.5vw,3rem) 0}
.frow+.frow{border-top:1px solid var(--line-2)}
.frow .ftxt .ey{display:block;margin-bottom:.8rem}
.frow .ftxt h2{margin-bottom:.8rem}
.frow .ftxt p{color:var(--mut);font-size:1.04rem;max-width:46ch}
.frow .flist{margin-top:1.2rem;display:grid;gap:.6rem}
.frow .flist span{display:flex;gap:.6rem;align-items:flex-start;color:var(--body);font-size:.95rem}
.frow .flist svg{width:18px;height:18px;flex:none;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:.18rem}
.frow.alt .ftxt{order:2}
@media(max-width:760px){.frow{grid-template-columns:1fr;gap:1.4rem}.frow.alt .ftxt{order:0}.frow .fvis{order:-1}}

/* UI mockups for the feature rows */
.mock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 70px -50px rgba(15,59,41,.5);padding:1.4rem;max-width:430px;margin:0 auto;width:100%}
.mock .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mock .mh b{font-weight:600;color:var(--ink);font-size:.95rem}
.mock .tag2{font-family:var(--mono);font-size:.62rem;color:var(--green-dk);background:var(--tint);padding:.3em .65em;border-radius:100px}
.mock .bal{font-size:1.9rem;font-weight:300;letter-spacing:-.03em;color:var(--ink)}
.mock .sub{color:var(--mut);font-size:.8rem;margin:.1rem 0 1rem}
.mock .mrow{display:flex;align-items:center;justify-content:space-between;padding:.62rem 0;border-top:1px solid var(--line-2);font-size:.9rem}
.mock .mrow .c{display:flex;align-items:center;gap:.55rem;color:var(--body)}
.mock .mrow .code{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-family:var(--mono);font-size:.58rem;color:var(--green-ink)}
.mock .mrow .amt{font-variant-numeric:tabular-nums;color:var(--ink)}
.mock .prog{position:relative;height:6px;border-radius:4px;background:var(--soft);overflow:visible;margin:1rem 0 .55rem}
.mock .prog i{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--green-dk))}
/* travelling payment dot riding the leading edge of the fill (echoes the old site's moving dots) */
.mock .prog::after{content:"";position:absolute;top:50%;left:6%;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--green);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(42,159,105,.16);opacity:0}
.mock .status{display:flex;align-items:center;gap:.45rem;color:var(--green-dk);font-size:.82rem;font-weight:500}
.mock .status .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
/* FX conversion point on the settlement timeline (USD→PHP) */
.mock .prog.fx{overflow:visible;margin:1.6rem 0 .55rem}
.mock .prog.fx::after{display:none}
.mock .prog.fx .fxpin{position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--green);color:var(--green-dk);font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.02em;padding:.32em .6em;border-radius:100px;white-space:nowrap;box-shadow:0 3px 10px rgba(15,59,41,.16)}
.mock .fxrow{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 .15rem;font-size:.9rem}
.mock .fxrow .c{color:var(--mut)}
.mock .fxrow .amt{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
/* Credential seal card (Company trust section) — matches .mock styling */
.seal{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 70px -50px rgba(15,59,41,.5);padding:2.4rem 1.6rem;max-width:430px;margin:0 auto;width:100%;text-align:center}
.seal img{display:block;margin:0 auto 1rem;width:92px;height:92px}
.seal b{display:block;color:var(--ink);font-size:1.02rem;font-weight:600}
.seal span{display:block;color:var(--mut);font-size:.85rem;margin-top:.35rem}
@media(prefers-reduced-motion:no-preference){
  .mock .prog i{animation:pffill 3.6s cubic-bezier(.45,0,.2,1) infinite}
  .mock .prog::after{animation:pfdot 3.6s cubic-bezier(.45,0,.2,1) infinite}
  .mock .status .dot{animation:pflive 1.8s ease-in-out infinite}
  .phero-art{animation:artfloat 6.5s ease-in-out infinite}
}
@keyframes pffill{0%{width:6%}62%{width:92%}76%,100%{width:100%}}
@keyframes pfdot{0%{left:6%;opacity:0}10%{opacity:1}62%{left:92%}76%{left:100%;opacity:1}82%,100%{left:100%;opacity:0}}
@keyframes pflive{0%,100%{box-shadow:0 0 0 0 rgba(42,159,105,.5)}70%{box-shadow:0 0 0 7px rgba(42,159,105,0)}}
@keyframes artfloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* security / compliance pillars */
.secp{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.2rem}
@media(max-width:820px){.secp{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.secp{grid-template-columns:1fr}}
.secp .p{padding:1.3rem;border:1px solid var(--line-2);border-radius:14px;background:#fff}
.secp .p svg{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.75rem}
.secp .p b{display:block;font-weight:600;color:var(--ink);font-size:.98rem;margin-bottom:.3rem}
.secp .p span{color:var(--mut);font-size:.86rem;line-height:1.45}

/* testimonial */
.quote2{text-align:center;background:linear-gradient(180deg,#fbfdfc,#f2f8f4);border:1px solid var(--line);border-radius:22px;padding:clamp(2.2rem,4vw,3.4rem);box-shadow:0 34px 70px -50px rgba(15,59,41,.5)}
.quote2 .mark{display:block;font-family:Georgia,serif;font-size:3.2rem;line-height:.4;color:var(--green);opacity:.4}
.quote2 p{font-size:clamp(1.15rem,1rem+.8vw,1.55rem);color:var(--ink);letter-spacing:-.02em;line-height:1.4;max-width:48ch;margin:1rem auto 0}
.quote2 .by{margin-top:1.6rem;color:var(--mut);font-size:.9rem}
.quote2 .by b{color:var(--ink);font-weight:600}

/* FAQ */
.faq{max-width:780px;margin:2.2rem auto 0}
.faq details{border-top:1px solid var(--line);padding:1.1rem .2rem}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;color:var(--ink);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green-dk);font-size:1.35rem;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq p{color:var(--mut);font-size:.95rem;margin-top:.7rem;max-width:66ch}

/* fixes: flag chips in mockups + rail wall sized for the narrow feature-row column */
.mock .flag{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line-2);background:#fff}
.frow .railwall{grid-template-columns:repeat(4,1fr)}
@media(max-width:480px){.frow .railwall{grid-template-columns:repeat(2,1fr)}}

/* mobile menu */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:6px;margin:-6px -4px;color:var(--ink);align-items:center}
.navtoggle svg{width:26px;height:26px;display:block;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.navmenu{display:none}
@media(max-width:760px){
  .navtoggle{display:inline-flex}
  .signin{display:none}
  nav.open .navmenu{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:.3rem clamp(1.3rem,4vw,2.4rem) 1.2rem;box-shadow:0 24px 46px -26px rgba(15,59,41,.45);z-index:48}
  .navmenu a{padding:.9rem 0;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--line-2)}
  .navmenu a:last-child{border-bottom:none}
  .navmenu a.active{color:var(--green-dk)}
}

/* ── alternating section bands (Fiat-style rhythm, on-brand emerald) ── */
/* mint tint — gentle light alternation, needs no other change */
section.tint{background:var(--tint)}

/* deep-emerald slab — redefine tokens locally so token-driven CSS recolors,
   then hand-fix the few hardcoded-#fff surfaces that would otherwise glow */
section.dark{
  background:linear-gradient(150deg,#0c2f22 0%,#0f3b29 45%,#0c2f22 100%);
  --ink:#fff; --body:#cfe9dc; --mut:#a9cdbb;
  --green-dk:#7fe3b4; --green-ink:#aef0cf; --green:#7fe3b4;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.10);
  color:#cfe9dc;
  padding-top:clamp(2.6rem,5.5vw,4.2rem);
  padding-bottom:clamp(2.6rem,5.5vw,4.2rem);
}
section.dark .card2,
section.dark .secp .p,
section.dark .mock,
section.dark .railwall .r,
section.dark .panel{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
section.dark .card2:hover{border-color:rgba(127,227,180,.5);box-shadow:0 22px 46px -34px rgba(0,0,0,.6)}
section.dark .quote2{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);box-shadow:0 34px 70px -50px rgba(0,0,0,.6)}
section.dark .quote2 p{color:#fff}
section.dark .quote2 .by b{color:#fff}
section.dark .quote2 .mark{color:#7fe3b4;opacity:.5}
section.dark .mock .bal,
section.dark .mock .mh b,
section.dark .mock .mrow .amt{color:#fff}
section.dark .mock .tag2{background:rgba(127,227,180,.16);color:#aef0cf}
section.dark .mock .mrow .code{background:rgba(255,255,255,.08);color:#dcefe5}
section.dark .mock .prog{background:rgba(255,255,255,.10)}
section.dark .stat b{color:#fff}
section.dark .mock{box-shadow:0 34px 70px -50px rgba(0,0,0,.6)}
section.dark .panel{box-shadow:0 34px 70px -50px rgba(0,0,0,.55)}