/* ===========================================================================
   DESIGN A: HERITAGE
   The old homepage's idea, finished properly: black bar with the wordmark in
   the middle, Kuala Lumpur full-bleed, the tagline centred over it. Black and
   white with TEG red as the only colour, and the Libre Baskerville italic
   from mm2h.com for the second half of every headline.
   =========================================================================== */

/* ---------- header ---------- */
.a .top{ position:absolute; top:0; left:0; right:0; z-index:10; color:#fff;
         background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0)) }
.a .bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:112px }
.a .nav{ display:flex; gap:38px; font-family:var(--display); font-weight:600; font-size:12.5px;
         letter-spacing:.16em; text-transform:uppercase }
.a .nav.r{ justify-content:flex-end }
.a .nav a{ opacity:.88; padding:6px 0; border-bottom:1.5px solid transparent }
.a .nav a:hover{ opacity:1; border-color:var(--red) }
.a .brand{ display:flex; flex-direction:column; align-items:center; padding:0 48px }
.a .brand svg{ width:190px; height:auto; color:#fff }
.a .brand span{ font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.34em;
                text-transform:uppercase; opacity:.7; margin-top:8px }

/* ---------- hero ---------- */
.a .hero{ position:relative; min-height:860px; height:100vh; max-height:1000px; color:#fff;
          display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:#111 }
.a .hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40% }
.a .hero .shade{ position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(5,6,10,.55) 0%,rgba(5,6,10,.25) 38%,rgba(5,6,10,.55) 70%,rgba(5,6,10,.9) 100%) }
.a .hero .in{ position:relative; text-align:center; margin-bottom:auto; padding-top:250px }
.a .hero .eyebrow{ color:#fff; opacity:.8; letter-spacing:.3em }
.a .hero h1{ margin-top:26px; line-height:1; }
.a .hero h1 .sans{ display:block; font-family:var(--display); font-weight:800; font-size:92px;
                   letter-spacing:-.025em }
.a .hero h1 .serif{ display:block; font-size:86px; margin-top:6px; letter-spacing:-.01em }
.a .hero p{ max-width:640px; margin:30px auto 0; font-size:20px; line-height:1.6; color:rgba(255,255,255,.88) }
.a .hero .cta{ display:flex; gap:16px; justify-content:center; margin-top:40px }
.a .pillars{ position:relative; display:grid; grid-template-columns:repeat(4,1fr);
             border-top:1px solid rgba(255,255,255,.25); padding-top:26px; padding-bottom:40px }
.a .pillars div + div{ border-left:1px solid rgba(255,255,255,.18); padding-left:28px }
.a .pillars b{ display:block; font-family:var(--display); font-weight:700; font-size:12.5px;
               letter-spacing:.22em; text-transform:uppercase; color:#fff }
.a .pillars b::before{ content:""; display:inline-block; width:8px; height:8px; background:var(--red);
                       margin-right:12px; vertical-align:1px }
.a .pillars span{ display:block; font-size:15px; color:rgba(255,255,255,.72); margin-top:8px }

/* ---------- story ---------- */
.a .story{ padding:140px 0 130px }
.a .story .grid{ display:grid; grid-template-columns:420px 1fr; gap:90px; align-items:center }
.a .thirty{ border-right:1px solid var(--rule); padding-right:60px }
.a .thirty b{ display:block; font-size:250px; line-height:.8; color:var(--red); letter-spacing:-.04em }
.a .thirty span{ display:block; font-family:var(--display); font-weight:700; font-size:15px;
                 letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-top:28px; line-height:1.6 }
.a .story .lede{ margin-top:22px }
.a .founder{ display:flex; align-items:center; gap:18px; margin-top:38px; padding-top:30px;
             border-top:1px solid var(--rule) }
.a .founder img{ width:74px; height:74px; object-fit:cover; object-position:50% 20%; border-radius:50% }
.a .founder b{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:21px }
.a .founder span{ display:block; font-family:var(--display); font-weight:600; font-size:11.5px;
                  letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-top:3px }
.a .founder .more{ margin-left:auto }

/* ---------- figures ---------- */
.a .figs{ background:var(--black); color:#fff; padding:78px 0 }
.a .figs .row{ display:grid; grid-template-columns:repeat(4,1fr) }
.a .figs .row div + div{ border-left:1px solid rgba(255,255,255,.14); padding-left:36px }
.a .figs b{ display:block; font-family:var(--display); font-weight:800; font-size:58px; line-height:1;
            letter-spacing:-.02em }
.a .figs span{ display:block; font-size:15px; color:rgba(255,255,255,.66); margin-top:14px; max-width:230px }

/* ---------- brands ---------- */
.a .brands{ background:var(--warm); padding:130px 0 }
.a .brands .head{ max-width:640px }
.a .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:60px }
.a .card{ background:#fff; padding:0 0 30px; display:flex; flex-direction:column;
          transition:transform .25s, box-shadow .25s }
.a .card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,20,30,.08) }
.a .card .im{ height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden;
              background:#ECE9E3; margin-bottom:26px }
.a .card.cover .im img{ height:252px; width:auto; box-shadow:0 14px 30px rgba(0,0,0,.25) }
.a .card.logo .im{ background:#fff; border-bottom:1px solid var(--rule) }
.a .card.logo .im img{ width:62%; height:auto }
.a .card.photo .im img{ width:100%; height:100%; object-fit:cover }
.a .card b, .a .card p, .a .card .more{ margin-left:30px; margin-right:30px }
.a .card b{ font-family:var(--display); font-weight:800; font-size:21px }
.a .card p{ color:var(--soft); font-size:16px; margin-top:8px; margin-bottom:22px }
.a .card .more{ margin-top:auto; align-self:flex-start }

/* ---------- the cover wall ---------- */
.a .wall{ background:var(--black); color:#fff; padding:120px 0 0; overflow:hidden }
.a .wall .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px }
.a .wall .eyebrow{ color:#fff; opacity:.7 }
.a .strip{ display:flex; gap:22px; margin-top:60px; padding:0 40px 110px; justify-content:center }
.a .strip img{ width:190px; height:270px; object-fit:cover; flex:none; box-shadow:0 20px 40px rgba(0,0,0,.5) }
.a .strip img:nth-child(odd){ transform:translateY(26px) }

/* ---------- advertise ---------- */
.a .adv{ padding:140px 0 }
.a .adv .grid{ display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start }
.a .adv .lede{ margin-top:22px }
.a .adv .cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap }
.a .offer li{ border-top:1px solid var(--rule); padding:26px 0 }
.a .offer li:last-child{ border-bottom:1px solid var(--rule) }
.a .offer b{ display:block; font-family:var(--display); font-weight:800; font-size:20px }
.a .offer b::after{ content:" \2192"; font-family:var(--serif); font-weight:400; color:var(--red) }
.a .offer span{ display:block; color:var(--soft); margin-top:6px }

/* ---------- clients ---------- */
.a .clients{ padding:0 0 130px }
.a .clients .head{ margin-bottom:28px }

/* ---------- contact, in the house red with the fronds ---------- */
.a .contact{ position:relative; background:var(--red-deep); color:#fff; padding:120px 0; overflow:hidden }
.a .contact .grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start }
.a .contact .lede{ color:rgba(255,255,255,.85); margin-top:20px }
.a .ways li{ border-top:1px solid rgba(255,255,255,.25); padding:20px 0; display:grid;
             grid-template-columns:120px 1fr; gap:20px }
.a .ways li:last-child{ border-bottom:1px solid rgba(255,255,255,.25) }
.a .ways span{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em;
               text-transform:uppercase; color:rgba(255,255,255,.7); padding-top:4px }
.a .ways b{ font-weight:500; font-size:19px }

/* ---------- footer ---------- */
.a .foot{ background:var(--black); color:rgba(255,255,255,.7); padding:90px 0 36px; font-size:15px }
.a .foot .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px }
.a .foot svg{ width:170px; color:#fff }
.a .foot .b p{ margin-top:16px; font-family:var(--serif); font-style:italic }
.a .foot h4{ font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.2em;
             text-transform:uppercase; color:#fff; margin-bottom:18px }
.a .foot a{ display:block; padding:4px 0 } .a .foot a:hover{ color:#fff }
.a .foot .base{ display:flex; justify-content:space-between; margin-top:70px; padding-top:26px;
                border-top:1px solid rgba(255,255,255,.14); font-size:13px }

/* =========================== responsive =========================== */
@media (max-width:1100px){
  .a .nav{ gap:24px; letter-spacing:.1em }
  .a .brand{ padding:0 28px }
  .a .strip img:nth-child(n+8){ display:none }
}
@media (max-width:900px){
  .a .bar{ grid-template-columns:auto 1fr auto; height:84px }
  .a .nav{ display:none }
  .a .brand{ align-items:flex-start; padding:0 }
  .a .brand svg{ width:150px }
  .a .burger{ display:flex; grid-column:3; background:none; border:0; color:#fff }
  .a .hero{ height:auto; min-height:0 }
  .a .hero .in{ padding-top:170px; padding-bottom:60px }
  .a .hero h1 .sans{ font-size:50px } .a .hero h1 .serif{ font-size:44px }
  .a .hero p{ font-size:17px }
  .a .hero .cta{ flex-direction:column; align-items:stretch; max-width:340px; margin-left:auto; margin-right:auto }
  .a .hero .cta .btn{ justify-content:center }
  .a .pillars{ grid-template-columns:1fr 1fr; row-gap:22px }
  .a .pillars div + div{ border-left:0; padding-left:0 }
  .a .story, .a .brands, .a .adv{ padding:80px 0 }
  .a .story .grid, .a .adv .grid, .a .contact .grid{ grid-template-columns:1fr; gap:44px }
  .a .thirty{ border-right:0; padding-right:0; border-bottom:1px solid var(--rule); padding-bottom:36px }
  .a .thirty b{ font-size:150px }
  .a .figs .row{ grid-template-columns:1fr 1fr; row-gap:40px }
  .a .figs .row div + div{ border-left:0; padding-left:0 }
  .a .figs b{ font-size:42px }
  .a .cards{ grid-template-columns:1fr; gap:20px; margin-top:40px }
  .a .wall{ padding-top:80px }
  .a .wall .head{ flex-direction:column; align-items:flex-start }
  .a .strip{ justify-content:flex-start; overflow-x:auto; padding:0 20px 70px; scroll-snap-type:x mandatory }
  .a .strip img{ width:150px; height:212px; scroll-snap-align:start; display:block !important }
  .a .contact{ padding:80px 0 }
  .a .ways li{ grid-template-columns:1fr; gap:4px }
  .a .foot .cols{ grid-template-columns:1fr 1fr }
  .a .foot .base{ flex-direction:column; gap:8px }
}
.a .brands .head.wide{ max-width:900px }

/* phones: the six brand cards become compact rows, image beside text,
   which takes about a third of the page's length off */
@media (max-width:720px){
  .a .card{ flex-direction:row; align-items:stretch; padding:0 }
  .a .card .im{ width:118px; height:auto; min-height:150px; flex:none; margin:0 }
  .a .card.cover .im img{ height:124px }
  .a .card.logo .im img{ width:84% }
  .a .card > b, .a .card > p, .a .card > .more{ margin-left:18px; margin-right:16px }
  .a .card{ display:grid; grid-template-columns:118px 1fr; grid-template-rows:auto auto 1fr; column-gap:0 }
  .a .card .im{ grid-row:1 / span 3 }
  .a .card b{ font-size:17px; margin-top:18px } .a .card p{ font-size:14.5px; margin-bottom:10px }
  .a .card .more{ margin-bottom:18px; align-self:end; justify-self:start }
}