/* Asia-Connect: their brand, on black.
   =====================================================================
   WHAT IS THEIRS, read off their live site 2026-09-23:
     gold   #D5AD36  (the logo, and the only accent on the page)
     navy   #0B1C48  (their Kadence palette)
     fonts  Roboto + Roboto Slab (their Elementor google-fonts folder)
     logo, Singapore hero, partner portraits: their own files.

   WHY BLACK AND NOT NAVY (Salma, 2026-09-23): their logo is white + gold,
   drawn for a dark ground. Against navy, the gold and the navy are both
   mid-tone and they muddy each other, so the gold reads as mustard.
   Against near-black the same gold reads as metal, and it is the only
   warm thing on the page, so every gold element is automatically the
   thing you look at. Navy is kept, demoted to a secondary ground for
   one section, so the palette is still recognisably theirs.

   Salma 4661590: the page is reengineered from scratch. The only thing
   carried over from their site is the design language above.
   ===================================================================== */
:root{
  --black:#0A0A0B;      /* the page */
  --black2:#121316;     /* a raised panel on black */
  --navy:#0B1C48;       /* theirs, kept as the secondary ground */
  --gold:#D5AD36;       /* theirs, the only accent */
  --gold-lt:#E8C860;
  --ink:#0A0A0B;
  --their-ink:#1A202C;   /* their Kadence body ink, kept for the live clone */
  --paper:#FBFAF7;      /* warm white, so the gold stays at home on it */
  --paper2:#F2EFE8;
  --grey:#6B6B70;
  --grey-d:#3A3A3E;
  --line:#E3DFD5;
  --line-dk:rgba(213,173,54,.22);
  --body:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --head:"Roboto Slab",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--paper);color:var(--grey-d);
  font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.inner{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:780px;margin:0 auto;padding:0 32px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;margin:0;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(40px,6vw,74px);line-height:1.04}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.16}
h3{font-size:22px;line-height:1.3}

/* the gold eyebrow: the one repeating brand signal */
.kick{font-family:var(--body);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 20px}
.kick::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:12px}

