/* KS Konnect. Layout is drawn on the 853px mockup grid: "Nu" = N mockup pixels, scaled to the viewport (capped at 1100px). */
:root{
  --u: calc(min(100vw, 1100px) / 853);
  --gold:#d1aa55; --gold-text:#e2bb5e;
  --ink:#030303; --white:#fff;
  --serif:'Noto Serif Display', 'Playfair Display', Georgia, serif;
  --body:'Nunito Sans', 'Avenir Next', Avenir, sans-serif;
  --sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:var(--ink);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.btn{position:absolute;display:flex;align-items:center;justify-content:center;border:calc(1.5 * var(--u)) solid var(--gold);background:#050505;color:#fff;font-family:var(--sans);font-weight:400;text-transform:uppercase;transition:background .25s,color .25s}
.btn:hover{background:var(--gold);color:#000}
.wrap{position:relative;width:calc(853 * var(--u));margin:0 auto}
.full{position:relative;width:100%}
.eyebrow{position:absolute;font-family:var(--sans);font-weight:400;text-transform:uppercase;white-space:nowrap}
.display{position:absolute;font-family:var(--serif);font-weight:800;font-stretch:83.5%;line-height:1;white-space:nowrap}
.copy{position:absolute;font-family:var(--sans);white-space:nowrap}
/* every section title shares one size */
.title{font-family:var(--serif);font-weight:800;font-stretch:83.5%;font-size:calc(31 * var(--u));line-height:1.15;letter-spacing:calc(-.5 * var(--u))}

/* small logo, top left */
.site-head{position:absolute;top:0;left:0;right:0;z-index:5}
.site-head.static{position:relative;height:calc(84 * var(--u))}
.logo-sm{position:absolute;left:calc(46 * var(--u));top:calc(28 * var(--u));font-family:var(--serif);font-weight:800;font-stretch:83.5%;font-size:calc(21 * var(--u));line-height:1;letter-spacing:calc(-.5 * var(--u))}

/* ---------- HOME ---------- */
.h-hero{height:calc(553 * var(--u));background:#141310 url(img/home-hero-edge.png) 0 0/100% calc(553 * var(--u)) no-repeat}
.h-hero .photo{position:absolute;inset:0;width:calc(853 * var(--u));left:50%;transform:translateX(-50%);height:calc(553 * var(--u));background:url(img/home-hero.jpg) 0 0/calc(853 * var(--u)) calc(553 * var(--u)) no-repeat;cursor:pointer}
.h-hero > .wrap{pointer-events:none}
.h-hero .copy{pointer-events:auto;left:calc(52 * var(--u));top:calc(230 * var(--u));font-size:calc(12.6 * var(--u));line-height:calc(19 * var(--u));letter-spacing:calc(.8 * var(--u));font-weight:400}
/* play button over the founders, opens the corporate trailer */
.play{position:absolute;left:calc(493 * var(--u));top:calc(358 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;border:calc(1.5 * var(--u)) solid var(--gold);background:rgba(5,5,5,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .25s}
.play svg{width:calc(13 * var(--u));height:calc(14 * var(--u));margin-left:calc(3 * var(--u))}
.play svg path{fill:var(--gold);transition:fill .25s}
.play::before{content:"";position:absolute;inset:calc(-1.5 * var(--u));border-radius:50%;border:calc(1.5 * var(--u)) solid var(--gold);animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.5);opacity:0}}
.play:hover,.h-hero .photo:hover .play{background:var(--gold);transform:scale(1.06)}
.play:hover svg path,.h-hero .photo:hover .play svg path{fill:#000}
@media (prefers-reduced-motion:reduce){.play::before{animation:none;opacity:0}}

/* trailer lightbox */
.vmodal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:60px 16px;background:rgba(0,0,0,.92)}
.vmodal[hidden]{display:none}
.vmodal video{display:block;width:min(100%, 1280px, calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;background:#000;outline:1px solid rgba(209,170,85,.35)}
.vclose{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.vclose svg{width:14px;height:14px}
.vclose:hover{background:var(--gold);color:#000}

.pillars{background:#020202;padding-bottom:calc(44 * var(--u))}
.pillars .wrap{display:grid;grid-template-columns:calc(276 * var(--u)) calc(300 * var(--u)) calc(277 * var(--u));height:calc(140 * var(--u))}
.cta{display:flex;justify-content:center;padding-top:calc(18 * var(--u))}
.cta .btn{position:relative;width:calc(190 * var(--u));height:calc(44 * var(--u));font-size:calc(12.6 * var(--u));letter-spacing:calc(1.6 * var(--u));color:var(--gold-text)}
.cta .btn:hover{color:#000}
.pillar{position:relative;text-align:center}
.pillar + .pillar::before{content:"";position:absolute;left:0;top:calc(24 * var(--u));width:calc(1 * var(--u));height:calc(92 * var(--u));background:var(--gold)}
.pillar .title{margin-top:calc(20 * var(--u))}
.pillar p{margin-top:calc(14 * var(--u));font-size:calc(11.4 * var(--u));line-height:calc(17 * var(--u));letter-spacing:calc(.4 * var(--u));font-weight:400}

.h-majlis{height:calc(460 * var(--u));background:#030303;overflow:hidden}
.h-majlis .photo{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(853 * var(--u));height:calc(460 * var(--u))}
.h-majlis .photo::before{content:"";position:absolute;left:calc(335 * var(--u));top:calc(44 * var(--u));width:calc(528 * var(--u));height:calc(352 * var(--u));background:url(img/majlis-event.jpg) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%),linear-gradient(transparent,#000 12%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%),linear-gradient(transparent,#000 12%,#000 86%,transparent);mask-composite:intersect}
.kicker{font-size:calc(12.6 * var(--u));letter-spacing:calc(2.4 * var(--u))}
.h-majlis .kicker{left:calc(48 * var(--u));top:calc(92 * var(--u))}
.h-majlis .title{position:absolute;left:calc(47 * var(--u));top:calc(108 * var(--u));line-height:1}
.h-majlis .copy{left:calc(50 * var(--u));top:calc(154 * var(--u));font-size:calc(12.4 * var(--u));line-height:calc(18.5 * var(--u));letter-spacing:calc(.7 * var(--u))}
.h-majlis .btn{left:calc(48 * var(--u));top:calc(286 * var(--u));width:calc(246 * var(--u));height:calc(38 * var(--u));font-size:calc(12.4 * var(--u));letter-spacing:calc(.9 * var(--u))}

/* ---------- MAJLIS (membership form) ---------- */
.m-body{padding:calc(16 * var(--u)) 0 calc(96 * var(--u));background:radial-gradient(calc(420 * var(--u)) calc(210 * var(--u)) at calc(290 * var(--u)) 100%,#231f19,rgba(3,3,3,0) 100%),var(--ink)}
.m-body .wrap{display:grid;grid-template-columns:calc(428 * var(--u)) calc(290 * var(--u));column-gap:calc(53 * var(--u));padding-left:calc(50 * var(--u));align-items:start}
.m-body .title{margin-bottom:calc(24 * var(--u))}
.field{margin-bottom:calc(18 * var(--u))}
.field > label{display:block;font-size:calc(11 * var(--u));letter-spacing:calc(2 * var(--u));font-weight:500;text-transform:uppercase;line-height:1;height:calc(18 * var(--u))}
.ctl{display:block;width:100%;height:calc(40 * var(--u));border:calc(1 * var(--u)) solid #3b3b3b;border-radius:calc(3 * var(--u));background:#0c0c0c;color:#fff;font-family:var(--body);font-size:calc(12.8 * var(--u));padding:calc(2 * var(--u)) calc(14 * var(--u)) 0;outline:none;font-weight:400;letter-spacing:calc(.15 * var(--u))}
.ctl::placeholder{color:#a9a9a9;opacity:1}
.ctl:focus,.phone:focus-within{border-color:var(--gold)}
textarea.ctl{height:calc(84 * var(--u));padding-top:calc(12 * var(--u));resize:none;line-height:1.45}
.phone{display:flex;height:calc(42 * var(--u));border:calc(1 * var(--u)) solid #3b3b3b;border-radius:calc(3 * var(--u));background:#0c0c0c}
.phone .cc{font-family:var(--body);display:flex;align-items:center;width:calc(140 * var(--u));border-right:calc(1 * var(--u)) solid #3e3e3e;padding-left:calc(14 * var(--u));font-size:calc(12.8 * var(--u));color:#e8e8e8;cursor:pointer;position:relative}
.phone .cc select{position:absolute;inset:0;opacity:0;cursor:pointer}
.flag{width:calc(23 * var(--u));height:calc(15 * var(--u));margin-right:calc(20 * var(--u));display:block}
.chev{width:calc(11 * var(--u));height:calc(7 * var(--u));margin-left:calc(18 * var(--u))}
.phone input{flex:1;border:0;background:transparent;height:100%;border-radius:0}
.submit{margin-top:calc(8 * var(--u));width:100%;height:calc(50 * var(--u));border:calc(1.5 * var(--u)) solid var(--gold);border-radius:calc(2 * var(--u));background:#050403;color:#fff;font-family:var(--sans);font-size:calc(13 * var(--u));letter-spacing:calc(3.6 * var(--u));font-weight:400;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s}
.submit svg{width:calc(17 * var(--u));height:calc(12 * var(--u));margin-left:calc(18 * var(--u))}
.submit:hover{background:var(--gold);color:#000}
.submit:disabled{opacity:.6;cursor:wait}
.submit:hover svg path{stroke:#000}
.toast{margin-top:calc(12 * var(--u));font-size:calc(12 * var(--u));color:var(--gold-text);opacity:0;transition:opacity .3s}
.toast.on{opacity:1}

.aside-col{padding-top:0}
.aside-copy,.contact-copy{font-family:var(--body);font-weight:400;letter-spacing:calc(.2 * var(--u))}
.aside-copy{font-size:calc(14.6 * var(--u));line-height:calc(23 * var(--u))}
.rule{display:block;width:100%;height:calc(1 * var(--u));background:var(--gold);margin:calc(44 * var(--u)) 0 calc(36 * var(--u))}
.contact-copy{font-size:calc(13.8 * var(--u));line-height:calc(21.5 * var(--u))}
.email{display:inline-block;margin-top:calc(10 * var(--u));font-family:var(--body);font-size:calc(17 * var(--u));color:var(--gold-text);letter-spacing:calc(.3 * var(--u))}
.email:hover{text-decoration:underline}

@media (min-width:1101px){
  .photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}

/* ---------- PHONES: stack the layout ---------- */
@media (max-width:640px){
  :root{--u:calc(100vw / 400)}
  .logo-sm{left:calc(16 * var(--u));top:calc(20 * var(--u));font-size:calc(22 * var(--u))}
  .h-hero{height:auto;padding:calc(80 * var(--u)) calc(16 * var(--u)) calc(300 * var(--u))}
  .h-hero .photo{left:0;transform:none;width:100%;top:auto;bottom:0;height:calc(340 * var(--u));background-size:auto calc(340 * var(--u));background-position:100% 100%}
  .play{left:calc(168 * var(--u));top:calc(211 * var(--u));width:calc(42 * var(--u));height:calc(42 * var(--u))}
  .play svg{width:calc(12 * var(--u));height:calc(13 * var(--u))}
  .h-hero .copy{position:relative;left:0;top:0}
  .h-hero .copy{white-space:normal;font-size:calc(13.5 * var(--u));line-height:calc(20 * var(--u))}
  .h-hero .copy br,.h-majlis .copy br{display:none}
  .wrap{width:100%}
  .photo{-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
  .h-hero{background-image:none}
  .pillars{height:auto}
  .pillars .wrap{display:block;height:auto;padding:calc(8 * var(--u)) calc(16 * var(--u))}
  .cta{padding-top:calc(4 * var(--u))}
  .cta .btn{width:calc(200 * var(--u));height:calc(44 * var(--u));font-size:calc(13 * var(--u))}
  .pillar{padding:calc(24 * var(--u)) 0}
  .pillar + .pillar::before{left:50%;top:0;width:calc(80 * var(--u));height:calc(1 * var(--u));transform:translateX(-50%)}
  .pillar .title{margin-top:0}
  .pillar p{font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
  .h-majlis{height:auto;padding:calc(36 * var(--u)) calc(16 * var(--u)) calc(310 * var(--u))}
  .h-majlis .photo{left:0;transform:none;width:100%;top:auto;bottom:0;height:calc(290 * var(--u))}
  .h-majlis .photo::before{left:0;top:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
  .h-majlis .kicker,.h-majlis .title,.h-majlis .copy,.h-majlis .btn{position:relative;left:0;top:0}
  .h-majlis .title{margin-top:calc(6 * var(--u))}
  .h-majlis .copy{margin-top:calc(16 * var(--u))}
  .h-majlis .copy{white-space:normal;font-size:calc(13 * var(--u));line-height:calc(19.5 * var(--u))}
  .h-majlis .btn{margin-top:calc(22 * var(--u));width:calc(260 * var(--u));height:calc(42 * var(--u));font-size:calc(12.6 * var(--u))}
  .site-head.static{height:calc(64 * var(--u))}
  .m-body{padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(48 * var(--u))}
  .m-body .wrap{display:block;padding:0}
  .m-body .title{font-size:calc(28 * var(--u))}
  .field > label{font-size:calc(11.5 * var(--u))}
  .ctl,.phone .cc{font-size:calc(14 * var(--u))}
  .aside-col{padding-top:calc(56 * var(--u))}
  .aside-copy,.contact-copy{font-size:calc(15 * var(--u));line-height:calc(23 * var(--u))}
  .aside-copy br,.contact-copy br{display:none}
  .rule{margin:calc(36 * var(--u)) 0}
}