/* Additions for the live site (on top of site.css, which is the approved design unchanged). */

/* honeypot field: off-screen for people, visible to bots */
.adi-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* form results */
.adi-notice{padding:12px 16px;border-radius:12px;margin:0 0 14px;font-size:.95rem;line-height:1.5}
.adi-notice.ok{background:#E8F3EC;color:#1E5B34;border:1px solid #BFDCC8}
.adi-notice.err{background:#FBECEC;color:#8A1F1F;border:1px solid #EBC3C3}
.adi-flash{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:300;padding:12px 18px;border-radius:12px;font:500 .95rem/1.4 Poppins,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.15);animation:adiFlash 6s forwards}
.adi-flash.ok{background:#E8F3EC;color:#1E5B34;border:1px solid #BFDCC8}
.adi-flash.err{background:#FBECEC;color:#8A1F1F;border:1px solid #EBC3C3}
@keyframes adiFlash{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}
.ct-send[disabled]{opacity:.7;cursor:progress}

/* without JavaScript the careers page shows the application form straight away */
html.js #apply[data-nojs]{display:none}

/* "View all insights" under the home-page grid */
.ins-all{display:flex;justify-content:center;margin-top:34px}
#insights .ins-all .btn{background:#fff;color:var(--brand);border-color:#fff}
#insights .ins-all .btn:hover{background:#E8F0F4}
.ins-empty{text-align:center;color:var(--ink-2);margin:10px 0 0}
#insights.collapsed .ins-all{display:none}

/* video pop-up (YouTube) */
.m-yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin-bottom:16px}
.m-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* sub-pages: /insights/ and articles */
.subpage main{min-height:60vh}
.adi-page{padding-block:clamp(48px,6vw,88px)}
.adi-page .wrap{max-width:900px}
.adi-page-head{margin-bottom:28px}
.adi-page-head .eyebrow{display:block;margin-bottom:10px}
.adi-page-head h1{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:700;color:var(--head);line-height:1.2;margin:0}
.adi-meta{margin-top:12px;font-size:.9rem;color:var(--ink-2)}
.adi-cover{margin:0 0 28px;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1200/630;background:#E9F0F7}
.adi-cover img{display:block;width:100%;height:100%;object-fit:cover}
.adi-article .lead{font-size:1.15rem;line-height:1.7;color:var(--head);margin:0 0 1.2em}
.adi-content{font-size:1.05rem;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.adi-content h2{font-size:1.4rem;margin:1.6em 0 .5em;color:var(--head)}
.adi-content h3{font-size:1.15rem;margin:1.4em 0 .4em;color:var(--head)}
.adi-content h4{font-size:1.02rem;margin:1.2em 0 .4em;color:var(--head)}
.adi-content p{margin:0 0 1em}
@media (min-width:768px){.adi-content p{text-align:justify;hyphens:auto}}
.adi-content ul,.adi-content ol{margin:0 0 1em 1.2em;padding-left:.6em}
.adi-content li{margin:.25em 0}
.adi-content a{color:var(--brand);text-decoration:underline}
.adi-content img{max-width:100%;height:auto;border-radius:12px}
.adi-content blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:4px solid var(--brand);background:#F3F7F9;border-radius:0 12px 12px 0}
.adi-content pre{overflow:auto;background:#F3F7F9;padding:14px;border-radius:12px;font-size:.9rem}
.adi-content code{font-size:.92em}
.adi-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.adi-disclaimer{margin-top:28px}
.adi-back{display:inline-flex;gap:8px;margin-top:24px;font-weight:600;color:var(--brand)}
.ins-page.section{background:#F4F8FB!important}
.ins-page .chips{margin-bottom:28px}
.ins-page .chip{text-decoration:none}
.adi-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.adi-list .blog-card{text-decoration:none;color:inherit;opacity:1!important;transform:none}
.adi-pager{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.adi-pager a,.adi-pager span{padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.adi-pager .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.subpage .site-footer .flink,.subpage .site-footer a{text-decoration:none}

/* The approved sample hides the video library (#videos{display:none!important}).
   It is shown only once ComplyADI publishes at least one video for the ADI site. */
html.has-videos #videos{display:block!important}

/* client logos: HD files on a common 480x320 canvas, shown whole */
.rc-grid li{padding:8px 12px}
.rc-grid img{width:100%;height:auto;max-width:150px;max-height:84px;object-fit:contain}
@media (max-width:560px){.rc-grid img{max-height:64px}}

/* People card: LinkedIn icon beside "View profile" */
.person-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.person-foot .person-more{margin-top:0}
.person-li{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#0A66C2;color:#fff;flex:none;transition:transform .15s,box-shadow .15s}
.person-li:hover,.person-li:focus-visible{transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,102,194,.35)}
.m-li{margin-top:8px;width:40px;height:40px}

/* 10 service lines: two even rows of five on wide screens */
@media (min-width:1200px){.svc-grid{grid-template-columns:repeat(5,1fr)}}
/* card descriptions are 3-5 short lines in a narrow column: justified spacing leaves holes there, so they align left (long paragraphs stay justified) */
.svc-card p{text-align:left!important;hyphens:manual!important;-webkit-hyphens:manual!important}

/* person cards: name and role centred under the photo */
.person-card h3,.person-card .person-role{text-align:center}
.person-card p{text-align:left!important;hyphens:manual!important;-webkit-hyphens:manual!important}

/* ---- Desktop: each open section fits one screen (measured at 1920x1080, 1536x864, 1440x900) ---- */
@media (min-width:1024px){
  html{font-size:16px}
  .section{padding-block:clamp(36px,5.5vh,72px)}
  .section .sec-head{margin-bottom:clamp(18px,2.6vh,32px)!important}
}
@media (min-width:1900px){html{font-size:16px}}
@media (min-width:1024px){
  main p,.about-text p,.about-text p:not(.lead){line-height:1.6!important}
  /* About: shorter photo row, tighter fact cards */
  .about-grid{gap:20px 40px}
  .about-text{gap:10px}
  .office img{min-height:0}
  .about-side{gap:16px}
  .about-side .pillars>div{padding:14px 20px}
  .about-side .lineage{padding-block:14px!important}
  /* Expertise: compact cards */
  .svc-card{padding:18px 20px;gap:8px}
  .svc-card p{font-size:.92rem!important;line-height:1.5!important}
  .svc-card h3{font-size:1rem}
  .svc-icon{width:36px;height:36px}.svc-icon svg{width:20px;height:20px}
  .svc-grid{gap:16px!important}
  /* Sector map: as tall as the screen allows */
  .eco-map{min-height:0;height:clamp(420px,calc(100vh - 290px),600px)}
  .eco-body{padding:18px 20px}
  /* Insights: lower covers */
  #insights .blog-cover{aspect-ratio:auto;height:clamp(110px,16vh,170px)}
  #insights .blog-body{padding:14px 16px 16px;gap:6px}
  .blog-grid{gap:16px!important}
  .ins-all{margin-top:20px!important}
  /* Clientele: smaller logo tiles */
  .rc-grid{gap:10px}
  .rc-grid li{padding:4px 10px;min-height:0!important;height:clamp(58px,8.5vh,84px)}
  .rc-grid img{max-height:clamp(40px,6vh,60px)}
  .rc-top{padding-bottom:12px;margin-bottom:14px}
  .rc-tab{padding:11px 14px}
  /* People: shorter photos */
  .pphoto{height:clamp(150px,22vh,240px)!important}
}
@media (min-width:1024px){
  .about-grid{align-items:center}
  .office .ofwrap{aspect-ratio:auto!important;height:clamp(280px,calc(100vh - 480px),600px)!important}
  .eco-pic{aspect-ratio:auto!important;height:clamp(150px,24vh,300px)!important}
  #insights .blog-cover{height:clamp(96px,13vh,160px)}
  .ins-all{margin-top:14px!important}
}
@media (min-width:1280px){.rc-grid{grid-template-columns:repeat(8,1fr)!important}}
@media (min-width:1024px){
  .about-grid{grid-template-columns:.8fr 1.2fr}
  .about-side .pillars b{font-size:1.02rem}
  .about-side .pillars span{font-size:.88rem}
}
/* short laptop screens (768-900px tall): a touch smaller overall */
@media (min-width:1024px) and (max-height:900px){html{font-size:15px}}

/* ---- Hero: text and photo centred against each other, sized from the screen's width AND height,
        so the first screen looks the same on every desktop size (checked 1024-2560 wide, 700-1440 tall) ---- */
.hero .lead,.hero-sub{text-align:left!important;hyphens:manual!important;-webkit-hyphens:manual!important}
@media (min-width:992px){
  .hero-grid.row{align-items:center!important;min-height:calc(100vh - 81px)}
  .hero .hero-copy{padding-block:clamp(20px,4vh,56px)!important}
  .hero h1{font-size:clamp(2.1rem,min(3.6vw,6.4vh),3.4rem)!important;margin-top:10px}
  .hero .lead{margin-top:clamp(10px,2vh,20px)}
  .hero-sub{margin-top:clamp(6px,1.2vh,12px)}
  .hero .lead,.hero-sub{line-height:1.6!important}
  .hero .btn-row{margin-top:clamp(14px,3vh,28px)!important}
  .hero-grid > div:last-child{display:flex;align-items:center}
  .hero-photo{flex:1;min-height:0!important;height:clamp(300px,calc(100vh - 81px - 22vh),580px)!important;margin-block:0!important}
}
@media (min-width:992px) and (max-height:760px){.hero .hero-sub:nth-of-type(3){display:none}}
@media (min-width:2200px){html{font-size:18px}.hero-photo{height:clamp(300px,calc(100vh - 81px - 26vh),760px)!important}}
/* small laptops / landscape tablets (1000-1199px): more cards per row, so sections stay short */
@media (min-width:1000px) and (max-width:1199px){
  .svc-grid{grid-template-columns:repeat(4,1fr)!important;gap:12px!important}
  .svc-card{padding:16px}
  .rc{grid-template-columns:230px 1fr!important}
  .rc-grid{grid-template-columns:repeat(6,1fr)!important}
  .people-grid,.blog-grid{grid-template-columns:repeat(4,1fr)!important}
  .svc-card p{font-size:.86rem!important}
}

/* ---- /services/ pages ---- */
.svc-page .lead{max-width:60em}
.adi-crumbs{font-size:.85rem;color:var(--ink-2);margin-bottom:14px}.adi-crumbs a{color:var(--brand);text-decoration:none}
.svc-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0 28px}
.svc-index-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.svc-index-card:hover{border-color:#BCD0DB;transform:translateY(-3px)}
.svc-index-card h2{font-size:1.05rem!important;margin:0;color:var(--head)}
.svc-index-card p{font-size:.92rem!important;color:var(--ink-2)!important;margin:0}
.svc-index-num{font-family:var(--font-m);font-size:.8rem;color:var(--brand);font-weight:600}
.svc-index-card .svc-more{margin-top:auto}
.svc-detail,.svc-related,.svc-others{margin-top:32px}
.svc-detail h2,.svc-related h2,.svc-others h2,.svc-cta h2{font-size:1.3rem!important;margin:0 0 14px;color:var(--head)}
.svc-detail-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.svc-detail-list li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px 36px;position:relative;font-size:.95rem}
.svc-detail-list li::before{content:"";position:absolute;left:14px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.svc-cta{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;background:var(--brand);color:#fff;border-radius:14px;padding:24px 28px}
.svc-cta h2{color:#fff!important;margin-bottom:6px}.svc-cta p{color:#DCE8F1!important;margin:0}
.svc-cta .btn-row{margin:0}.svc-cta .btn-primary{background:#fff;color:var(--brand);border-color:#fff}.svc-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.svc-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svc-others a{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:.88rem;color:var(--brand);text-decoration:none}
.svc-others a:hover{border-color:var(--brand)}
#modalBody .btn-row{margin-top:8px}
/* site.css styles every section h2 as a small grey subtitle (main section:not(#home) h2); service pages need real headings */
main .svc-page section:not(#home) h2,main section.svc-page:not(#home) .svc-index-card h2{color:var(--head)!important;font-weight:600!important;letter-spacing:-.01em!important;margin-top:0!important}
main .svc-page section:not(#home) h2{font-size:1.3rem!important}
main section.svc-page:not(#home) .svc-index-card h2{font-size:1.05rem!important}
main .svc-page section.svc-cta:not(#home) h2{color:#fff!important}
.svc-page .adi-page-head .lead{margin-top:14px}
.svc-page .lead{text-align:left!important;hyphens:manual!important}
/* ---- /ifsca/ guide ---- */
.ifsca-toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.ifsca-toc a{font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;color:var(--brand);text-decoration:none}
.ifsca-guide .adi-content p,.ifsca-guide .adi-content li{text-align:left!important;hyphens:manual!important}
.ifsca-guide .adi-content ul,.ifsca-guide .adi-content ol{padding-left:1.3em;display:grid;gap:6px}
.ifsca-updates{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ifsca-updates li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;display:grid;gap:3px}
.ifsca-updates a{color:var(--head);font-weight:500;text-decoration:none}.ifsca-updates a:hover{color:var(--brand);text-decoration:underline}
.ifsca-u-meta{font-size:.78rem;color:var(--brand);font-weight:600;letter-spacing:.02em}
.ifsca-faq{display:grid;gap:8px}
.ifsca-faq details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.ifsca-faq summary{cursor:pointer;font-weight:600;color:var(--head)}
.ifsca-faq details p{margin:10px 0 0;text-align:left!important}
.ifsca-sources{margin-top:28px;font-size:.82rem}
/* ---- insight topic pages (/insights/ifsca/, /insights/gift-city/) ---- */
.topic-page .topic-intro{max-width:62em;text-align:left!important;hyphens:manual!important;margin-top:12px}
.topic-block{margin-top:36px;display:grid;gap:8px}
main section.topic-page:not(#home) .topic-block h2{font-size:1.3rem!important;font-weight:600!important;color:var(--head)!important;margin:0 0 6px!important}
.chip-topic{font-weight:600}
/* ---- article body: one text size, even line spacing, bullets and numbers on the same indent, justified on wide screens ---- */
.adi-content{font-size:1rem;line-height:1.75}
.adi-content p,.adi-content li{line-height:1.75!important}
.adi-content ul,.adi-content ol{margin:0 0 1.1em;padding-left:1.5em}
.adi-content li{margin:.4em 0;padding-left:.25em}
.adi-content li::marker{color:var(--brand);font-weight:600}
.adi-content h2,.adi-content h3,.adi-content h4{line-height:1.3}
.adi-content > :first-child{margin-top:0}
@media (min-width:768px){.adi-content p,.adi-content li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}}