section{padding:130px 0}
section.tight{padding:84px 0}
.on-black{background:var(--black);color:#C9C7C2}
.on-black h1,.on-black h2,.on-black h3{color:#fff}
.on-navy{background:var(--navy);color:#C5CEE4}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-paper2{background:var(--paper2)}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-dk)}
.nav .inner{display:flex;align-items:center;gap:34px;height:86px}
.nav img{height:50px;width:auto}
.nav ul{list-style:none;display:flex;gap:30px;margin:0 0 0 auto;padding:0;font-size:14.5px}
.nav a{color:#A9A7A2;font-weight:500;letter-spacing:.01em}
.nav a:hover{color:var(--gold)}
/* BUG CAUGHT IN A SCREENSHOT: .btn is gold text on gold in the black nav,
   because .nav a{color} won the cascade over .btn{color}. The nav button
   is the one button on a dark bar, so it is stated explicitly here. */
.nav .btn{color:#0A0A0B;padding:14px 26px;font-size:14px}
.nav .btn:hover{color:#0A0A0B}

.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:15px;
  padding:16px 30px;border:0;cursor:pointer;letter-spacing:.02em;
  background:var(--gold);color:#0A0A0B;transition:background .15s}
.btn:hover{background:var(--gold-lt);color:#0A0A0B}
.btn--line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.btn--line:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#26262A;color:#fff}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:0;min-height:96vh;display:flex;align-items:center;
  background:var(--black);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.12);opacity:.30}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,10,11,.97) 0%,rgba(10,10,11,.88) 42%,rgba(10,10,11,.52) 100%)}
.hero .inner{position:relative;z-index:2;padding-top:120px;padding-bottom:120px}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .sub{color:#B9B7B2;font-size:21px;max-width:52ch;margin:32px 0 0;line-height:1.7}
.hero .cta{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .under{margin-top:26px;font-size:14px;color:#77756F;letter-spacing:.02em}

/* ------------------------------------------------------- manifesto beats */
.beat p{margin:0 0 28px;font-size:21px;line-height:1.72}
.beat.ramp p:first-child{font-family:var(--head);font-size:clamp(28px,3.4vw,40px);
  line-height:1.26;color:var(--ink);margin-bottom:40px;letter-spacing:-.015em}
.on-black .beat.ramp p:first-child,.on-navy .beat.ramp p:first-child{color:#fff}
.beat .turn{font-family:var(--head);font-size:clamp(24px,2.8vw,32px);line-height:1.38;
  color:var(--ink);margin-top:46px;padding-top:38px;border-top:2px solid var(--gold);
  display:block}
.on-black .beat .turn,.on-navy .beat .turn{color:#fff}
.beat .gold{color:var(--gold)}

.pull{font-family:var(--head);font-size:clamp(26px,3.2vw,38px);line-height:1.34;
  color:#fff;margin:0;letter-spacing:-.015em}
.pull span{color:var(--gold)}

/* ------------------------------------------------------------ the three moves */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;
  border-top:1px solid var(--line)}
.move{padding:38px 34px 40px;border-right:1px solid var(--line);position:relative}
.move:last-child{border-right:0}
.move::before{content:"";position:absolute;top:-1px;left:0;width:0;height:3px;
  background:var(--gold);transition:width .5s ease}
.move.lit::before{width:100%}
.move .w{font-family:var(--body);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.move h3{margin:16px 0 16px;font-size:21px}
.move p{margin:0 0 14px;font-size:16.5px;color:var(--grey);line-height:1.72}
.move p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ the numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:60px}
.num{border-top:1px solid var(--line-dk);padding-top:26px}
.num .v{font-family:var(--head);font-size:52px;line-height:1;color:var(--gold);font-weight:700;
  letter-spacing:-.02em}
.num .l{font-size:14.5px;color:#8E8C87;margin-top:14px;line-height:1.6}

/* ------------------------------------------------------------ refusals */
.refuse{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  margin-top:54px;border:1px solid var(--line)}
.ref{background:var(--paper);padding:30px 30px 32px}
.ref .x{font-family:var(--head);color:var(--gold);font-size:22px;line-height:1}
.ref .rh{margin:16px 0 14px;font-family:var(--head);font-size:18.5px;color:var(--ink);line-height:1.4}
.ref p{margin:0 0 12px;font-size:16.5px;line-height:1.7;color:var(--grey)}
.ref p:last-child{margin-bottom:0}
.lede{margin-top:24px}
.lede p{font-size:19px;line-height:1.7;margin:0 0 16px}
.lede p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ chairman */
.chair{display:grid;grid-template-columns:300px 1fr;gap:68px;align-items:start}
.chair .port{position:relative}
.chair .port img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(1.06)}
.chair .port::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--gold)}
.chair .name{margin-top:22px;font-family:var(--head);font-size:19px;color:#fff}
.chair .role{font-size:14px;color:#8E8C87;margin-top:4px;line-height:1.5}
.chair .said p{font-size:21px;line-height:1.74;margin:0 0 26px;color:#C9C7C2}
.chair .said p:first-child{font-family:var(--head);font-size:clamp(24px,2.6vw,31px);
  line-height:1.4;color:#fff;margin-bottom:34px}
.chair .said p:last-child{color:var(--gold);font-family:var(--head);font-size:23px;
  line-height:1.5;margin-top:34px;padding-top:30px;border-top:1px solid var(--line-dk)}

/* ------------------------------------------------------------ the brief */
.brief{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.brief .full{grid-column:1/-1}
.brief label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:700;margin-bottom:10px}
.brief input,.brief textarea,.brief select{width:100%;padding:16px 0;border:0;
  border-bottom:1px solid #C9C4B8;background:transparent;font-family:var(--body);
  font-size:18px;color:var(--ink);border-radius:0}
.brief select{padding-right:20px}
.brief textarea{min-height:110px;resize:vertical}
.brief input:focus,.brief textarea:focus,.brief select:focus{outline:none;border-bottom-color:var(--gold);border-bottom-width:2px}
.brief [aria-invalid="true"]{border-bottom-color:#B3261E;border-bottom-width:2px}
.done{display:none;border-left:3px solid var(--gold);padding:30px 34px;margin-top:30px;background:var(--paper2)}
.done.show{display:block}
.done h3{font-size:23px;margin-bottom:12px}
.done p{margin:0 0 10px;font-size:17px;color:var(--grey-d)}
.done p:last-child{margin-bottom:0}
.aside{font-size:15px;color:var(--grey);margin-top:26px}
.aside a{color:var(--ink);border-bottom:1px solid var(--gold)}

/* ------------------------------------------------------------ footer */
.foot{background:var(--black);color:#7C7A75;padding:74px 0 44px;font-size:14.5px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.foot img{height:44px;width:auto;margin-bottom:20px}
.foot h4{color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 11px}
.foot a:hover{color:var(--gold)}
.foot .bar{border-top:1px solid var(--line-dk);margin-top:54px;padding-top:26px;color:#5A5854;font-size:13px}
.foot .tag{font-family:var(--head);color:var(--gold);font-size:17px;line-height:1.5}

/* the BEFORE clone keeps their live look, which is the blue one */
.b-blue{--acc:#2B6CB0}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.svc .c{background:#fff;border:1px solid #EDF2F7;padding:32px 28px}
.svc h3{font-size:20px;margin-bottom:12px;color:#0B1C48}
.svc p{font-size:17px;color:#4A5568;margin:0 0 18px}
.b-blue{color:var(--their-ink)}
.svc a{color:#2B6CB0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
.why h4{font-family:var(--head);color:#0B1C48;font-size:19px;margin:0 0 10px}
.why p{font-size:16px;color:#4A5568;margin:0}
.wash{background:#F7FAFC}
.rule{width:64px;height:3px;background:#D5AD36;margin:26px 0}
.b-blue .btn{background:#2B6CB0;color:#fff;border-radius:4px}
.b-blue .btn:hover{background:#215387;color:#fff}
.b-blue .nav{background:#0B1C48;backdrop-filter:none}
.b-blue h1,.b-blue h2,.b-blue h3{color:#0B1C48}
.b-blue .hero h1{color:#fff}
.b-blue .kick{color:#D5AD36}
.b-blue section{padding:100px 0}
.b-blue .brief input,.b-blue .brief textarea{border:1px solid #CBD5E0;padding:14px 16px;border-radius:4px}

.banner{background:var(--gold);color:#0A0A0B;padding:13px 0;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-align:center;text-transform:uppercase}

@media(max-width:900px){
  section{padding:80px 0}
  .nav ul{display:none}
  .moves,.nums,.refuse,.chair,.brief,.foot .cols,.svc,.why{grid-template-columns:1fr}
  .move{border-right:0;border-bottom:1px solid var(--line)}
  .move:last-child{border-bottom:0}
  .chair{gap:40px}
  .chair .port{max-width:220px}
  .hero{min-height:auto}
}

/* ---- Franck's business cases (Salma 4692673) ----------------------
   Four situations, each ending on the question he has to answer. The
   ask is styled as the live thing on the card, because an open
   question in public is the honest substitute for a case study the
   firm has never published. */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.case{border:1px solid #E6E8EC;border-radius:10px;padding:26px 26px 22px;
  background:#fff}
.case .ctag{font-family:var(--head);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 10px}
.case h3{font-size:20px;line-height:1.3;margin:0 0 14px}
.case .csit{font-size:15px;line-height:1.7;color:#4A5160;margin:0 0 12px}
.case .cch{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 16px}
.case .cask{font-size:14px;line-height:1.6;color:var(--ink);margin:0;
  padding-top:14px;border-top:2px solid var(--gold);font-weight:700}
@media(max-width:860px){.cases{grid-template-columns:1fr}}